Vue3 setup的注意点及watch监视属性的六种情况分析
一，setup须知
1.1setup的执行时间
1.setup的执行时间要比beforCreate执行要早
export default {
name: "Demo",
beforeCreate(){
console.log('beforeCreate已执行');
},
setup() {
console.log('setup已执行');
let person = reactive({
name: "小明",
age: 20,
});
return {
person,
};
},
};1.2.steup参数
setup的参数
1.props: 值为对象，包含: 组件外部传递过来，且组件内部声明接收了的属性
2.context:上下文对象
①attrs:值为对象，包含: 组件外部传递过来，但没有在props配置中声明的属性,相当于 this.$attrs
export default {
name: "Demo",
props:['msg','age'],
setup(props) {
console.log(props);
let person = reactive({
name: "小明",
age: 20,
});
return {
person,
};
},
};
②slots: 收到的插槽内容,相当于 this.$slots。
在App中定义插槽
<template v-slot:qwe>
<span>123</span>
</template>
<template v-slot:ewq>
<span>321</span>
</template>在子组件中获取到插槽
console.log(context.slots); // 得到插槽
③emit: 分发自定义事件的函数,相当于 this.$emit。
在App中写一个自定义事件并且传给组件
<Demo @hi="Hello" msg="山鱼" age=10>
</Demo> setup() {
function Hello(){
console.log('你好！');
}
return {
Hello
}
}然后去到子组件使用context.comit获取到自定义事件
function point(){
context.emit('hi',666)
}
5TgxPT2v-1681788304084)]
```js
function point(){
context.emit('hi',666)
} 与Vue2中的computed配置功能一致
import { reactive,computed} from "vue";
export default {
name: "Demo",
setup() {
let person = reactive({
firstName: "小",
lastName: "明",
});
// 计算属性的简写形式，不考虑修改，是只读的
// 计算属性的完整形式（可以读改）
person.fullName= computed({
get(){
return person.firstName +'-'+person.lastName
},
set(value){
const arr = value.split('-')
person.firstName = arr[0]
person.lastName = arr[1]
}
})
return {
person,
};
},
};二，watch监视属性
有两种watch，分别是单个属性数据监视，和多个属性数据监视
watch中的三个参数分别为，监视的对象，监视的函数，监视属性的配置
监视ref所定义的数据
①监视属性监视ref的一个响应式的值
watch(sum, (newvalue, oldvalue) => {
console.log('当前值为'+newvalue, '以前值为'+oldvalue);
});②监视ref所定义的多个响应式数据
watch([sum,msg], (newvalue, oldvalue) => {
console.log('当前值为'+newvalue, '以前值为'+oldvalue);
});监视reactive所定义的数据
①监视reactive定义的数据的变化
使用reactive定义的数据无法使用watch正确的获取newValue
并且会强制开启深度监视
watch(person,(newValue, oldValue) => {
console.log('person变化了',newValue,oldValue)
})②监视reactive所定义的响应式数据的某个属性
watch(()=>person.name,(newValue,oldValue)=>{
console.log('person.name发生了变化',newValue,oldValue)
})③监视reactive所定义的响应式数据的某些属性
watch([()=>{person.age},()=>{person.name}],(newValue,oldValue)=>{
console.log('person.name发生了变化',newValue,oldValue)
})④特殊形况
注：该情况监视的是recative所定义的对象中的某个属性，所以deep可以开启
watch(()=>person.job,(newValue,oldValue)=>{
console.log('person.name发生了变化',newValue,oldValue)
}, {deep: true})到此这篇关于Vue3 setup的注意点及watch监视属性的六种情况分析的文章就介绍到这了,更多相关vue3 watch监视属性内容请搜索编程网以前的文章或继续浏览下面的相关文章希望大家以后多多支持编程网！
免责声明：
① 本站未注明“稿件来源”的信息均来自网络整理。其文字、图片和音视频稿件的所属权归原作者所有。本站收集整理出于非商业性的教育和科研之目的，并不意味着本站赞同其观点或证实其内容的真实性。仅作为临时的测试数据，供内部测试之用。本站并未授权任何人以任何方式主动获取本站任何信息。
② 本站未注明“稿件来源”的临时测试数据将在测试完成后最终做删除处理。有问题或投稿请发送至: 邮箱/279061341@qq.com QQ/279061341
