Vue watch深度监测时handler新值和旧值一样

最新推荐文章于 2023-08-25 11:11:19 发布

Adios丶

最新推荐文章于 2023-08-25 11:11:19 发布

阅读量2.6k

点赞数 4

分类专栏： Vue.js 文章标签： javascript html5 vue.js

本文链接：https://blog.youkuaiyun.com/qq_43505828/article/details/120451673

版权

在Vue中，当深度监听一个对象或数组时，由于引用不变，变更后的旧值与新值相同。官方文档提到，通过结合计算属性和序列化、反序列化的方法可以解决这个问题。实际操作中，需要创建一个计算属性来保存对象的副本，并在watch中监听这个计算属性的变化，以获取差异。这可能与JavaScript的引用类型和Vue的响应式原理（深浅拷贝）有关。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

<div id="app">
    <h4>a的值是{
  {numbers.a}}</h4>
    <input type="button" value="n++" @click="numbers.a++">
</div>
<script>
    const vm = new Vue({
            el: "#app",
            data: {
                numbers : {
                    a : 0,
                    b : 0
                }
            },
            watch: { // 监视属性
                'numbers' : {
                    handler(newValue, oldValue) {
                        console.log("numbers对象里面的a被修改了！", newValue.a, oldValue.a);
                    },
                    deep : true
                }
            }
        })
</script>

控制台打印出来的是：