watch监听的几种写法

1.直接监听单个字符串的变化

//value就是需要监听的变量
 watch:{
       value(){
           console.log('1321321321',this.value);
       }
    },

//带参数的
 watch:{
       value(newVal,oldVal){
           console.log('1321321321',newVal,oldVal);
       }
    },

   watch:{
      'value': {
          immediate: true,
          deep:true,
          handler (val) {
             
          }
      }
  },

    watch:{
      value: {
          immediate: true,
          deep:true,
          handler (newVal) {
              console.log('newVal',newVal);
          }
      }
  },

2.监听数组的变化

  2.1如果只是想监听数组的长度变化，普通监听即可

watch: {
      list:{
        handler(newVal,oldVal){
          console.log(newVal,oldVal);
        },
      }     
},

 2.2监听里面的值变化，需要深度监听deep: true，后面发现监听数组不加deep也可以

 watch: {
      list:{
        handler(newVal,oldVal){
          console.log(newVal,oldVal);
          //新旧值不同
        },
        deep: true,
      }     
},

3.监听对象的变化，需要深度监听，用到deep属性

  3.1监听整个对象的变化

 watch: {
    obj: {
    handler(newValue, oldValue) {
    console.log(newValue,oldValue)
    //打印出的新旧值一样，后面内容会解决这个新旧值一样的问题
},
 // 这里是关键，代表递归监听 obj 的变化
    deep: true
  }
},

3.2监听对象中的某个属性变化，

 immediate表示在watch中首次绑定的时候，是否执行handler,设置为true则首次就执行

数组（一维、多维）的变化不需要通过深度监听，对象数组中对象的属性变化则需要deep深度监听。

遇到问题：监听对象时新旧值一样

问题描述：监听对象时新旧值一样

出现原因：

解决方案：

1方法一：使用computed属性将当前的对象进行深拷贝监听computed的值，代码如下：

computed:{
    newObj(){
          return JSON.parse(JSON.stringify(this.obj));
    }
 },
  //添加obj对象的变化
   watch: {
    newObj:{
        handler(newVal,oldVal){
          console.log(newVal,oldVal);
           //此时输出的新旧值不同了
        },
       deep:true  
      } 
},

方法二：set方法后续更新