【Vue3】watch 监听器的使用

watch 的三个参数

1. watch第一个参数,监听源

2. watch第二个参数,回调函数cb（newVal,oldVal）

3. watch第三个参数,一个options配置项是一个对象

   {
   
       immediate:true //是否立即调用一次
       
       deep:true //是否开启深度监听
   
   }
   

那么现在有一组响应式源对象，该如何监听呢。

    // 响应式源对象
    let sum = ref(0)
    let msg = ref('你好')
    let person =reactive({
      name:'张三',
      age:18,
      job:{
        j1:{
          salary:20
        }
      }
    })

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

    watch(sum,(newValue,oldValue)=>{
      console.log('sum的值变化了',newValue,oldValue);
    },{immediate:true})

情况2：监视ref定义的多个响应式数据

    //    合并写以数组形式监听
    watch([sum,msg],(newValue,oldValue)=>{
      console.log('sum或msg的值变化了',newValue,oldValue);
    },{immediate:true})

情况3：监视reactive定义的一个响应式数据的全部属性

    /*
          1.注意：此处无法正确的获取oldValue
          1.注意：强制开启了深度监视（deep配置无效）
    */
    watch(person,(newValue,oldValue)=>{
      console.log('person变化了',newValue,oldValue);
    },{deep:false}) // 此处的deep无效

情况4：监视reactive定义的一个响应式数据的某一个属性

    watch( ()=>person.age ,(newValue,oldValue)=>{
      console.log('person年龄变化了',newValue,oldValue);
    })

情况5：监视reactive定义的一个响应式数据的某些属性

    watch( [()=>person.age,()=>person.name] ,(newValue,oldValue)=>{
      console.log('person年龄或姓名变化了',newValue,oldValue);
    })

特殊情况

    watch( ()=>person.job ,(newValue,oldValue)=>{
      console.log('person的job变化了',newValue,oldValue);
    },{deep:true}) //此处由于监视的是reactive所定义的对象中的某个，所以deep配置有效