Vue 的 computed 与 watch 的区别详解

Vue.js 中的 computed 和 watch

在 Vue.js 中，computed 和 watch 都是用于监控数据的变化并更新视图的响应式特性。但是，它们之间有一些关键的区别：

• computed 是一个计算属性，而 watch 是一个侦听器。 computed 属性的值是根据其他属性的值计算得来的，而 watch 侦听器则是在某个属性的值发生变化时执行某个函数。
• computed 属性是惰性的，而 watch 侦听器是主动的。 惰性意味着 computed 属性只会在其依赖项发生变化时重新计算，而主动意味着 watch 侦听器会在其侦听的属性发生变化时立即执行。
• computed 属性可以被缓存，而 watch 侦听器不能被缓存。 这意味着 computed 属性的值可以被存储起来，以便在以后重新使用，而 watch 侦听器每次执行时都会重新计算。

什么时候使用 computed？

使用 computed 的最佳时机是当您需要一个计算属性，其值依赖于其他属性的值时。 例如，您可以使用 computed 属性来计算产品的总价，该总价取决于产品的数量和单价。

// 计算属性
computed: {
  totalPrice() {
    return this.quantity * this.price;
  }
}

什么时候使用 watch？

使用 watch 的最佳时机是当您需要在某个属性的值发生变化时执行某个函数时。 例如，您可以使用 watch 侦听器来在用户更改输入框中的文本时更新视图。

// 侦听器
watch: {
  name(newValue, oldValue) {
    // 当 name 属性的值发生变化时执行此函数
    this.msg = 'Hello ' + newValue;
  }
}

computed 和 watch 的性能比较

在性能方面，computed 属性通常比 watch 侦听器更有效。这是因为 computed 属性是惰性的，这意味着它们只会在其依赖项发生变化时重新计算，而 watch 侦听器是主动的，这意味着它们会在其侦听的属性发生变化时立即执行。

结论

computed 和 watch 都是 Vue.js 中非常重要的响应式特性。它们都用于监控数据的变化并更新视图，但是它们之间有一些关键的区别。在本文中，我们详细分析了 computed 和 watch 的区别，并提供了它们的用法示例。希望这些信息能够帮助您更好地理解和使用 computed 和 watch，从而编写出更有效和响应更快的 Vue.js 应用程序。