vue watch监听变化数据时,新旧值一致
watch的基本用法:watch:{watchData: function (value, oldValue) {console.log(value, oldValue)}}但是如果需要监听的数据如下:data: () => ({tableAll:{tableData:[]}})则需要用到watch中的deep属性。于是我们写成了这个:computed:{newTableData(){ret
·
watch的基本用法:
watch:{
watchData: function (value, oldValue) {
console.log(value, oldValue)
}
}
但是如果需要监听的数据如下:
data: () => ({
tableAll:{
tableData:[]
}
})
则需要用到watch中的deep属性。
于是我们写成了这个:
computed:{
newTableData(){
return this.tableAll.tableData
}
},
watch:{
newTableData: {
handler: function (value, oldValue) {
console.log(value, oldValue)
},
deep: true
}
}
但是问题来了,deep属性设置为true后发现,value 的值总是跟oldValue值一样。
解决代码如下:
computed:{
newTableData(){
return JSON.stringify(this.tableAll.tableData)
}
},
watch:{
newTableData: {
handler: function (value, oldValue) {
let obj = JSON.parse(value);
let obj2 = JSON.parse(oldValue);
console.log(obj, obj2)
},
deep: true
}
}
思路:将需要监听的值进行序列化和反序列化操作,新旧值就不相同了。
更多推荐
已为社区贡献4条内容
所有评论(0)