Vue 2 源码探究：深入解析 computed 和 watch 的实现机制

在 Vue 2 中掌握响应式数据：揭秘 computed 和 watch 的奥秘

了解响应式数据

在现代前端开发中，响应式数据是实现 UI 与数据的双向绑定，从而确保 UI 始终保持最新状态的关键。在 Vue 2 这个强大的 JavaScript 框架中，computed 和 watch 是实现响应式数据更新的两大重要手段。

computed：计算属性的魅力

computed 是一个计算属性，它依赖于其他属性的值进行计算。当这些依赖属性发生变化时，computed 属性会自动更新其值。这是通过在 Vue 实例中定义一个 computed 属性来实现的。我们可以直接返回一个计算函数，或者使用一个对象来定义 get 方法，它充当计算函数。

// 直接返回计算函数
computed: {
  fullName() {
    return `${this.firstName} ${this.lastName}`;
  }
}

// 使用对象形式
computed: {
  fullName: {
    get() {
      return `${this.firstName} ${this.lastName}`;
    }
  }
}

watch：侦听属性变化的哨兵

watch 是一个侦听器，它监视特定属性的值。当被侦听的属性值发生变化时，watch 会触发一个回调函数。我们可以在 Vue 实例中使用 watch 对象来定义 watch。我们可以直接传递一个回调函数，或者使用一个对象形式，它包括回调函数和一个可选的选项对象。

// 直接传递回调函数
watch: {
  firstName(val, oldVal) {
    console.log(`First name changed from ${oldVal} to ${val}`);
  }
}

// 使用对象形式
watch: {
  firstName: {
    handler(val, oldVal) {
      console.log(`First name changed from ${oldVal} to ${val}`);
    },
    deep: true
  }
}

computed 与 watch 的异同

虽然 computed 和 watch 都可以实现响应式数据更新，但它们在本质上有以下异同：

相同点：

• 都可以通过在 Vue 实例中定义属性的方式来使用
• 都可以依赖于其他属性的值
• 当依赖属性发生变化时，都会自动更新

不同点：

• computed 是一个计算属性，它的值是通过计算得到的，而 watch 是一个侦听器，它只是在依赖属性发生变化时执行指定的回调函数
• computed 的值可以被其他属性依赖，而 watch 的回调函数不能被其他属性依赖
• computed 的值是缓存的，只有在依赖属性发生变化时才会重新计算，而 watch 的回调函数每次都会执行

最佳实践：明智选择

为了更有效地使用 computed 和 watch，我们可以遵循以下最佳实践：

• 使用 computed 来计算不会经常发生变化的值
• 使用 watch 来侦听经常发生变化的值
• 避免在 computed 中执行复杂的计算
• 避免在 watch 的回调函数中执行复杂的逻辑
• 尽量减少 computed 和 watch 的数量

通过遵循这些最佳实践，我们可以优化 Vue 应用程序的性能和可维护性。

常见问题解答

Q1：computed 和 watch 之间有什么最基本的差异？

A1：computed 计算值，watch 侦听变化。

Q2：computed 的值可以被依赖吗？

A2：是的，computed 的值可以被其他属性依赖，而 watch 的回调函数则不能。

Q3：computed 值是何时计算的？

A3：computed 值仅在依赖属性发生变化时才计算。

Q4：watch 回调函数何时执行？

A4：watch 回调函数在每次被侦听的属性值发生变化时都会执行。

Q5：如何减少 computed 和 watch 的数量？

A5：使用 template refs 或 Vuex 管理状态以减少冗余响应式属性的使用。