Vue-2.x中computed与watch的异同

前端

2024-01-23 13:00:56

在Vue.js中，处理组件内部的数据变化是常见需求。Vue提供了两种主要机制来实现这一功能：computed 和 watch 属性。尽管两者都能响应数据的变化，它们的使用场景和内部原理存在明显区别。

计算属性 vs 监视器

计算属性(computed)更适合用于依赖于其他状态进行实时更新的简单逻辑处理。每当相关依赖的数据发生变化时，计算属性会自动重新求值。这种机制保证了计算属性的结果总是最新的，并且由于其缓存特性，在依赖数据不变的情况下不会重复执行计算。

监视器(watch)则提供了更灵活的响应式编程能力。它不仅能够监听数据的变化，还能执行更复杂的操作，比如异步请求、修改DOM等。

计算属性：简单直接

使用computed来创建一个基于其他状态值的派生状态是相当直观的。考虑如下场景：

假设有一个Vue组件，其中包含两个输入框分别用于设置宽度和高度，并希望在任何这些输入改变时自动更新显示面积。

data() {
    return {
        width: 0,
        height: 0
    }
},
computed: {
    area() {
        return this.width * this.height;
    }
}

这里的area属性是一个计算属性，它依赖于width和height。每当这些值发生变化时，Vue会自动重新求值并更新视图。

监视器：灵活多变

对于需要执行复杂或异步操作的情况，则更适合使用watch。比如，当输入框中的宽度变化时，不仅仅要计算面积，还可能需要发送一个请求到服务器，或者进行更复杂的UI调整。

data() {
    return {
        width: 0,
        height: 0
    }
},
computed: {
    area() {
        return this.width * this.height;
    }
},
watch: {
    width(newWidth, oldWidth) {
        console.log(`宽度从${oldWidth}变成了${newWidth}`);
        // 这里可以执行异步操作，比如：
        // sendRequestToUpdateServer({width: newWidth});
    }
}