Vue 源码分析：深入剖析 computed 和 watch
2023-11-28 04:42:26
引言
在 Vue.js 响应式框架中，computed 和 watch 是两个重要的概念，它们共同构建了 Vue 的响应式系统。computed 属性提供了一个计算属性，该属性依赖于其他响应式数据，而 watch 则允许您在响应式数据发生变化时执行回调函数。
computed 属性
computed 属性是基于其他响应式数据的计算属性。它们通过 computed 选项定义，如下所示：
computed: {
fullName() {
return this.firstName + ' ' + this.lastName;
}
}
在上面的示例中，fullName 是一个 computed 属性，它依赖于 firstName 和 lastName 数据属性。当 firstName 或 lastName 发生变化时，fullName 将自动更新。
computed 的内部机制
computed 属性的内部机制基于响应式追踪和依赖收集。当一个 computed 属性被访问时，Vue 会执行以下步骤：
- 追踪依赖项： Vue 将跟踪
computed属性所依赖的所有响应式数据。 - 创建 getter 函数： Vue 创建一个 getter 函数来计算
computed属性的值。 - 收集依赖项： getter 函数在执行时会收集它所访问的所有响应式数据的依赖项。
- 缓存结果： getter 函数的结果被缓存，以便在后续访问时可以重用。
watch API
watch API 允许您在响应式数据发生变化时执行回调函数。它通过 watch 选项定义，如下所示：
watch: {
firstName(newValue, oldValue) {
console.log('First name changed from ' + oldValue + ' to ' + newValue);
}
}
在上面的示例中，当 firstName 数据属性发生变化时，将调用 firstName 观察者函数。它将收到新旧值的两个参数。
watch 的内部机制
watch API 的内部机制基于依赖性收集和调度。当一个 watch 观察者被添加时，Vue 会执行以下步骤：
- 收集依赖项： Vue 将收集观察者回调函数中所访问的所有响应式数据的依赖项。
- 创建调度函数： Vue 创建一个调度函数来调用观察者回调函数。
- 缓存依赖项： 观察者回调函数的依赖项被缓存，以便在后续执行时可以重用。
- 调度更新： 当观察者所依赖的任何数据发生变化时，调度函数将被调用，从而执行观察者回调函数。
使用 computed 和 watch
computed 和 watch 是 Vue 中强大的工具，可用于实现各种响应式行为。以下是它们的典型用例：
- computed： 用于计算派生数据，例如用户全名或购物车总价。
- watch： 用于在数据发生变化时执行副作用，例如更新 UI 组件或发出 HTTP 请求。
性能优化
为了优化 computed 和 watch 的性能，可以遵循以下最佳实践：
- 仅在需要时使用 computed： 避免创建不必要的
computed属性，因为它们会增加内存开销和计算成本。 - 使用缓存： 尽可能使用缓存机制来减少重复计算。
- 使用 watch 延迟器： 对于需要执行耗时的操作的观察者，可以使用
watch延迟器来推迟执行，从而提高性能。
结论
computed 和 watch 是 Vue.js 中响应式系统的重要组成部分，允许您轻松管理和响应响应式数据。通过了解它们的内部机制和最佳实践，您可以有效地使用这些特性来构建健壮且高效的 Vue 应用程序。
