• effect.spec.ts

  it("scheduler", () => {
    // 1. 通過(guò) effect 的第二個(gè)參數(shù)給定一個(gè) scheduler 的 fn
    // 2. effect 第一次執(zhí)行的時(shí)候 還會(huì)執(zhí)行 fn
    // 3. 當(dāng)響應(yīng)式對(duì)象 set update 不會(huì)執(zhí)行 fn 而是執(zhí)行 scheduler
    // 4. 如果說(shuō)當(dāng)執(zhí)行 runner 的時(shí)候，會(huì)再次執(zhí)行 fn
    let dummy;
    let run: any
    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)
    obj.foo++
    expect(scheduler).toHaveBeenCalledTimes(1)
    expect(dummy).toBe(1)
    run()
    expect(dummy).toBe(2)
  })

• effect.ts

class ReactiveEffect {
  private _fn: any;
+  scheduler: any;
+  constructor(fn, scheduler?: any) {
    this._fn = fn
+    this.scheduler = scheduler
  }
  run() {
    // 把實(shí)例對(duì)象賦值給 activeEffect
    activeEffect = this
    return this._fn()
  }
}
export function trigger(target,key) {
  let depsMap = targetMap.get(target)
  let dep = depsMap.get(key)
  for (const effect of dep) {
+    if (effect.scheduler) {
+      effect.scheduler()
+    } else {
 +     effect.run()
+    }
  }
}
export function effect(fn, options: any = {}) {
+  const _effect = new ReactiveEffect(fn, options.scheduler)
 _effect.run()
 return _effect.run.bind(_effect)
}