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

巴特西

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

最新文章

热门文章