本文介绍了Vue.js中watch的使用方法，包括监听单个或多个数据源，以及配置选项如immediate和deep。同时讨论了reactive对象的监听特性，特别是对于对象属性的深度监听。示例代码展示了如何监听对象属性的变化并处理回调函数。
watch：侦听需要的数据源，并在回调函数中执行副作用
参数：1：监听数据源 2：参数回调函数（newVal,oldVal） 3:options:{immediate:true,//是否立即调用一次 deep:true,//是否开启深度监听}
ref监听
watch(msg1,(newVal,oldVal)=>{//监听单一数据
console.log(newVal,oldVal)
},{
immediate:true,//是否立即调用一次
deep:true,//是否开启深度监听
})
watch([msg1,msg2],(newVal,oldVal)=>{//监听多个数据源
console.log(newVal,oldVal) //返回多个数组
})
监听对象需要开启 deep:true
watch(obj,(newVal,oldVal)=>{
console.log(newVal,oldVal)//能监听到数据，但是newVal==oldVal
},{
deep:true
})
reactive监听
let obj = reactive({
a:{
b:{
name:'哈哈',
age:187
}
}
})
watch(obj,(newVal,oldVal)=>{
console.log(newVal,oldVal)//能监听到数据，但是newVal==oldVal
},{
deep:true //开不开启都能监听到
})
监听对象单一属性
第一个参数必须为函数形式
watch(()=>obj.a.b.age,(newVal,oldVal)=>{
console.log(newVal,oldVal)
})
扫一扫
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
