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