解决watch数组新旧值无法监听的问题

最新推荐文章于 2024-06-07 09:34:54 发布

原创最新推荐文章于 2024-06-07 09:34:54 发布 · 920 阅读

0 ·

CC 4.0 BY-SA版权

文章标签：

#javascript #vue.js

使用经验专栏收录该内容

16 篇文章

订阅专栏

本文探讨了在Vue中，由于新旧值同源导致watch监听失效的问题，提供了解决方案——通过计算属性创建数组的深度拷贝，并演示了如何使用JSON.parse(JSON.stringify)实现。

解决watch数组新旧值无法监听的问题：
问题原因为新旧值同源，解决方案如下，直接computed一个数组的深度拷贝，监听拷贝即可。
new Vue({
el:"#example",
data:{
arr:[1,2,3],
index:1
},
methods:{
changeArr(){
this.arr.push(this.index++);
}
},
computed:{
newarr(){
return JSON.parse(JSON.stringify(this.arr));
}
},
watch:{
newarr:{
handler(newval,oldval){
console.log(‘newval:’,newval);
console.log(‘oldval:’,oldval);
}
}
}
})