深入剖析 Vue3 computed 的幕后运作

2023-11-10 02:55:52

Vue3 computed 流程分析

在 Vue3 中，computed 属性是一种衍生属性，它允许您声明一个计算值，该值依赖于其他响应式属性。当这些依赖项发生变化时，computed 属性会自动重新计算并更新其值。这使得 computed 属性成为构建响应式应用程序的强大工具，因为它可以避免您在组件中重复计算相同的值。

computed 属性的内部运作机制涉及几个关键步骤：

初始化： 当一个 computed 属性被创建时，它会立即执行其 getter 函数，并将结果缓存起来。getter 函数是一个纯函数，它接收所有依赖项的当前值并返回 computed 属性的值。
依赖收集： 在 getter 函数执行期间，Vue3 会自动收集所有被访问的响应式属性。这些属性被称为 computed 属性的依赖项。当依赖项发生变化时，Vue3 会将 computed 属性标记为需要更新。
更新队列： 当一个 computed 属性被标记为需要更新时，它会被添加到一个更新队列中。更新队列是一个内部数据结构，它用于跟踪所有需要更新的 computed 属性。
更新： 当更新队列被刷新时，Vue3 会依次更新所有需要更新的 computed 属性。这涉及重新执行 getter 函数并更新缓存的值。
缓存： Vue3 会对 computed 属性的值进行缓存。这意味着，只要依赖项没有发生变化，computed 属性的值就不会被重新计算。这可以显著提高应用程序的性能，因为它避免了不必要的计算。

computed 属性具有以下优势：

computed 属性和 watch 属性有什么区别？
- computed 属性是衍生属性，它依赖于其他响应式属性。当这些依赖项发生变化时，computed 属性会自动重新计算并更新其值。
- watch 属性是监视器属性，它允许您监视一个响应式属性的变化。当被监视的属性发生变化时，watch 属性会执行一个指定的回调函数。
computed 属性可以异步吗？
- 是的，computed 属性可以是异步的。您可以使用 async 和 await 来编写异步的 getter 函数。
computed 属性可以被修改吗？
- 是的，computed 属性可以通过 setter 函数进行修改。但是，setter 函数只能在 computed 属性被声明时定义。