实现 computed

约 1967 字大约 7 分钟

2026-03-29

懒执行

Vue 官方的 computed 是一个 懒执行 的副作用函数。只有在真正读取计算属性的值时，才会去执行它内部的副作用函数

下面这段代码中，传入的函数本质上更像一个 getter。如果还是沿用之前的实现，在调用 effect 的那一刻就直接执行，那就不是计算属性想要的行为了

const effectFn = effect(
  () => {
    return proxy.age + 10;
  },
  {
    lazy: true,
  },
);

实现核心

与调度实行类似，可以通过在 effect 里增加一个 lazy 选项来实现这个功能。默认情况还是立即执行，只有当 lazy: true 时才先不执行，并把包装后的 effectFn 返回出去，方便后面手动调用

代码

effect.ts

let activeEffect;
const effectStack = [];

function effect(fn, options = {}) {
  const effectFn = () => {
    cleanup(effectFn);

    activeEffect = effectFn;
    effectStack.push(effectFn);

    fn();

    effectStack.pop();
    activeEffect = effectStack[effectStack.length - 1];
  };

  effectFn.options = options;
  effectFn.deps = [];

  // 只有非 lazy 的情况才立即执行
  if (!options.lazy) { 
    effectFn();  
  }  

  // 把包装后的副作用函数返回出去
  return effectFn;
}

effect 还需要返回执行结果

仅仅做到懒执行还不够，因为 computed 最终关心的是一个值，而不是 "某个副作用函数有没有被执行过"。所以这里还要再往前走一步：让包装后的 effectFn 在执行时，把用户传入函数的返回值再原样返回出来

关键点

computed 的底层依然是 effect，只不过这个 effect 不再主要为了 "产生副作用"，而是为了 "在依赖变化后重新拿到 getter 的计算结果"

代码

effect.ts

function effect(fn, options = {}) {
  const effectFn = () => {
    cleanup(effectFn);

    activeEffect = effectFn;
    effectStack.push(effectFn);

    // 保存 getter 的返回值
    const res = fn();  

    effectStack.pop();
    activeEffect = effectStack[effectStack.length - 1];

    // 把结果再返回出去
    return res;  
  };

  effectFn.options = options;
  effectFn.deps = [];

  if (!options.lazy) {
    effectFn();
  }

  return effectFn;
}

index.ts

const effectFn = effect(
  () => {
    return proxy.age + 10;
  },
  {
    lazy: true,
  },
);

const value = effectFn();
console.log(value);

