从零到一打造 Vue3 响应式系统 Day 11 - Effect：Link 节点的复用实现

昨天我们发现了 Effect 的问题：当 effect 被重复触发时，它会不断地重新收集依赖，导致依赖链表指数级增长。

要让 effect 记住它"订阅过谁"，最直接的方法就是让它自己也持有一个引用列表。因此，我们分为两大步来解决：

建立反向依赖链表 ：创建一个新的链表，让 effect 知道自己已经订阅过哪些 ref。只要 effect 知道自己订阅过哪些依赖，就可以避免新增多余的链表节点，从而形成一个双向的追踪关系。
实现节点复用机制：下次再次触发更新时，就可以借由查找已订阅的依赖来进行判断。如果第一次执行时已经收集过依赖，就复用之前的链表节点，不再创建新的节点；如果之前没有收集过，就创建一个全新的链表节点。

关键要素就是：

需要创建一个新的链表让 effect 记录曾经收集过的依赖，这个链表我们称之为 deps。
需要一个方法来判断 effect 是否正在重新执行依赖收集。

初始化页面

在之前的步骤中，刚进入页面时，effect 收集依赖，ref 的头节点 subs 以及尾节点 subsTail 指向 link，link 的 sub 指向 effect。

步骤一：建立反向依赖链表

我们现在要做的是，在我们现有的 Ref -> Link -> Effect 关系上，新增一条从 Effect 出发的反向依赖链接。

之前提到过一个链表的必要元素分别是：

头节点
尾节点
彼此建立的关联

如上图，目前页面上只有一个依赖 flag.value。我们可以让 effect 上的链表的头节点 deps 和尾节点 depsTail 指向 link，同时 link 内部的 dep 指向该依赖 (ref)。这样，我们就可以通过关系链找到 effect 订阅过的所有依赖。

因此我们可以明确三个关键的角色。

三个关键角色

Effect

effect.deps 链表：通过 link，记录该 effect 依赖了哪些 ref。
effect.depsTail：记录链表尾部，以便可以快速增加新的链表节点。

Ref(flag)

flag.subs 链表：通过 link，记录有哪些 effect 订阅了此 ref。
flag.subsTail：记录链表尾部，以便可以快速增加新的链表节点。

Link：双向桥梁节点

Link 是连接 Effect 和 Ref 的桥梁，它同时存在于两个链表中。

核心属性：

link.sub：指向发起的订阅者 (effect)。
link.dep：指向被订阅的 ref。

在 Effect 链表中的位置：

link.nextDep/prevDep：指向 effect.deps 链表的下/上一个节点。

在 Ref 链表中的位置：

link.nextSub/prevSub：指向 ref.subs 链表的下/上一个节点。

通过上面的方法，我们可以知道三件事：

双向查询 ：通过 Link 可以同时找到 effect 和 ref。
双链表成员 ：Link 同时是两个链表的成员。
- 是 effect.deps 链表的一个节点。
- 是 ref.subs 链表的一个节点。
关系管理 ：一个 Link 代表一个订阅关系。

首先我们更新 effect.ts 和 system.ts 来实现这个新的数据结构。

定义类型

`effect.ts`

TypeScript

arduino 复制代码

export class ReactiveEffect { 
  // 依赖项链表的头节点，指向 link
  deps: Link
  // 依赖项链表的尾节点，指向 link
  depsTail: Link
  
  //...
}

`system.ts`

TypeScript

typescript 复制代码

//system.ts

/**
 * 依赖项 (如 ref)
 */
interface Dep {
  // 订阅者链表头节点
  subs: Link | undefined
  // 订阅者链表尾节点
  subsTail: Link | undefined
}
/**
 * 订阅者 (如 effect)
 */
interface Sub {
  // 依赖项链表头节点
  deps: Link | undefined
  // 依赖项链表尾节点
  depsTail: Link | undefined
}

export interface Link {
  // 订阅者
  sub: Sub
  // 下一个订阅者节点
  nextSub: Link
  // 上一个订阅者节点
  prevSub: Link
  // 依赖项
  dep: Dep

  // 下一个依赖项节点
  nextDep: Link | undefined
}

增加 link 判断

接着，修改 link 函数，在创建节点时，也将其加入 sub 的 deps 链表。

TypeScript

perl 复制代码

