Vue中watch深度监听对象或数组新旧值相同

Vue中使用Watch与Computed

最新推荐文章于 2025-09-22 00:07:32 发布

原创最新推荐文章于 2025-09-22 00:07:32 发布 · 1.7k 阅读

7 ·

CC 4.0 BY-SA版权

文章标签：

#vue.js #前端 #javascript

本文探讨了Vue.js框架中Watch监听复杂类型时遇到的问题及其解决方案。通过使用Computed计算属性进行深拷贝来确保值的变化不会相互关联，从而解决了新旧值引用同一地址导致的问题。

原因：watch在监听【复杂类型】使，新旧值引用的地址（栈查找的同一个堆内容“相当于两把相同钥匙只能打开同一个门”）是一样的

解决：可采用computed计算属性进行对源对象的深拷贝，这样每次值变化就不会关联上了

computed:{   //深拷贝
      transfernavInfo(){
        return JSON.parse(JSON.stringify(this.transfernavInfo));
      }
 },
watch:{
    transfernavInfo:{
         handler(newVal,oldVal){
            console.log(newVal,oldVal)
         }
        //deep:true
    }
}