Vue 中怎样用 watch 监听多个数据变化

在 Vue 开发过程中，我们常常会遇到需要监听多个数据变化的场景。通过合理运用 watch 选项，能够高效地实现这一需求。

Vue 的 watch 是一个强大的功能，它允许我们对数据的变化做出响应。通常情况下，我们使用它来监听单个数据属性。但当涉及到多个数据时，有几种方法可以实现。

可以在 watch 选项中分别列出需要监听的每个数据。例如，有两个数据 data1 和 data2，代码可以这样写：

watch: {
    data1(newValue, oldValue) {
        // 处理 data1 变化的逻辑
    },
    data2(newValue, oldValue) {
        // 处理 data2 变化的逻辑
    }
}

这种方式简单直观，适用于需要对每个数据进行独立处理的场景。

然而，如果希望在多个数据变化时执行相同的逻辑，一个个监听就显得繁琐。此时，可以使用计算属性结合 watch 来实现。先创建一个计算属性，它返回包含多个需要监听数据的对象，然后监听这个计算属性。

computed: {
    combinedData() {
        return {
            data1: this.data1,
            data2: this.data2
        };
    }
},
watch: {
    combinedData: {
        deep: true,
        handler(newValue, oldValue) {
            // 处理 data1 或 data2 变化的逻辑
        }
    }
}

这里设置 deep: true 是因为监听的是一个对象，确保对象内部属性的变化也能被监听到。

还有一种更简洁的方式，即使用字符串语法来监听多个数据。将多个数据用逗号隔开，写在一个字符串中作为 watch 的键，值则是处理函数。

watch: {
    'data1, data2': function(newValue, oldValue) {
        // 处理 data1 或 data2 变化的逻辑
    }
}

在实际项目中，根据具体需求选择合适的方法监听多个数据变化。如果每个数据变化有独特的处理逻辑，分别监听是最佳选择；若多个数据变化执行相同操作，计算属性结合 watch 或字符串语法会让代码更简洁高效。掌握这些技巧，能极大提升 Vue 开发的效率和代码质量。