Vue3 setup的注意点及watch监视属性的六种情况分析
作者:Aic山鱼
这篇文章主要介绍了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(()=>{ return person.firstName+'-'+person.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监视属性内容请搜索脚本之家以前的文章或继续浏览下面的相关文章希望大家以后多多支持脚本之家!
您可能感兴趣的文章:
- vue3中setup语法糖下父子组件间传递数据的方式
- Vue3.2中setup语法糖的使用教程分享
- vue3中<script setup> 和 setup函数的区别对比
- vue3在setup中使用mapState解读
- Vue3中关于setup与自定义指令详解
- Vue3中的setup语法糖、computed函数、watch函数详解
- Vue3 setup 的作用实例详解
- Vue3 setup添加name的方法步骤
- Vue3的setup在el-tab中动态加载组件的方法
- vue3.0 setup中使用vue-router问题
- vue3中setup语法糖下通用的分页插件实例详解
- vue3 setup语法糖各种语法新特性的使用方法(vue3+vite+pinia)
- vue3 setup的使用和原理实例详解