Vue3:watch属性的坑||监视reactive数据时遇到的问题||深度监视||无法获取oldValue的原因
Vue3在使用watch属性监视reactive定义的响应式数据时遇到的坑:1.当监测对象为对象类型时,无法获取到oldValue。2.当监测对象是reactive定义的数据时,强制开启深度监视。3.当监测对象时reactive定义数据中的一个类型为对象的属性时,需要手动开启深度监视。//监视ref定义的一个响应式数据watch(sum,(newV,oldV)=>{console.log(n
·
Vue3在使用watch属性监视reactive定义的响应式数据时遇到的坑:
1.当监测对象为对象类型时,无法获取到oldValue。
2.当监测对象是reactive定义的数据时,强制开启深度监视。
3.当监测对象时reactive定义数据中的一个类型为对象的属性时,需要手动开启深度监视。
// 监视ref定义的一个响应式数据
watch(sum,(newV,oldV)=>{
console.log(newV+'-'+oldV);
})
watch(msg,(newV,oldV)=>{
console.log(newV+'-'+oldV);
})
// 监视ref定义的多个响应式数据
watch([sum,msg],(newV,oldV)=>{
console.log(newV,oldV);
})
// watch可以携带三个参数,第三个为配置项对象
watch([sum,msg],(newV,oldV)=>{
console.log(newV,oldV);
},{immediate: true,deep: true})
// 监视reactive数据,
// 注意:1.监视reactive数据无法获取oldValue
// 2.强制开启了深度监视,无法关闭
watch(person,(newV,oldV)=>{
console.log(newV,oldV);
})
// 监视reactive数据中的一个属性
// 能够获取oldV
watch(()=>person.name,(newV,oldV)=>{
console.log(newV,oldV);
})
// 监视reactive数据的某些属性
watch([()=>person.name,()=>person.age],(newV,oldV)=>{
console.log(newV,oldV);
})
// 监视reactive数据中的一个属性也为对象时:
// 拿不到oldV
watch(()=>person.job,(newV,oldV)=>{
console.log(newV,oldV);
},{deep:true})
**注:**必须获取reactive中的oldValue时,可以将该属性提取出来使用ref定义。
如何监视ref定义的对象类型数据?
两种方法:
// 方法一:通过value,ref的value值就是reactive代理
watch(person.value,(newV,oldV)=>{
console.log(newV,oldV);
})
// 方法二:通过开启深度监视
watch(person,(newV,oldV)=>{
console.log(newV,oldV);
},{deep: true})
更多推荐
已为社区贡献5条内容
所有评论(0)