手写mini版本的Vue3--实现 effect 的 scheduler 功能

介绍

开头继续感谢崔大的mini-vue 项目。

项目地址:github.com/cuixiaorui/…

强烈建议大家把项目 down 下来，运行一下，看VUE3 的整体运行逻辑。

今天我们就来实现 effect 里面的 runner 逻辑

实现 schedule

通过 VUE3 的schedule 的单元测试，我知道了要实现的 schedule 要实现以下功能：

1.通过 effect 的第二个参数给的一个 schedule 的 fn。 2.effect 第一个执行的时候还会执行 fn 3.当响应式对象 set update 不会执行 fn 而是执行 schedule 4.如果说当执行 runner 的时候，会再次执行 fn

首先我们需要修改的地方是把在取出 effect 的时候，如果有 schedule 这个方法，就先调用schedule，否则继续执行 run 方法。

原本：

  for (const effect of dep) {
      effect.run();
  }

修改后：

  for (const effect of dep) {
    if (effect.scheduler) {
      effect.scheduler();
    } else {
      effect.run();
    }
  }

当然了还是需要在ReactiveEffect类里面加上scheduler这个参数

  public scheduler: Function | undefined
  constructor(fn, scheduler?: Function) {
    this._fn = fn
    this.scheduler = scheduler
  }

最后我们需要在 effect 这里传入一个options对象，schedule 就放在 options 里面传入。

实例化 effect 的时候传入。

这里定义一下传入的类型
type effectOptions = {
  scheduler?: Function;
}

let activeEffect
export function effect(fn, options: effectOptions = {}) { // 默认传一个空对象。
  
  const _effect = new ReactiveEffect(fn, options.scheduler)
  
  
  
 
}

结尾

项目已经放到我的 GitHub 上面了，欢迎大家去start。

本次 commit地址：github.com/moyuhaokan/…

我的项目地址：github.com/moyuhaokan/…

再次推荐崔大的项目：github.com/cuixiaorui/…