一起学Vue3源码，实现最简Vue3【04】 - 实现 effect 的scheduler 功能

本文链接：https://blog.csdn.net/Aybuai/article/details/126322688

实现 effect 的scheduler 功能

前言：什么是scheduler？scheduler在vue3源码中是干嘛的？

顾名思义，scheduler就是调度器；
调度什么呢——调度Vue3 中的任务；类似于一个管家，对家中大小事情的收集。
具体文章可以参考：
趣谈scheduler任务调度器
 Vue3 任务调度器 scheduler 源码分析

一如既往，还是TDD，先写出测试用例

effect.spec.ts

it("scheduler", () => {
    // 1、当调用effect时 给定了第二个参数 options 中的  scheduler fn
    // 2、effect第一次执行的时候，会执行fn
    // 3、当 响应式对象 set时，不会执行fn，而是执行scheduler fn
    // 4、当 执行runner函数，才会再次执行fn

    let dummy;
    let run: any;
    // jest 提供的声明函数方法
    const scheduler = jest.fn(() => {
      run = runner;
    });
    const obj = reactive({ foo: 1 });
    const runner = effect(
      () => {
        dummy = obj.foo;
      },
      { scheduler }
    );
    expect(scheduler).not.toHaveBeenCalled();
    expect(dummy).toBe(1);

    // should be called on first trigger 触发收集依赖
    obj.foo++;
    expect(scheduler).toHaveBeenCalledTimes(1);

    // should not run yet
    expect(dummy).toBe(1);

    // manually run  手动执行run
    run();

    // should have run
    expect(dummy).toBe(2);
  });

effect.ts

执行函数

// 执行函数
function effect(fn, options: any = {}) {
  // options 中 scheduler 不是必传的
  const _effect = new ReactiveEffect(fn, options?.scheduler);
  // options 继承给 _effect，其中就包括了scheduler，后面还会追加 onStop fn 等
  // extend —— 顾名思义，继承的意思，具体实现就是 Object.assign()
  // 这里我们先创建一个 reactivity 同级目录 shared，用来封装公共的一些方法
  extend(_effect, options);

  _effect.run();
  const runner: any = _effect.run.bind(_effect);

  return runner;
}

公共方法封装 index.ts

export const extend = Object.assign;

effect响应式类

class ReactiveEffect {
  private _fn: Function;
  public scheduler: Function | undefined;

  // 公共属性 scheduler 才会被允许在类外部执行
  constructor(fn, scheduler?: Function) {
    this._fn = fn;
    this.scheduler = scheduler;
  }

  run() {
    activeEffect = this;
    return this._fn();
  }
}

由于响应式对象 set的时候，才会执行 scheduler，所以触发依赖这块也要加上逻辑

// 触发依赖
function trigger(target, key) {
  let depsMap = targetsMap.get(target);
  let dep = depsMap.get(key);
  for (const effect of dep) {
    // 判断effect实例是否有 scheduler方法
    if (effect.scheduler) {
      effect.scheduler();
    } else {
      effect.run();
    }
  }
}