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

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

方法:

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

watch: {

   testData: {

       handler: (newVal, oldVal) => {

         console.log('我变化了', newVal, oldVal)

       },

       deep: true

   }

}

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

第二步:配合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)) // 此处我的理解就是,序列化反序列化后 返回了一个新的对象,而不是在原对象改属性。

}

}

// 思路:就是将我们需要的值进行序列化和反序列化。这样打印出的值就是我们想要的了。


本文章由javascript技术分享原创和收集

发表评论 (审核通过后显示评论):