Vue 原理：揭开 Computed 神秘面纱
2023-10-29 06:27:58
在 Vue 的响应式系统中，Computed 属性扮演着重要的角色，它可以帮助我们计算出一些依赖于其他属性的值，并且当这些依赖项发生变化时，Computed 属性也会自动更新。本篇文章，我们将从源码的角度来探索 Computed 的工作原理，看看它是如何保存设置的 getter，如何触发依赖收集，以及如何优化渲染性能的。
1. Computed 的基本原理
Computed 属性本质上是一个函数，它可以接收其他属性作为参数，并返回一个计算后的值。当 Computed 属性的依赖项发生变化时，它会自动重新计算并更新其值。
在 Vue 的源码中，Computed 属性被定义为一个类，它继承自 Dep（依赖收集器）。Dep 类负责收集 Computed 属性的依赖项，并在这些依赖项发生变化时通知 Computed 属性重新计算。
2. Computed 的 Setter 和 Getter
Computed 属性的 Setter 和 Getter 分别负责设置和获取 Computed 属性的值。
Setter 的作用是将 Computed 属性的 getter 函数保存起来，以便在依赖项发生变化时重新计算。Getter 的作用是调用 Computed 属性的 getter 函数，并返回计算后的值。
3. 依赖收集
当 Computed 属性被创建时，它的 getter 函数会立即执行，此时会触发依赖收集。依赖收集的过程如下：
- getter 函数会遍历 Computed 属性的依赖项，并为每个依赖项创建一个 Watcher（观察者）。
- Watcher 会将 Computed 属性添加到自己的依赖项列表中，并把自己添加到 Computed 属性的依赖者列表中。
- 当依赖项发生变化时，Watcher 会通知 Computed 属性重新计算。
4. 优化渲染性能
为了优化渲染性能，Vue 使用了缓存机制来保存 Computed 属性的计算结果。当 Computed 属性的依赖项发生变化时，Vue 只会重新计算受影响的 Computed 属性，而不会重新计算所有 Computed 属性。
缓存机制的实现原理如下：
- 当 Computed 属性被创建时，Vue 会创建一个缓存对象来保存 Computed 属性的计算结果。
- 当 Computed 属性的依赖项发生变化时，Vue 会检查缓存对象中是否已经存在该 Computed 属性的计算结果。如果存在，则直接返回缓存结果，否则重新计算并更新缓存结果。
5. 总结
Computed 属性是 Vue 中一个非常有用的特性，它可以帮助我们计算出一些依赖于其他属性的值，并且当这些依赖项发生变化时，Computed 属性也会自动更新。通过理解 Computed 属性的工作原理，我们可以更好地利用它来构建响应式的 Vue 应用。
