Vue watch 复杂对象变化,oldvalue 和 newValue 一致,解决办法。
watch的常规用法:watch:{tempData:function(value,oldValue){console.log(value,oldValue)}},但是如果需要监听的数据是对象、内嵌多层的对象后,需要用到watch中的deep属性。类似于下面这种对象内嵌的对象:data:()=>({tableData:{lineData:[{"name":"线路1","type":"长途"}
·
watch的常规用法:
watch:{
tempData: function (value, oldValue) {
console.log(value, oldValue)
}
}
但是如果需要监听的数据是对象、内嵌多层的对象后,需要用到watch中的deep属性。类似于下面这种对象内嵌的对象:
data: () => ({
tableData:{
lineData:[
{"name":"线路1","type":"长途"},
{"name":"线路2","type":"本地"},
]
}
})
如果tableData内部属性发生了变化,通过watch就会打印出newValue,oldValue,但是他们打印出来的结果都是一样的。因为数据同源,虽然可以监听到数据发生了变化,但是要比较数据差异就不行了。如果想要得到差异内容,可以结合计算属性、序列化、反序列化生成新的对象,来避免此问题 。代码如下;
computed:{
tableDataNew(){
return JSON.parse(JSON.stringify(this.tableData));
}
},
watch:{
tableDataNew: {
handler: function (newValue, oldValue) {
console.log(newValue, oldValue);
},
deep: true
}
}
更多推荐
已为社区贡献4条内容
所有评论(0)