vue3中watch监听ref reactive响应式数据写法及注意点

watch函数

• 与vue2中watch配置一致
• 两个小坑
  • 监视reactive定义的响应式数据时，oldvalue无法正确获取，强制开启了深度监视（deep配置失败）
  • 监视reactive定义的响应式数据中某个属性时：deep配置有效

  let sum = ref(10);
  let user = ref('zs');
  let person = reactive({
   name:'ht',
   age:19.
   job:{
    j1:{
     salary:10
    }
   }
  })
  let person1 = ref({
   name:'ht',
   age:19.
   job:{
    j1:{
     salary:10
    }
   }
  })

  情况一：监视ref的一个响应式数据

  watch(sum,(newValue,oldValue)=>{
   console.log('sum发生改变了',newValue,oldValue)
  },{immediate:true})

  情况二：监视ref的多个响应式数据,以数组的形式监听

   watch([sum,user],(newValue,oldValue)=>{
   console.log('sum或user发生改变了',newValue,oldValue)
  },{immediate:true})

  情况三：监视reactive定义的响应式数据

   //若watch监视的是reactive定义的响应式数据，则无法正确获得oldValue
   //若watch监视的时reactive定义的响应式数据，则强制开启了深度监视,深度监视不生效*/
   watch(person,(newv,oldv)=>{
    console.log('person值发生了变化',newv,oldv)
   },{immediate:true;deep:true})

  情况四：监视reactive的某一个属性

   watch(()=>person.age,(newv,oldv)=>{
    consle.log('age发生了变化',newv.oldv)
   },{immediate:true;deep:true})

  情况五：监视reactive多个属性

   watch([()=>person.name,()=>person.age],(newv,oldv)=>{
    console.log('name或age变化了',neldv)
   },{immediate:true;deep:true})

  情况六：特殊情况 reactive监视对象的某个属性,该属性多层嵌套,必须开启深度监视

  watch(()=>person.job,(newv,oldv)=>{
   console.log('job发生改变',newv,oldv)
  },{deep:true})

  当监视ref定义的对象式响应数据类型

  //当监视ref定义的对象式响应数据类型(1)
   watch(person1.value,(newv,oldv)=>{
    console.log('person1发生了变化',newv,oldv)
   })
   //当监视ref定义的对象式响应数据类型(2),舍弃1，person.value监视的是RefImpl对象
   watch(person1,(newv,oldv)=>{
    console.log('person1发生了变化',newv,oldv)
   },{deep:true})