vue3 watch深度监听,watch监听vuex
watch函数用于监听特定的数据源，并在回调函数中执行副作用。下面这篇文章主要介绍在VUE3中使用手表监控的相关信息。有需要的朋友可以参考一下。
目录
watch介绍手表监控的不同情况：1监控单个REINFL数据；2监测多个再灌注数据；3监控代理数据；4监控代理数据的某一属性；5监控代理数据的一些属性汇总。
watch介绍
vue中的Watch用于监控数据的响应变化，获取数据变化前后的值。
手表的完全参与
观察(监控数据、副作用功能、配置对象)
watch(data，(newData，oldData)={}，{immediate: true，deep: true})
watch监听的不同情况
创建响应数据
从“vue”导入{ ref，watch，reactive }；
let name=ref( moxun )；
设年龄=ref(18)；
让人=被动({
爱好：“照片”，
城市：{
江苏：{
南京：‘雨花台’，
},
},
});
1 监听单个refimpl数据
手表(名称，(新名称，旧名称)={
console.log(newName ，newName)；
});
2 监听多个refimpl数据
方法1: vue3允许多个watch监听器存在。
手表(名称，(新值，旧值)={
console.log(new ，newValue， old ，old value)；
});
手表(年龄，(新值，旧值)={
console.log(new ，newValue， old ，old value)；
});
方法2:将需要监控的数据添加到阵列中。
手表([姓名，年龄]，(新值，旧值)={
//返回的数据是一个数组
console.log(new ，newValue， old ，old value)；
});
3 监听proxy数据
注意
1.此时vue3会强制开启深度监控。
2.当监听值为代理对象时，oldValue会异常，与newValue相同。
//侦听代理对象
手表(person，(newValue，oldValue)={
console.log(newValue ，newValue， oldValue ，old value)；
});
4 监听proxy数据的某个属性
监控值需要以函数返回的形式写入，vue3无法直接监控对象某个属性的变化。
手表(
()=人。爱好，
(新值，旧值)={
console.log(newValue ，newValue， oldvalue ，old value)；
}
);
注意
当监视代理对象的属性是复杂数据类型时，您需要打开深度监视。
手表(
()=person.city，
(新值，旧值)={
console . log( person . city newvalue ，new value， oldvalue ，old value)；
},{
深：真的
}
);
5 监听proxy数据的某些属性
手表([()=person.age，()=person.name]，(newValue，oldValue)={
//此时，newValue是一个数组
console.log(person.age ，newValue，old value)；
});
总结
1.与vue2中的手表配置一致
2.两个坑：
在监听由reactive定义的代理数据时
无法正确获取旧值。
强制启用深度监听(无法关闭)
深度CI在侦听由reactive定义的代理对象的属性时生效。
关于手表监控在VUE3中的使用，本文到此为止。更多关于Vue3中手表监控使用的信息，请搜索我们之前的文章或者继续浏览下面的相关文章。希望大家以后能多多支持我们！
郑重声明：本文由网友发布，不代表盛行IT的观点，版权归原作者所有，仅为传播更多信息之目的，如有侵权请联系，我们将第一时间修改或删除，多谢。