记录 Computed 源码分析

2023-11-05 02:05:15

Computed 源码分析

在 Vue 中，Computed 是一个计算属性，用于根据其他属性的值计算出一个新的属性。它是一个非常强大的特性，可以帮助我们保持代码的整洁和可维护性。

Computed 的实现原理并不复杂，但它涉及到 Vue 内部的一些核心机制，比如响应式系统和依赖收集。为了更好地理解 Computed 的工作原理，我们从源代码的角度进行分析。

Computed 的定义

Computed 属性的定义与普通属性非常相似，只是在属性名之前加上 computed 。例如：

computed: {
  fullName() {
    return this.firstName + ' ' + this.lastName
  }
}

在上面的例子中，我们定义了一个名为 fullName 的 Computed 属性，它的值是 firstName 和 lastName 的拼接结果。

依赖收集

当一个 Computed 属性被访问时，Vue 会自动收集它所依赖的属性。例如，在上面的例子中，fullName 依赖于 firstName 和 lastName。当 firstName 或 lastName 的值发生变化时，fullName 的值也会自动更新。

依赖收集的过程是在 Computed 属性的 getter 函数中完成的。在 getter 函数中，Vue 会使用 Dep.target 来收集当前正在被访问的属性。当一个属性被访问时，Vue 会将 Dep.target 设置为该属性对应的 Dep 实例。这样，当该属性的值发生变化时，Dep 实例就会通知所有依赖于它的 Computed 属性，让它们更新自己的值。

渲染 Watcher

当一个 Computed 属性的值发生变化时，Vue 会创建一个新的渲染 Watcher 来更新视图。渲染 Watcher 会监听 Computed 属性的值，当它的值发生变化时，渲染 Watcher 会重新渲染受影响的组件。

渲染 Watcher 的创建过程是在 computedWatcherOptions 函数中完成的。在 computedWatcherOptions 函数中，Vue 会创建一个新的 Watcher 实例，并将其添加到 renderWatcher 数组中。renderWatcher 数组中的 Watcher 实例会在每次组件更新时被调用，以便更新视图。