一起学Vue3源码，实现最简Vue3【03】 - 实现 effect 返回 runner

实现 effect 返回 runner

上一章节，实现了effect 和 reactive 的 trick（收集依赖） 和 trigger（触发依赖）。本章继续补充完善effect功能

调用effect会返回一个函数runner， 调用runner会再次执行fn，调用fn， fn会返回一个返回值，ok，我们就来实现这个功能，还是TDD，测试驱动开发。

effect.spec.ts

it("should return runner when call effect", () => {
    // effect(fn) => function(runner) => fn => return
    // 调用effect会返回一个函数runner， 调用runner会再次执行fn，调用fn， fn会返回一个返回值
    let foo = 10;
    const runner = effect(() => {
      foo++;
      return "foo";
    });
    expect(foo).toBe(11);
    const r = runner();
    expect(foo).toBe(12);
    expect(r).toBe("foo");
  });

接下来就是代码实现，调用effect实例，返回一个runner，本质上就是effect上的 run() 函数，
那怎么把当前effect的 run() 导出呢？
改变run的指针，并且是不触发状态。从而我们联想到 bind 方法

effect.ts

// 执行函数
function effect(fn) {
  const _effect = new ReactiveEffect(fn, options?.scheduler);

  _effect.run();
  // 把当前 effect 实例的 run fn 返回出去
  const runner: any = _effect.run.bind(_effect);

  return runner;
}

ok， 测试一下

注意：新增一个功能后，别忘记再整体测试一遍，以为可能会由于更新新的功能导致整个流程不通

总结

总的来说，本次更新功能点很简单，但是勿以简单而不为。
最后，附上git地址：mini-vue
如果本文对观众老爷们有帮助的话，希望大家帮忙点点star。