手写mini版本的Vue3--实现 runner介绍开头继续感谢崔大的mini-vue 项目。项目地址:github

介绍

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

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

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

思路：

我们要实现的 runner 是要调用 runner 的时候，拿到函数的返回值。

我们上次实现的基本的 effect ，能实现的就是调用之后，返回一个 function。

这个 function 我们叫做 runner 。

当我们再次调用这个 function，也就是 runner 的时候，它是会执行 effect 里面的函数。

最终会把函数的值给 return 出来。

我们的runnner 执行函数也就是跟_effect.run这个函数是一样的。然后注意run 里面的 this 执行，要使用 bind 绑定到当前的 effect 上。

 const runner = _effect.run.bind(_effect);
 return runner;

还有就是当调用函数时，要把返回值给return 出去。

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

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

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