Alien Signals 技术分析之计算属性 (Computed)(二)

输出:

计算属性已创建，但尚未读取。
正在计算全名...
第一次读取: 王五
第二次读取: 王五

解释:

• 当我们第一次调用 fullName() 时，计算属性发现自己需要计算值（它是“惰性”的），于是执行了我们提供的计算函数 () => firstName() + lastName()。控制台打印 "正在计算全名..."，并返回结果 "王五"。
• 当我们第二次调用 fullName() 时，计算属性发现它的依赖项 (firstName 和 lastName) 从上次计算到现在并没有改变。因此，它直接返回了缓存中的值 "王五"，而没有再次执行计算函数（注意控制台没有再次打印 "正在计算全名..."）。这就是缓存特性。

3. 依赖项变化时的自动更新

计算属性的真正魔力在于，当它的依赖项（那些在计算函数中被读取的信号）发生变化时，它会自动感知到，并在下次被读取时重新计算。

输出:

// ...之前的输出...
准备更新 firstName...
firstName 已更新，但 fullName 尚未被读取，所以没有重新计算。
正在计算全名... // 注意：这次重新计算了！
更新后读取: 赵五
再次读取（缓存）: 赵五

解释:

• 当我们执行 firstName("赵") 时，firstName 这个信号 (Signal) 的值改变了。master 的响应式系统内部会知道 fullName 计算属性依赖于 firstName。因此，系统会将 fullName 标记为“脏 (dirty)”状态，表示它缓存的值可能已经过时了。但此时计算不会立即发生。
• 直到我们下一次调用 fullName() 读取它的值时，计算属性检查到自己是“脏”状态，于是重新执行计算函数 () => firstName() + lastName()。这时 firstName() 返回 "赵"，lastName() 返回 "五"，所以计算结果是 "赵五"。控制台打印 "正在计算全名..."。
• 计算完成后，fullName 会缓存新的结果 "赵五"，并清除“脏”标记。
• 之后再次调用 fullName() 时，由于依赖项没有再变，它又会从缓存中返回 "赵五"，不再重新计算。

总结一下：

computed(getterFn) 返回一个函数 c。

• 调用 c()：读取计算属性的值。
• • 如果依赖项自上次读取后没有变化，直接返回缓存的值。
  • 如果依赖项变化了（计算属性被标记为“脏”），则执行 getterFn 重新计算，缓存新值，然后返回新值。

计算属性就像一个聪明的缓存层，它只在必要时才进行计算，确保了性能和数据的一致性。

计算属性的内部机制（初步了解）

理解计算属性如何在幕后工作，有助于我们更好地利用它。

创建时发生了什么？ (computed 函数)

当你调用 computed(getterFn) 时：

1. 内部会创建一个计算属性对象 (Computed Object)。这个对象需要存储：
2. • getter: 你传入的计算函数。
   • currentValue: 用来缓存上一次计算的结果，初始可以是 undefined。
   • flags: 一些状态标记，比如标记自己是不是计算属性 (SubscriberFlags.Computed)，以及是否“脏” (SubscriberFlags.Dirty)。初始时通常标记为“脏”，因为还没有计算过。
   • deps: 一个列表（链表），用来记录这个计算属性依赖于哪些信号或计算属性（它的“原料”）。初始为空。
   • subs: 一个列表（链表），用来记录哪些其他计算属性或副作用依赖于这个计算属性（谁把它当作“原料”）。初始为空。
2. computed 函数会返回一个特殊的函数，我们称之为 getter 函数 (Computed Getter)。这个函数绑定 (bind) 了刚才创建的计算属性对象。

读取时发生了什么？ (computedGetter 函数)

当你调用 theComputed() 来读取值时，执行的是 computedGetter 函数：

