Vue 3.6 Alien Signals 深度解析：信号驱动的响应式革命

// 传统 Push-only 模型的问题
const a = ref(1);
const b = computed(() => a.value > 0); // 布尔值
const c = computed(() => (b.value ? "yes" : "no"));

a.value = 2; // a 从 1 变成 2
// Push-only: a→b→c 都会重新计算
// 但实际上 b 的值没变（还是 true），c 不需要更新！

// Alien Signals 的优势
a.value = 2; // a 从 1 变成 2
// 1. PUSH: 标记 b 为 dirty
// 2. PULL: 访问 c 时，先检查 b
//    - b 重新计算：(2 > 0) = true
//    - 但 b 的新值等于旧值！
// 3. c 不会被通知更新（值相等性检查）

// 响应式节点接口 - 所有响应式对象的基础
export interface ReactiveNode {
  deps?: Link; // 依赖链表头
  depsTail?: Link; // 依赖链表尾
  subs?: Link; // 订阅者链表头
  subsTail?: Link; // 订阅者链表尾
  flags: ReactiveFlags; // 状态标记
}

// 链接节点 - 双向链表的核心
export interface Link {
  version: number; // 版本号
  dep: ReactiveNode | Computed | Effect | EffectScope; // 依赖
  sub: ReactiveNode | Computed | Effect | EffectScope; // 订阅者
  prevSub: Link | undefined; // 前一个订阅者
  nextSub: Link | undefined; // 后一个订阅者
  prevDep: Link | undefined; // 前一个依赖
  nextDep: Link | undefined; // 后一个依赖
}

export function link(dep: ReactiveNode, sub: ReactiveNode): void {
  const prevDep = sub.depsTail;

  // 快速路径：如果上一个依赖就是当前依赖，跳过
  if (prevDep !== undefined && prevDep.dep === dep) {
    return;
  }

  // 检查是否已经存在链接
  const nextDep = prevDep !== undefined ? prevDep.nextDep : sub.deps;
  if (nextDep !== undefined && nextDep.dep === dep) {
    nextDep.version = globalVersion;
    sub.depsTail = nextDep;
    return;
  }

  // 创建新的链接节点
  const newLink =
    (sub.depsTail =
    dep.subsTail =
      {
        version: globalVersion,
        dep,
        sub,
        prevDep,
        nextDep,
        prevSub: dep.subsTail,
        nextSub: undefined,
      });

  // 更新双向链表指针
  if (nextDep !== undefined) {
    nextDep.prevDep = newLink;
  }
  if (prevDep !== undefined) {
    prevDep.nextDep = newLink;
  } else {
    sub.deps = newLink;
  }
  // ... 更多链表操作
}

export function propagate(link: Link): void {
  let next = link.nextSub;
  let stack: Stack<Link | undefined> | undefined;

  top: do {
    const sub = link.sub;
    let flags = sub.flags;

    // 检查是否需要传播
    if (flags & (ReactiveFlags.Mutable | ReactiveFlags.Watching)) {
      // 标记为 Pending（可能需要更新）
      if (
        !(flags & (ReactiveFlags.RecursedCheck | ReactiveFlags.Recursed | ReactiveFlags.Dirty | ReactiveFlags.Pending))
      ) {
        sub.flags = flags | ReactiveFlags.Pending;
      }
      // ...

      // 如果是 effect，加入通知缓冲区
      if (flags & ReactiveFlags.Watching) {
        notifyBuffer[notifyBufferLength++] = sub as Effect;
      }

      // 如果是 computed，继续向下传播
      if (flags & ReactiveFlags.Mutable) {
        const subSubs = sub.subs;
        if (subSubs !== undefined) {
          link = subSubs;
          if (subSubs.nextSub !== undefined) {
            stack = { value: next, prev: stack };
            next = link.nextSub;
          }
          continue;
        }
      }
    }
    // ... 栈处理逻辑
  } while (true);
}

export function checkDirty(link: Link, sub: ReactiveNode): boolean {
  let stack: Stack<Link> | undefined;
  let checkDepth = 0;

  top: do {
    const dep = link.dep;
    const depFlags = dep.flags;
    let dirty = false;

    // 如果已经是 Dirty，直接返回 true
    if (sub.flags & ReactiveFlags.Dirty) {
      dirty = true;
    }
    // 如果依赖是 computed 且是 Dirty，需要更新
    else if (
      (depFlags & (ReactiveFlags.Mutable | ReactiveFlags.Dirty)) ===
      (ReactiveFlags.Mutable | ReactiveFlags.Dirty)
    ) {
      if ((dep as Computed).update()) {
        // computed 更新后，传播给其他订阅者
        const subs = dep.subs!;
        if (subs.nextSub !== undefined) {
          shallowPropagate(subs);
        }
        dirty = true;
      }
    }
    // 如果是 Pending，需要递归检查
    else if (
      (depFlags & (ReactiveFlags.Mutable | ReactiveFlags.Pending)) ===
      (ReactiveFlags.Mutable | ReactiveFlags.Pending)
    ) {
      // 递归检查依赖的依赖
      stack = { value: link, prev: stack };
      link = dep.deps!;
      sub = dep;
      ++checkDepth;
      continue;
    }

    // ... 更多检查逻辑
  } while (true);
}

export class ReactiveEffect<T = any> implements ReactiveEffectOptions, ReactiveNode {
  deps: Link | undefined = undefined;
  depsTail: Link | undefined = undefined;
  subs: Link | undefined = undefined;
  subsTail: Link | undefined = undefined;
  flags: number = ReactiveFlags.Watching | ReactiveFlags.Dirty;

  // 运行 effect
  run(): T {
    if (!this.active) {
      return this.fn();
    }
    cleanup(this);
    const prevSub = startTracking(this);
    try {
      return this.fn();
    } finally {
      endTracking(this, prevSub);
      // 处理递归调用
      const flags = this.flags;
      if (
        (flags & (ReactiveFlags.Recursed | EffectFlags.ALLOW_RECURSE)) ===
        (ReactiveFlags.Recursed | EffectFlags.ALLOW_RECURSE)
      ) {
        this.flags = flags & ~ReactiveFlags.Recursed;
        this.notify();
      }
    }
  }

  // 检查是否脏
  get dirty(): boolean {
    const flags = this.flags;
    if (flags & ReactiveFlags.Dirty) {
      return true;
    }
    if (flags & ReactiveFlags.Pending) {
      if (checkDirty(this.deps!, this)) {
        this.flags = flags | ReactiveFlags.Dirty;
        return true;
      } else {
        this.flags = flags & ~ReactiveFlags.Pending;
      }
    }
    return false;
  }
}

// 测试场景：大量 computed 依赖同一个 signal

const source = signal(0);

// 创建 1000 个 computed
const computeds = Array.from({ length: 1000 }, (_, i) => computed(() => source() + i));

// 创建 1000 个 effect
computeds.forEach(c => {
  effect(() => c());
});

// 更新 source
console.time("update");
source(1);
console.timeEnd("update");

// Vue 3.5: ~15ms
// Vue 3.6 (Alien Signals): ~0.5ms
// 提升约 30 倍！

// 务必为关键逻辑添加测试
describe("Alien Signals Migration", () => {
  it("should handle edge cases in reactivity", () => {
    const a = signal(null);
    const b = computed(() => a()?.value);

    expect(b()).toBe(undefined);

    a({ value: 42 });
    expect(b()).toBe(42);
  });
});