Vue 中 Watch 的用法汇总

1. Watch 简介

在Vue中，Watch是用于响应和监听数据变化的一个重要特性。通过watch可以检测数据的变化，并且可以在数据变化时做相应的操作，例如更新dom元素、请求接口等。

2. Watch 的使用

2.1 Watch 的基本语法

在 Vue 中添加 Watch 通过在数据对象中定义一个 watch 属性，然后对其进行配置。其基本语法如下：

watch: {
    // 监听数据对象属性
    dataProperty: {
        // 监听器回调函数
        handler(newVal, oldVal) {
            // 数据发生变化后执行的操作
        },
        // 是否在组件挂载时就执行一次监听器回调函数
        immediate: true,
        // 是否深度监听对象或数组内部值的变化
        deep: true
    },
    // 监听另一个数据对象属性
    anotherDataProperty: {
        // 监听器回调函数
        handler(newVal, oldVal) {
            // 数据发生变化后执行的操作
        },
        // 是否在组件挂载时就执行一次监听器回调函数
        immediate: true,
        // 是否深度监听对象或数组内部值的变化
        deep: true
    },
    // 监听其他数据对象属性 ...
}

2.2 Watch 的示例

下面是 Watch 的两个示例，通过学习这两个示例我们可以更好地理解 Watch 的使用。

2.2.1 监听数据对象属性

示例代码如下：

data() {
    return {
        msg: ''
    }
},
watch: {
    msg: {
        handler(newVal, oldVal) {
            console.log(newVal, oldVal); // 输出数据变化前后的值
        },
        immediate: true, // 监听器回调函数在组件挂载时会被执行一次
        deep: false // 不需要深度监听
    }
}

在这个示例中，我们监听了数据对象中的 msg 属性，给它添加了监听器回调函数。在监听器回调函数中，我们控制台输出了新值和旧值。

2.2.2 监听计算属性

示例代码如下：

data() {
    return {
        firstName: '',
        lastName: ''
    }
},
computed: {
    fullName() {
        return this.firstName + ' ' + this.lastName; // 计算属性 fullName
    }
},
watch: {
    fullName: {
        handler(newVal, oldVal) {
            console.log(newVal, oldVal); // 输出数据变化前后的值
        },
        immediate: true, // 监听器回调函数在组件挂载时会被执行一次
        deep: false // 不需要深度监听
    }
}

在这个示例中，我们监听了计算属性 fullName，给它添加了监听器回调函数。在监听器回调函数中，我们控制台输出了新值和旧值。

3. Watch 的注意事项

• 注意性能问题：由于 watch 可以监听多个数据对象的属性变化，所以给哪些属性添加监听器是需要谨慎考虑的，过多的监听器会在数据变化时导致过多的执行，影响性能。
• 避免滥用 Watch：在 Vue 中，当需要监听一个引用类型的属性时，必须声明 deep 属性为 true。但是，在大多数情况下，这种做法并不好，推荐尽量使用 immutable 对象，或者使用自行封装的深度监听方法来代替 Watch。