Vue 中利用 computed 监听多个数据变化的方法

在 Vue 开发中，我们常常会遇到需要监听多个数据变化，并根据这些变化做出相应处理的场景。而 computed 计算属性是实现这一功能的有效手段。

Computed 计算属性在 Vue 中有着独特的优势，它会基于其依赖的数据进行缓存，只有当依赖的数据发生变化时，才会重新计算。这使得它在性能上相较于普通方法调用更为高效。

当要监听单个数据变化时，我们可以轻松地定义一个 computed 属性。例如，有一个数据 message，我们想根据它的变化得到一个新的值：

data() {
    return {
        message: 'Hello'
    }
},
computed: {
    newMessage() {
        return this.message + ' World';
    }
}

这里 newMessage 就是一个基于 message 数据变化而变化的计算属性。

但当面临监听多个数据变化时，实现方法会稍微复杂一些。假设我们有两个数据 num1 和 num2，我们需要根据它们的变化计算它们的和。可以这样做：

data() {
    return {
        num1: 1,
        num2: 2
    }
},
computed: {
    sum() {
        return this.num1 + this.num2;
    }
}

在这个例子中，sum 计算属性依赖于 num1 和 num2 两个数据。只要 num1 或 num2 发生变化，sum 就会重新计算。

对于更复杂的场景，比如多个数据分布在不同的层级结构中，我们可以使用计算属性函数内部对多个数据进行访问和处理。例如：

data() {
    return {
        user: {
            name: 'John',
            age: 30
        },
        hobby: 'Reading'
    }
},
computed: {
    combinedInfo() {
        return `Name: ${this.user.name}, Age: ${this.user.age}, Hobby: ${this.hobby}`;
    }
}

这里 combinedInfo 计算属性依赖于 user 对象中的 name、age 以及 hobby 数据，当这些数据任何一个发生变化时，combinedInfo 都会重新计算。

通过巧妙利用 computed 计算属性，我们能够高效地监听多个数据的变化，并基于这些变化实现各种复杂的业务逻辑，提升 Vue 应用的开发效率和性能。