第三十九篇:Vue3 watch(ref和reactive的监视)

好家伙,

1.vue2中的watch是调用配置项,(只能写一个)

   vue3中的watch是一个函数(可以写很多个)

 

2.watch一些用法:

这里是定义的数据

set up(){ let sum =ref(0) let msg = ref('你好啊') let person = reactive({ name:'张三' job:{ j1{ salary:20 } } }) }
return{
 ..........
}

 

用法一:监视ref所定义的一个响应式数据

watch(sum,(newValue,oldvalue)=> {console.log('sum变了',newValue,oldvalue)}, {immediate:true})

 

 

用法二:监视ref所定义的多个对象

watch([sum,msg],(newValue,oldvalue)=> {console.log('sum变了',newValue,oldvalue)}, {immediate:true})

 

 

用法三:监视reactive监视reative所定义的一个响应式数据的全部属性

注意:1.此处无法获得正确的oldValue,对象拿不到oldVuale

　　 2.默认开启深度监视?关不掉,强制开启了深度监视(deep配置无效)

watch(person,(newValue,oldvalue)=> {console.log('sum变了',newValue,oldvalue)}, {deep:false})

 

用法四:监视reactive监视reative所定义的一个响应式数据的某个属性   (写成函数)

watch(()=>person.name,(newValue,oldvalue)=>
{console.log('sum变了',newValue,oldvalue)},)

 

用法五:监视reactive监视reative所定义的一个响应式数据的某些属性

watch([()=>person.name,()=>person.age],(newValue,oldvalue)=> 
{console.log('sum变了',newValue,oldvalue)})

 

特殊情况:

watch(()=>person.name,(newValue,oldvalue)=> {console.log('sum变了',newValue,oldvalue)}, {deep:true})

此处监视得失reactive定义的对象中的某个属性的对象 .

这里是普通对象了,deep配置又能用了

 

3.小结:1.监视reactive定义的响应式数据时:oldValue无法正确获取,强制开启了胜读监视(deep配置失败)

　　 2.监视reactive定义的响应式数据中某个属性时:deep配置有效