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)) // 此处我的理解就是,序列化反序列化后 返回了一个新的对象,而不是在原对象改属性。
     }
    }
    // 思路:就是将我们需要的值进行序列化和反序列化。这样打印出的值就是我们想要的了。
    
©著作权归作者所有,转载或内容合作请联系作者
平台声明:文章内容(如有图片或视频亦包括在内)由作者上传并发布,文章内容仅代表作者本人观点,简书系信息发布平台,仅提供信息存储服务。

推荐阅读更多精彩内容