实现 computed
有了上面的改造以后，实现最简单的 computed：把 effect(getter, { lazy: true }) 放到 computed 函数中，然后对外暴露一个带有 value 访问器属性的对象。这样在调用 computed 时，就会得到一个对象，读取它的 value 属性时就会执行 getter，并返回结果
代码
computed.ts
function computed(getter) { const effectFn = effect(getter, { lazy: true }); const obj = { get value() { return effectFn(); }, }; return obj; }
index.ts
const res = computed(() => proxy.age + 10); console.log(res.value);
但这个版本显然还不够，因为每次读取 res.value，都会重新执行一遍 getter
```
const res = computed(() => proxy.age + 10);

console.log(res.value);
console.log(res.value);
console.log(res.value);
```
这里虽然依赖的数据根本没变，但 getter 还是会被反复执行。这和 computed 的预期不一致
缓存上一次的计算结果
computed 的一个核心特点就是：依赖没有变化时，重复读取应该直接返回缓存值，而不是重新求值
关键点
这个逻辑其实很适合用一个 dirty 标记来表示：
- dirty = true 说明缓存已经失效，需要重新计算
- dirty = false 说明缓存仍然可用，直接返回上一次的值即可
代码
computed.ts
function computed(getter) { let value; let dirty = true; const effectFn = effect(getter, { lazy: true }); const obj = { get value() { if (dirty) { value = effectFn(); dirty = false; } return value; }, }; return obj; }
index.ts
const res = computed(() => proxy.age + 10); console.log(res.value); console.log(res.value); console.log(res.value);
这样以后，多次读取 res.value 时，getter 就只会在第一次真正执行一次
不过这里又会暴露出新的问题：当依赖的响应式数据变化以后，dirty 并不会自动重新变成 true
```
const res = computed(() => proxy.age + 10);

console.log(res.value);
proxy.age++;
console.log(res.value);
```
这里第二次读取按理说应该拿到新值，但现在还是旧值。原因很简单：缓存虽然该失效了，但我们还没有在依赖变化时主动把 dirty 重置掉
借助调度器让缓存失效
关键点
到这里，前一节 "实现调度执行" 的作用就体现出来了。computed 内部本身就是一个懒执行的 effect，那么只要这个 effect 依赖的响应式数据发生变化，就会触发它的 scheduler。那么在 scheduler 里，就可以把 dirty 标记重置掉，这样下一次读取 value 时，就会重新计算了
代码
computed.ts
function computed(getter) { let value; let dirty = true; const effectFn = effect(getter, { lazy: true, // scheduler 在 trigger 中的逻辑就是如果存在 scheduler 那么执行 scheduler 并传入 effectFn scheduler() { dirty = true; }, }); const obj = { get value() { if (dirty) { value = effectFn(); dirty = false; } return value; }, }; return obj; }
这样以后：
- 初次读取 value 时会执行 getter，并缓存结果
- 当底层依赖发生变化时，scheduler 只负责把 dirty 改回 true
- 下一次真正读取 value 时，才重新计算
到这里，单独读取 computed.value 其实已经没问题了。但只要把它放进外层 effect 中，又会出现新的情况
computed.value 自己也需要参与依赖收集
看下面这段代码：
```
const res = computed(() => proxy.age + 10);

effect(() => {
  console.log(res.value);
});

proxy.age++;
```
按直觉来说，proxy.age 变化以后，外层 effect 应该重新执行，但现在实际上不会有任何反应
问题的根源在于，当外层副作用函数读取 res.value 时，真正发生的流程是：
1. 进入 computed 的 get value()
2. 在里面执行了 effectFn()
3. effectFn() 内部的 getter 读取了 proxy.age
4. 所以 proxy.age 收集到的其实是 computed 内部的 effect
这就意味着，底层依赖变化时，只会让 computed 内部这个 effect 知道自己该失效了，但外层那个读取了 res.value 的 effect 根本没有和 value 建立联系
计算属性自身的 value 也需要参与依赖收集
所以这里必须补上两件事：
- 在读取 obj.value 时，对 obj 的 value 手动做一次 track
- 当底层依赖变化导致计算属性失效时，再对 obj 的 value 手动做一次 trigger
这样一来，外层副作用函数才会真正和 computed.value 建立依赖关系
代码
computed.ts
function computed(getter) { let value; let dirty = true; const obj = { get value() { if (dirty) { value = effectFn(); dirty = false; } // 手动把外层读取 value 的副作用函数收集起来 track(obj, 'value'); return value; }, }; const effectFn = effect(getter, { lazy: true, scheduler() { if (!dirty) { dirty = true; // 当底层依赖变化时，手动触发与 value 相关的副作用函数 trigger(obj, 'value'); } }, }); return obj; }
index.ts
const res = computed(() => proxy.age + 10); effect(() => { console.log(res.value); }); proxy.age++;
这里调度器里多加了一个 if (!dirty) 判断，也是为了避免重复触发。因为如果当前本来就已经是脏的了，就没必要再重复 trigger(obj, 'value')

重新封装成完整的 computed

到这里其实已经能得到一个可用的计算属性了，不过它还只支持这种写法：

computed(() => proxy.age + 10);

但在 Vue 里，computed 还支持另一种形式：

computed({
  get() {},
  set() {},
});

所以最后可以再往前走一步，把 computed 重构成一个更完整的封装：

如果传入的是函数，就把它当成 getter
如果传入的是对象，就分别取出 get 和 set
再把缓存、脏标记、依赖收集和触发更新这些逻辑统一收进一个 ComputedRefImpl 类里

代码

computed.ts

const isFunction = (val) => typeof val === 'function';
const NOOP = () => {};

function computed(getterOrOptions) {
  let getter;
  let setter;

  if (isFunction(getterOrOptions)) {
    getter = getterOrOptions;
    setter = NOOP;
  } else {
    getter = getterOrOptions.get;
    setter = getterOrOptions.set;
  }

  return new ComputedRefImpl(getter, setter);
}

class ComputedRefImpl {
  _value;
  _dirty = true;
  effect;
  _setter;

  constructor(getter, setter) {
    this._setter = setter;
    this.effect = effect(getter, {
      lazy: true,
      scheduler: () => {
        if (!this._dirty) {
          this._dirty = true;
          trigger(this, 'value');
        }
      },
    });
  }

  get value() {
    if (this._dirty) {
      this._value = this.effect();
      this._dirty = false;
    }

    track(this, 'value');
    return this._value;
  }

  set value(newValue) {
    this._setter(newValue);
  }
}

index.ts

const res = computed({
  get() {
    return proxy.firstName + proxy.lastName;
  },
  set(val) {
    const names = val.split('');
    proxy.firstName = names[0];
    proxy.lastName = names[1];
  },
});

effect(() => {
  layer1.innerHTML = res.value;
  layer2.innerHTML = proxy.firstName + '---' + proxy.lastName;
});

btn1.addEventListener('click', () => {
  proxy.firstName = '李';
  proxy.lastName = '四';
});

btn2.addEventListener('click', () => {
  res.value = '王五';
});

补充篇

原理篇

工程化搭建

响应式

渲染器

渲染器的基础实现

基础篇

原理篇

实现 computed