watch 和 computed 的区别：优雅响应 Vue.js 数据

watch 和 computed 的区别与选择

前言

在 Vue.js 中，watch 和 computed 是两个用于响应式数据的关键特性。它们都允许您根据底层数据的更改更新组件的状态，但它们的工作方式存在一些关键差异。本文将深入探讨 watch 和 computed 的区别，并指导您在构建 Vue.js 应用程序时做出明智的选择。

watch

语法：

watch: {
  // 对象属性监听器
  someProperty: {
    handler(newValue, oldValue) { ... },
    // 可选选项
    immediate: true,
    deep: true
  },
  // 速记语法
  someOtherProperty: 'someMethod'
}

功能：

• watch 监听一个或多个响应式属性的变化。
• 当监听的属性之一更改时，watch 将触发其 handler 函数。
• handler 函数接受新旧属性值作为参数。

选项：

• immediate： 如果为 true，则在组件首次渲染时立即调用 handler。
• deep： 如果为 true，则监视对象属性的深度更改。

computed

语法：

computed: {
  // 返回 getter 函数的属性
  someComputedProperty: {
    get() { return ... },
    // 可选 setter
    set(newValue) { ... }
  }
  // 返回函数直接结果的属性
  someOtherComputedProperty() { return ... }
}

功能：

• computed 属性是派生属性，从其他响应式数据中计算得出。
• 当计算所需的数据发生更改时，computed 属性将重新计算。
• 每次访问时都会重新计算 computed 属性，从而确保始终是最新的。

区别

1. 触发机制：

• watch 响应数据属性的变化。
• computed 响应 getter 函数中使用的依赖项的变化。

2. 计算频率：

• watch 仅在监听的属性更改时触发。
• computed 在每次访问时都会重新计算。

3. 性能开销：

• watch 的性能开销更高，因为它需要在每次数据更改时运行 handler。
• computed 的性能开销较低，因为它仅在需要时才会重新计算。

选择指南

以下是选择使用 watch 还是 computed 的一些准则：

• 使用 watch：
  • 当需要在数据更改时执行特定操作时。
  • 当需要深度监视对象属性时。
  • 当需要在首次渲染时立即执行操作时。
• 使用 computed：
  • 当需要派生属性时。
  • 当计算涉及多个响应式属性时。
  • 当需要确保计算属性始终是最新的时。
  • 当性能至关重要时。

示例

watch：

watch: {
  count: {
    handler(newValue) {
      if (newValue % 2 === 0) {
        // 当计数为偶数时执行某些操作
      }
    }
  }
}

computed：

computed: {
  squaredCount() {
    return this.count * this.count;
  }
}

结论

watch 和 computed 是 Vue.js 中用于响应式数据的强大工具。通过理解它们的差异，您可以做出明智的选择，以优化应用程序的性能和可维护性。根据您的具体需求，选择适当的特性将有助于您构建高效且可响应的 Vue.js 应用程序。