vue watch 深度监听

vue2文档：API — Vue.js

vue3文档：侦听器 | Vue.js

        watch 可以用来监听页面中的数据，但如果监听的源是对象或数组，则使用深度监听，强制深度遍历源，以便在深度变更时触发回调。

一，监听

<template>
    <div>
        <h1>{{ sum }}</h1>
        <button @click="addSum">+1</button>
    </div>
</template>
<script>
export default {
    data() {
        return {
            sum: 18
        }
    },
    watch: {
        sum: function (newValue, oldValue) {
            console.log(newValue, oldValue);
        }
    },
    methods: {
        addSum() {
            this.sum = this.sum + 1
        }
    }
}
</script>

        普通用法，可以监听到sum的值。

二，深度监听

        但如果要监听对象或数组里的元素，上面的方法不能使用。需要加 deep 和 handler，给对象的每一个属性添加一个监听器。

<template>
    <div>
        <h1>{{ data.a }}</h1>
        <button @click="addA">+1</button>
    </div>
</template>
<script>
export default {
    data() {
        return {
            data: {
                a: 14,
                b: 16
            }
        }
    },
    watch: {
        data: {
            handler: function (newValue) {
                console.log(newValue);
            },
            deep: true
        }
    },
    methods: {
        addA() {
            this.data.a = this.data.a + 1
        }
    }
}
</script>

        深度监听将 deep 改为 true，代表是否进行深度监听，默认为 false，监听会一层层向下遍历，给对象的每一个属性都添加一个监听器。

        在 handler 中编写需要执行的代码。

        如果只想监听其中一个属性，这种方法会造成资源的浪费，因为给对象的每一个属性都添加了监听器，一次监听会得到对象中的所有属性。

只监听对象的某一属性

        可以将监听的属性用字符串的类型表示，这样只会监听对象其中的某一个属性。

<template>
    <div>
        <h1>{{ data.a }}</h1>
        <button @click="addA">+1</button>
    </div>
</template>
<script>
export default {
    data() {
        return {
            data: {
                a: 14,
                b: 16
            }
        }
    },
    watch: {
        'data.a': {
            handler: function (newValue) {
                console.log(newValue);
            },
            deep: true
        }
    },
    methods: {
        addA() {
            this.data.a = this.data.a + 1
        }
    }
}
</script>