外包做网站哪家好,某种网站怎么找,上海网站建设网页制作,网站建设技术包括哪些方面1、Vue3相关语法内容
赋值语句(ref、reactive系列)组件传值(父子#xff0c;子父)watch#xff0c;watchEffect监听slot具名插槽
1、赋值语法#xff08;ref#xff0c;reactive#xff09;
1.1、ref 、isRef、 shallowRef、triggerRef、customRef 支持所有的类型…1、Vue3相关语法内容
赋值语句(ref、reactive系列)组件传值(父子子父)watchwatchEffect监听slot具名插槽
1、赋值语法refreactive
1.1、ref 、isRef、 shallowRef、triggerRef、customRef 支持所有的类型原因没有泛型约束
##### 1、ref
// 简单数据类型 可以直接通过 赋值
type M {name:string;
}
const name refM()// 复杂数据类型 可以直接通过 赋值
import type {Ref} from vue;
type M {name:string;
}
const name:RefM ref(屈小康)// 取值
name.value // 屈小康
name // Object// 为什么
ref返回值是一个ES6的class的类里面有一个 .value的属性所以取值和赋值 都必须通过 .value 固定语法### 2、isRefisRef(name) // 判断定义的内容是否为一个ref定义的内容 返回 true/false.### 3、shallowRef //浅层响应式
const a ref({name:a})
const b shallowRef(b)// 改变值const handleClick () {a.value.name aa // 页面展示 aab.value.name bb // 页面展示 b 页面没有发生改变但是值已经发生改变 (也就是说没有双向数据绑定)b.value {name:bb // 页面展示 bb 修改成功 这就是浅层 只绑定到 value属性}}
### 4、triggerRef 强制跟新 shallowRef### 5、customRef 自定义一个reffunction MyRef(value){return customRef((track,trigger){return {get(){track();},set(newVal){value newVal;trigger();},}})}
const name customRef(1);
name.value // 1 输出内容## 6、获取 元素 相当于 v2的 this.$refs
div refdom/div
// 获取 元素
const dom ref(); // dom 必须和 refdom 中的 dom 保持一致
// 获取
dom.value 相当于 this.$refs.dom1.2、 reactive、readonly、shallowReactive 支持引用数据类型泛型约束 reactive targetT // 源码实例 继承与 object。 const stu reactive({name:屈小康
})### 1.1 获取值stu.name // 屈小康
### 1.2 修改值
stu.name 张三
### 1.3 修改值错误做法
let obj {name:张三}
stu obj;
引用数据类型无法进行重新赋值### 2.1 readonly 只读属性
const name raeadonly({}) // 不可进行操作后续属性相对情况下如果你的readonly依赖于reactive这个时候修改reactive的时候就会变更### 3.1 shallowReactive 浅层的 只到第一个属性。
const stu reactive({age:14,person:{sex:男}
})
// 只影响到 stu.age2、to系列toRef、toRefs、toRaw
2.1 toRef
用法毫无卵用的用法不能说这种用法是错的只能说没有任何意义
const stu {name:张三};
const stus toRef(stu,name)
stus.name 李四; 值发生了改变但是页面不会变还是 张三如何发生改变
const stu reactive({name:张三}) // 这样进行 修改就好了
总结非响应式使用的时候 没有任何作用。只能修改响应式的。
2.2 toRefs
const stu {name:1,age:2};
const {name,age} toRefs(stu);
总结非响应式使用的时候 没有任何作用。只能修改响应式的。2.3 toRaw 脱离响应式对象 const stu {name:“1”,age:“2”}; toRaw(stu) // {name:“1”,age:“2”} 2、组件传值
2.1.1、父—子 基本数据传参 [不是TS版]defineProps
### Father 组件
template我是FatherSon :titletitle/Son
/template
script setupimport Son from ./b.vue;
import { ref } from vue;const title ref(把这个值传给孩子组件);/script#### Son 组件templatediv我是孩子{{ title }}/div
/template
script setup
import { defineProps } from vue;## 简单 用法 不带默认值
defineProps ({title: String,
});## 带默认值
const props defineProps({title: {type: String,default: 我是默认值}
})/script2.1.2、父—子 事件数据传参 [不是TS版]defineExpose父调用子组件的方法
###### Fatner
template我是FatherSon refson/Sonbutton clickhandleClick点我/button
/template
script setupimport Son from ./b.vue;
import { ref } from vue;
const son ref(null);const handleClick () {son.value.handleClick();
}/script###### Sontemplatediv我是孩子/div
/template
script setup
import { defineProps } from vue;const handleClick () {console.log(我被点击了)
}defineExpose({ handleClick })/script
2.1.3 子— 父 事件传参【不是TS版本】$emit
###### Fatner
template我是FatherSon childEmitchildEmit/Son
/template
script setupimport Son from ./b.vue;
import { ref } from vue;const childEmit (value) {console.log(value)
}/script########### Son
templatediv我是孩子button clickhandleSend点我/button/div
/template
script setup
import { defineProps } from vue;const emit defineEmits([childEmit]);const handleSend () {emit(childEmit, 数据)
}
/script
2.2.1 基本数据类型传参TS版本withDefaults
template我是FatherSon :titletitle/Son/template
script setup langtsimport Son from ./b.vue;
import { ref } from vue;const title refstring()/scripttemplatediv我是孩子{{ props.title }}/div
/template
script setup langtsimport { defineProps } from vue;const props withDefaults(defineProps{title: string,}(),{title: 默认值}
)
/script
3、监听函数watchwatchEffect
3.1 watch
templateinput v-modelinputValue /input v-modelinputValues /input v-modelobj.stu.name /
/template
script setup langts
import { reactive, ref, watch } from vue;const inputValue refstring()
const inputValues refstring()
const obj reactive({stu: {name: }
})
watch([inputValue, inputValues], (newValue, oldValue) {console.log(newValue, oldValue)
},{deep: true // 深度监听新值和旧值是一样的如果是深层次的对象})// 监听 对象的 某个属性
// reactive 会自动开启 deeptru e
watch((() obj.stu.name), (newValue, oldValue) {console.log(newValue, oldValue)
})### 同时还有以下属性
1、deep true //开启深度监听
2、immediatetrue //立即执行
3、flush“pre” // pre 跟新之前调用sync 同步执行 post 组件更新之后执行
/script
style scoped langless/style### 主要源码解释算了太多了没法解释了
https://github.com/vuejs/core.git
位置
3.2 watchEffect // 立即执行
const stop watchEffect((oninvalidate) {console.log(inputValue); // 被改变后后执行oninvalidate(() {console.log(我第一个执行)})
})
// 停止监听 stop()cosnt click () stop(); //监听函数就会停止
1、flush“pre” // pre 跟新之前调用sync 同步执行 post 组件更新之后执行4、插槽slot 插槽就是子组件中的提供给父组件使用的一个占位符用 slot / slot 表示父组件可以在这个占位符中填充任何模板代码填充的内容会替换子组件的 slot /slot标签。 4.1、具名插槽
// ### 子组件divslot nameheader/slotslot/slotslot namefooter/slot/div// ### 父组件使用template v-slot:headerdivheader/div/templatetemplate v-slotdiv默认插槽/div/templatetemplate v-slot:footerdivfooter/div/template4.2、作用于插槽 slot nameheader :data/slotconst data reactive({message:我是一条消息})// #header v-slot:headertemplate #header{data}{{data.message}} // 我是一条消息/template
4.3、动态变量插槽 template #[slot]啦啦啦啦/template
const slot ref(header)
