当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)) // 此处我的理解就是,序列化反序列化后 返回了一个新的对象,而不是在原对象改属性。 } } // 思路:就是将我们需要的值进行序列化和反序列化。这样打印出的值就是我们想要的了。