vue watch深度监听，computed多个监听

最新推荐文章于 2025-10-27 21:57:47 发布

原创最新推荐文章于 2025-10-27 21:57:47 发布 · 3.4k 阅读

1 ·

CC 4.0 BY-SA版权

本文介绍两种在Vue中深度监听复杂数据结构变化的方法：一是使用watch的deep:true选项；二是利用computed属性结合watch实现更高效、易读的深度监听。通过实例演示如何监听对象内部属性的变化。

watch深度监听的正确打开方式
在大部分日常开发中，我们经常需要使用watch监听数据变化，但如果想监听的数据层级比较深，往往结果并不尽如人意，本文介绍两种深度监听数据变化的方法

1.借助deep: true深度监听

watch: {
    obj: {
        // 数据变化时执行的逻辑代码
        handler(newName, oldName) {
            console.log('obj.a changed');
        },
        // 开启深度监听
        deep: true
    }
}

watch监听对象，同时用deep: true深度监听，此时只有对象中的某个值发生改变就会触发

2.借助computed计算属性监听

// 通过计算属性，计算出需要监听的数据
computed: {
    changed: function () {
        return this.obj.changed
    }
},

// 不通过deep，仍然可以深度监听计算出来的数据
watch: {
    changed: function () {
        console.log(this.changed)
    }
}

通过computed计算属性的配合，先计算出需要监听的属性后用watch监听
从性能以及可读性考虑，个人比较推荐第二种方式

computed多监听

      data(){
            return {
                n1:'',
                n2:'',
                n3:''
            }
        },
        // computed监听多个
        computed:{
            result(){
                return (Number(this.n1)+Number(this.n2))*Number(this.n3)
            }
        }