//system.ts
export function link(dep, sub){
    const newLink: Link = {
      sub,
      dep, // 加上依赖项
      nextDep: undefined,
      nextSub: undefined,
      prevSub: undefined
    }
    // ... (加入 dep.subs 链表的逻辑保持不变)
    
    /**
     * 将链表节点跟 sub (effect) 建立关联关系
     * 1. 如果存在尾节点，表示链表中已有节点，在链表尾部新增。
     * 2. 如果不存在尾节点，表示这是第一次关联链表，第一个节点既是头节点也是尾节点。
     */
    if(sub.depsTail){
      sub.depsTail.nextDep = newLink
      sub.depsTail = newLink
    } else {
      sub.deps = newLink
      sub.depsTail = newLink
    }
}

步骤二：实现节点复用机制

每次 effect 重新执行时，如何判断是"第一次执行"还是"重新执行"？

我们可以利用 effect 上的头节点 deps 与尾节点 depsTail 来设定三种状态：

初始状态（从未执行过依赖收集） ：effect 的 deps 链表是空的，deps 和 depsTail 都是 undefined。
重新执行中（需要复用节点） ：我们将 depsTail 临时设为 undefined，但保留 deps 头节点。
执行完成（链表更新完成） ：deps 和 depsTail 都有值（指向 Link 节点）。

当 effect 开始重新执行时，我们将 depsTail 设为 undefined，但保留 deps 头节点。这样做的目的是：

标记状态 ：标记 effect 正处于"重新收集中"的状态，让 link 函数知道需要复用节点。
保留旧依赖 ：deps 链表仍然包含之前收集的所有依赖，方便我们遍历复用。
移动指针 ：depsTail 会在复用过程中，从 undefined 开始，随着遍历逐步向后移动。

所以往后我们判断是否需要复用节点的依据就是：只要 effect 存在头节点 deps，但是尾节点 depsTail 是 undefined，就表示它正在重新执行，需要复用节点。

实现 `effect.ts`

TypeScript

kotlin 复制代码

  run() {
    const prevSub = activeSub
    activeSub = this

    // 开始执行，将尾节点设为 undefined，进入"重新收集"状态
    this.depsTail = undefined
    
    try {
      return this.fn()
    } finally {
      // ...
    }
  }

实现 `system.ts`

TypeScript

javascript 复制代码

export function link(dep, sub) {

/**
 * 复用节点
 * 如果 sub.depsTail 是 undefined，并且存在 sub.deps 头节点，表示需要复用
 */
  if (sub.depsTail === undefined && sub.deps) {
    let currentDep = sub.deps
    // 遍历 effect 的旧依赖链表
    while(currentDep){
      // 如果当前遍历到的旧依赖 link 所连接的 ref，与当前要连接的 ref 相等
      if (currentDep.dep === dep) {
        // 表示之前已经收集过此依赖，直接复用
        sub.depsTail = currentDep // 移动尾节点指针，指向刚刚复用的节点
        return  // 直接返回，不再新增节点
      }
      currentDep = currentDep.nextDep
    }
  }
  
  // ... (创建新节点的逻辑)
}

完整执行流程

第一次执行

effect 初始化 ：deps = undefined, depsTail = undefined。
执行 run() ：进入 run 方法，depsTail 保持 undefined。
读取 ref.value ，调用 link()。
link() 判断 ：因为 deps 是 undefined，不满足复用条件 → 创建新的 Link1 节点。
执行结束 ：deps 指向 Link1, depsTail 也指向 Link1。

第二次执行（点击按钮）

执行前 ：deps = Link1, depsTail = Link1。
执行 run() ：进入 run 方法，depsTail 被设为 undefined，进入"重新收集"状态。
读取 ref.value ，调用 link()。
link() 判断：
- 条件满足：depsTail === undefined 且 deps 存在。
- 开始遍历 deps 链表，发现 deps (即 Link1) 的 .dep 属性就是当前的 ref。
- 复用成功！将 depsTail 重新指向 Link1，然后 return，不再创建新节点。
执行结束 ：deps 依然是 Link1, depsTail 也恢复为 Link1。

通过这个执行顺序，我们很好地解决了问题。修正代码之后，就没有指数级触发的现象了。

想了解更多 Vue 的相关知识，抖音、B站搜索我师父「远方os」，一起跟日安当同学。

从零到一打造 Vue3 响应式系统 Day 11 - Effect：Link 节点的复用实现

初始化页面

步骤一：建立反向依赖链表

三个关键角色

Effect

Ref(flag)

Link：双向桥梁节点

定义类型

effect.ts

system.ts

增加 link 判断

步骤二：实现节点复用机制

实现 effect.ts

实现 system.ts

完整执行流程

第一次执行

第二次执行（点击按钮）

`effect.ts`

`system.ts`

实现 `effect.ts`

实现 `system.ts`