1. 检查状态: 函数首先检查计算属性对象的 flags 是否包含 Dirty（脏）或 PendingComputed（依赖的计算属性可能脏了，需要检查）标记。
2. 如果“脏”或“待检查”:
3. • 调用响应式系统核心的 processComputedUpdate(this, flags) 函数来处理更新（this 指向计算属性对象）。
   • 在 processComputedUpdate 内部（或者它调用的 updateComputed）：
   • • 开始追踪: 调用 startTracking(this)。这会设置一个全局变量 activeSub = this，表示“接下来读取的任何信号，都要把 this (当前计算属性) 记录为它们的订阅者”。同时，它会准备清空旧的依赖列表 (deps)。
     • 执行 Getter: 调用用户提供的 this.getter() 函数。
     • 依赖收集: 在 getter 函数执行期间，如果它读取了某个信号 (Signal)（比如 firstName()），信号的读取逻辑（我们在上一章讲过）会检测到 activeSub（即当前计算属性），并调用 link(signalObject, this)，将当前计算属性添加到信号的订阅者列表 (subs) 中，同时也将信号添加到当前计算属性的依赖列表 (deps) 中。这样就建立了双向链接。
     • 结束追踪: 调用 endTracking(this)。这会清除不再被读取的旧依赖，并将全局 activeSub 恢复原状。
     • 缓存结果: 比较新计算出的值和 this.currentValue。如果不同，更新 this.currentValue，并标记更新成功。
     • 清除标记: 清除 Dirty 和 PendingComputed 标记。
     • 传播变化 (如果值改变了): 如果计算结果确实改变了，并且有其他订阅者 (this.subs 不为空) 依赖于这个计算属性，会调用 propagate(this.subs) 来通知下游的订阅者它们也需要更新（将它们标记为 Dirty 或 PendingComputed）。
3. 如果不“脏”: 直接跳过计算步骤。
4. 建立上游依赖: 检查当前是否还有更高层的 activeSub（比如这个计算属性是在另一个计算属性或副作用 (Effect) 中被读取的）。如果有，则调用 link(this, activeSub)，将这个计算属性本身也链接到那个更高层的订阅者上。
5. 返回结果: 返回缓存的 this.currentValue。

依赖项变化时发生了什么？

当计算属性依赖的某个信号 (Signal)（比如 firstName）的值发生变化时：

1. 信号的写入逻辑 (signalGetterSetter 带参数调用) 会执行。
2. 它会检查自己的订阅者列表 (subs)。因为在 fullName 第一次计算时，firstName 通过 link 函数把 fullName 加入了自己的 subs 列表。
3. 信号会调用 propagate(this.subs) 来通知它的所有订阅者。
4. propagate 函数会遍历订阅者列表，找到 fullName 这个计算属性对象。
5. 它会给 fullName 对象添加 Dirty 标记 (flags |= SubscriberFlags.Dirty)。如果 fullName 又被其他计算属性或副作用依赖，propagate 还会继续递归地通知下去（可能会标记为 PendingComputed 或 PendingEffect）。

这样，当依赖项变化时，计算属性就被标记为“脏”，但实际的重新计算被推迟到下一次读取时进行。

简单流程图

让我们用一个图来梳理一下计算属性首次读取和依赖更新的流程：

关键点：

• 计算属性是惰性的，只在被读取且“脏”时才计算。
• 计算过程中会自动收集依赖 (依赖追踪与链接 (Tracking & Linking))。
• 结果会被缓存，依赖不变时直接返回缓存。
• 依赖项变化时，计算属性会被标记为“脏”，由响应式系统核心 (Reactive System Core) 通过 propagate 机制通知。

总结

在本章中，我们深入探讨了计算属性 (Computed)：

• 计算属性用于创建派生值，其结果依赖于一个或多个其他响应式源（如信号 (Signal)）。
• 使用 computed(getterFn) 创建计算属性，它返回一个只读的 getter 函数。
• 计算属性具有惰性求值和缓存特性，只有在其依赖项变化且其值被请求时才会重新计算，否则返回缓存结果。
• 这使得我们能够以声明式的方式定义数据之间的依赖关系，系统会自动、高效地维护数据一致性。
• 内部机制依赖于依赖追踪与链接 (Tracking & Linking) 和响应式系统核心 (Reactive System Core) 的状态标记（如 Dirty）和传播机制 (propagate)。

计算属性是构建复杂响应式应用的重要工具，它让处理衍生数据变得简单而高效。

下一步

我们现在知道了如何用信号存储基本状态，以及如何用计算属性派生出新的状态。但是，响应式系统的最终目的通常是让数据变化能够驱动某些行为，比如更新用户界面、向服务器发送请求、或者打印日志等。这些由响应式数据变化触发的“动作”或“行为”，就是我们下一章要学习的概念。