揭秘 Vue 源码：Computed 和 Watch 的原理与区别

前端

2023-11-16 11:13:37

Computed 和 Watch：揭开 Vue.js 响应式数据的奥秘

在 Vue.js 的世界中，Computed 和 Watch 是两个至关重要的特性，它们协同工作，让你可以轻松管理响应式数据的变化并计算派生数据。如果你想打造响应迅速、易于维护的应用程序，那么理解这两个特性至关重要。

Computed：派生数据的利器

Computed 是一种计算属性，让你可以基于其他属性声明一个派生属性。当这些其他属性发生变化时，Computed 属性会自动更新其值。这让你可以避免在模板中重复计算复杂的表达式，保持代码简洁性和可维护性。

想象一下一个计算器应用程序。你想显示计算器的结果，但结果取决于两个输入字段的值。你可以使用 Computed 属性来计算结果，而不是在模板中重复复杂的数学计算。这样，每当输入字段的值发生变化时，结果就会自动更新。

Watch：监视数据变化的哨兵

Watch 则是一种监视器，让你可以监听一个或多个属性的变化，并在变化发生时执行指定的回调函数。这使你能够在数据变化时触发相应的动作，例如更新 UI、发送网络请求或执行其他业务逻辑。

比如，在表单验证中，你可以使用 Watch 来监听表单输入字段的变化。当用户输入无效的数据时，Watch 可以触发一个回调函数，显示错误消息。这样，用户就可以在提交表单之前纠正错误。

Computed 与 Watch：殊途同归，各司其职

虽然 Computed 和 Watch 都用于响应数据变化，但它们在功能、依赖关系、触发时机和性能优化方面存在一些关键的区别：

功能差异： Computed 属性计算派生数据，而 Watch 监听数据变化并执行回调函数。

依赖关系： Computed 属性依赖于其他属性，而 Watch 可以监听任何属性或表达式的变化。

触发时机： Computed 属性在依赖属性发生变化时重新计算，而 Watch 在被监听的属性发生变化时触发回调函数。

性能优化： Computed 属性具有惰性求值机制，只有在被访问时才会计算，而 Watch 在每次被监听的属性发生变化时都会触发回调函数，性能开销可能更大。

应用场景：挖掘 Computed 和 Watch 的潜能

掌握了 Computed 和 Watch 的原理和区别后，你就可以将它们运用到实际项目中，打造响应式、高效的应用程序。这里有一些应用场景供你参考：

使用 Computed 属性来计算复杂的数据，避免在模板中重复计算。
使用 Computed 属性来格式化数据，使其更适合在模板中显示。
使用 Watch 来监听表单输入的变化，并根据输入值更新应用程序的状态。
使用 Watch 来监听网络请求的状态，并在请求完成或失败时执行相应的动作。

代码示例

下面是一个使用 Computed 属性和 Watch 的代码示例：

<template>
  <div>
    <input v-model="firstName">
    <input v-model="lastName">
    <p>Full name: {{ fullName }}</p>
  </div>
</template>

<script>
export default {
  computed: {
    fullName() {
      return `${this.firstName} ${this.lastName}`;
    }
  },
  watch: {
    firstName(newValue, oldValue) {
      console.log(`First name changed from ${oldValue} to ${newValue}`);
    }
  }
};
</script>