Vue——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监听

从性能以及可读性考虑，个人比较推荐第二种方式