第三十九篇: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配置有效