Vue watch监测不到数据变化与新老值一样

当watch的值是一个引用类型的，如Array Object这种，是监测不到变化的。

方法：

1. 第一步： 设置深度监听 deep: true

   watch: {
       testData: {
           handler: (newVal, oldVal) => {
             console.log('我变化了', newVal, oldVal)
           },
           deep: true
       }
   }
   

   这样已经能监听到数据发生变化了，但是打印的 newVal oldVal是一样的。因为他们的数据同源，引用指针指向是一样的。

2. 第二步：配合computed

   watch:{
     testData: {
       handler: function (newVal, oldVal) {
           let obj = JSON.parse(newVal);
           let obj2 = JSON.parse(oldVal);
           console.log(obj, obj2)
       },
       deep: true
     }
   },
   comouted:{
    testData(){
        return JSON.parse(JSON.stringify(this.testData)) // 此处我的理解就是，序列化反序列化后 返回了一个新的对象，而不是在原对象改属性。
    }
   }
   // 思路：就是将我们需要的值进行序列化和反序列化。这样打印出的值就是我们想要的了。