Aaron 的编程小笔记

完善响应式能力

约 3273 字大约 11 分钟

2026-03-09

  1. TypeScript 改造

    用 TypeScript 来对项目整体进行规范化，把单文件实现拆成 入口、响应式核心(reactive.ts)、依赖系统(effect.ts) 三部分

    修改内容

    1. 不再使用 buckets 来表述依赖容器，而是使用 track / trigger 这两个函数，来分别处理依赖收集和触发更新的逻辑
    2. 通过 reactive 函数来创建代理对象
    reactive.ts

    整个项目使用 Rollup 进行打包

    install.sh
    pnpm add -D rollup typescript tslib @types/node @rollup/plugin-commonjs
pnpm add -D @rollup/plugin-json @rollup/plugin-node-resolve @rollup/plugin-terser
pnpm add -D rollup-plugin-clear rollup-plugin-typescript2
pnpm add -D rollup-plugin-generate-html-template

  2. 处理 target

    在 Vue 中 reactive 函数的参数是一个对象，因此需要对传入的 target 进行类型判断，确保它是一个对象

    思路

    • 封装 isObject 工具函数
    • 运行时：先用 isObject(target) 判断，如果不是对象就直接返回
    • 类型层：通过 val is Record<any, any> 这个自定义守卫，让 TypeScript 知道后面的 target 已经可以安全交给 Proxy
    代码
    reactive.ts
    import { isObject } from './utils';

export function reactive<T extends object>(target: T): T;
export function reactive<T>(target: T): T;

export function reactive(target: unknown) {
  if (!isObject(target)) {
    return target;
  }

  return new Proxy(target, {
    // ...
  });
}

  3. 处理同一个原始对象被重复代理

    这个问题会有两种情况：如果同一个原始对象被重复调用 reactive，或者把一个已经代理过的对象再次传给 reactive。而实际上它们应该是同一个响应式对象，不应该被重复代理

    思路

    • 缓存层：用 WeakMap 缓存 "原始对象 -> 代理对象" 的映射，如果同一个原始对象已经代理过，就直接返回之前的代理对象
    • 标记层：通过额外的标记位 IS_REACTIVE 判断传进来的值是不是已经是代理对象，如果已经是代理对象，就直接返回它自己 撒打算
    代码

    重要

    这里用 WeakMap 而不用 Map，是因为它的 key 只能是对象，并且当原始对象没有被其他地方引用时，可以被垃圾回收，更适合拿来做代理缓存

  4. 处理 this 指向问题

    如果对象内部存在 getter / setter，且里面用到了 this，那么这里的 this 应该指向代理对象，而不是原始对象。否则内部访问到的属性，就可能绕过代理，拿不到正确的依赖收集和触发更新能力

    思路

    需要使用 Proxy 中 get 和 set 的最后一个参数 receiver，保证 this 指向代理对象

    代码
    reactive.ts
    const proxy = new Proxy(target, {
  get: (target, key, receiver) => {
    // ...
    return Reflect.get(target, key, receiver);
  },
  set: (target, key, value, receiver) => {
    const result = Reflect.set(target, key, value, receiver);
    // ...
    return result;
  },
});

  5. 处理深层嵌套对象

    如果对象属性的值还是对象，那么只代理最外层是不够的。Proxy 的好处就是可以按需处理，而不是 defineProperty 那样一次性把所有层级都代理了

    思路

    当 get 取出的结果仍然是对象时，需要继续调用 reactive(result)，把这个返回值也转换成响应式对象

    代码
    reactive.ts
    const proxy = new Proxy(target, {
  get: (target, key, receiver) => {
    const result = Reflect.get(target, key, receiver);

    if (isObject(result)) {
      return reactive(result);
    }

    return result;
  },
});

  6. 处理 in 操作符

    该操作符用于判断某个属性是否存在，这种读取虽然不是直接取值，但它同样依赖了属性状态，所以也应该进行依赖收集。而 defineProperty 它只是对某个属性的 get / set 而无法在对象结构层面上进行拦截

    思路

    Proxy 专门提供了 has 拦截来处理 in 操作符，因此只要在 has 中调用 track(target, key)，就能把这类访问也纳入响应式系统

    代码
    reactive.ts
    const proxy = new Proxy(target, {
  has: (target, key) => {
    track(target, key);
    return Reflect.has(target, key);
  },
});

  7. 代码拆分

    随着 get、set、has 这些拦截逻辑越来越多，并且 track / trigger 也开始区分不同的操作类型，如果全部继续堆在一个文件里，代码就会越来越难维护

    思路

    把不同职责拆到不同文件里：

    • reactive.ts 负责创建代理对象、处理缓存、处理是否重复代理
    • baseHandlers.ts 负责真正的 get / set / has 拦截实现
    • operations.ts 负责统一维护依赖收集和触发更新的操作类型
    • effect.ts 负责 track / trigger 的具体实现
    代码
    reactive.ts
    import { mutableHandlers } from './baseHandlers';

export function reactive(target: unknown) {
  // ...
  return new Proxy(target, mutableHandlers);
}

    为什么要拆分不同的操作类型

    同样是依赖收集，下面几种读取其实含义不同：

    • obj.foo：普通取值，对应 GET
    • 'foo' in obj：判断属性是否存在，对应 HAS
    • for...in obj / Object.keys(obj)：依赖对象的键集合，对应 ITERATE

    触发更新也是一样，所以 Vue 才要把操作类型拆细，避免无关更新，让不同依赖能在真正相关的变更下才触发

  8. 处理迭代收集

    像 for...in、Object.keys()、Object.values() 这类操作，本质上依赖的不是某一个具体属性值，而是对象当前 "有哪些 key"。所以又是一个需要在对象结构层面上进行拦截的场景，defineProperty 自然又不适合

    思路

    迭代相关操作会触发 Proxy 的 ownKeys 拦截，只需要在 ownKeys 中调用 track()，就能把 "对象键集合" 的依赖单独收集起来

    代码
    baseHandlers.ts
    export const ITERATE_KEY = Symbol('iterate');

function ownKeys(target: object): (string | symbol)[] {
  track(target, TrackOpTypes.ITERATE, ITERATE_KEY);
  return Reflect.ownKeys(target);
}

export const mutableHandlers: ProxyHandler<object> = {
  // ...
  ownKeys,
};

    为什么要引入 ITERATE_KEY

    这里之所以要引入单独的 ITERATE_KEY，是因为迭代依赖关注的是 "整个键集合"，而不是某一个具体属性

  9. 区分新增和修改操作

    在 set 拦截里，并不是所有赋值都属于同一种更新。有些是修改已有属性，有些是给对象新增属性，这两种情况后续影响的依赖并不一样，因此需要先区分操作类型

    思路

    • 通过 hasOwnProperty 判断当前 key 是否存在于对象上，从而区分新增和修改。如果原本不存在，这次就是 ADD；如果原本已经存在，这次就是 SET
    • 对于 SET 还要额外比较新旧值是否真的发生变化。如果值没有变，就不应该继续触发更新
    • 封装 hasChanged 工具函数
    代码
    baseHandlers.ts

  10. 处理属性移除

    删除属性和新增属性一样，都会影响对象的结构。比如某个属性被删掉以后，in 判断结果会变化，迭代结果也会变化，所以这种操作也需要单独触发更新

    思路

    删除操作会触发 Proxy 的 deleteProperty 拦截，除此之外还要先判断目标对象上原本是否真的存在这个属性，再判断删除是否成功：

    • 原本不存在，就不需要触发更新
    • 原本存在且删除成功，才触发 DELETE
    代码
    baseHandlers.ts
    function deleteProperty(
  target: Record<string | symbol, unknown>,
  key: string | symbol,
): boolean {
  const hadKey = Object.prototype.hasOwnProperty.call(target, key);
  const result = Reflect.deleteProperty(target, key);

  // 存在 key 且删除成功，才触发更新
  if (hadKey && result) {
    trigger(target, TriggerOpTypes.DELETE, key);
  }

  return result;
}

  11. 对象标准行为的排除

    对象被代理以后，不只是业务代码会读取属性，一些语言层面的标准行为也会触发 get。比如访问 __proto__，或者执行 Object.prototype.toString.call(proxy) 时，内部都会读到一部分内置属性和内置 Symbol。这些读取本质上不属于业务依赖。如果也把它们收进响应式系统，就会产生很多无意义的依赖收集，甚至把对象自身的标准行为也误当成响应式数据来处理

    思路

    像 toString 这类标准行为，真正读取的往往不是字符串键本身，而是内部的 Symbol.toStringTag 这类内置 Symbol

    • 通过 getOwnPropertyNames 拿到 Symbol 对象上所有的属性名
    • 通过一个变量 builtInSymbols 收集这些内置 Symbol
    • 在 get 中判断当前 key 是否属于 __proto__ 或这类内置 Symbol，如果属于，就直接返回结果，跳过后面的 track 和递归代理逻辑
    代码
    baseHandlers.ts

  12. 现阶段完整代码

    现阶段完整代码结构

    src

    index.ts

    reactive.ts

    baseHandlers.ts

    effect.ts

    operations.ts

    utils.ts

    src/index.ts
    src/reactive.ts
    src/baseHandlers.ts
    src/effect.ts
    src/operations.ts
    export const enum TrackOpTypes {
  GET = 'get',
  HAS = 'has',
  ITERATE = 'iterate',
}

export const enum TriggerOpTypes {
  SET = 'set',
  ADD = 'add',
  DELETE = 'delete',
}

export const ITERATE_KEY = Symbol('iterate');
    src/utils.ts
Built with VuePress and Plume.
Notes on frontend engineering, cross-platform products, and developer tools.