手写mini版本的Vue3--优化 stop 功能

介绍

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

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

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

优化 stop

我们在 stop 的单元测试里面加上这一行

// obj.prop = 3; obj.prop++

这个时候单元测试就通不过了。因为这个时候，我们要执行 obj.prop++ 这个操作的时候，首先需要执行 get 操作，再执行 set 操作。

当设计 get 操作，就会重新收集依赖，也就意味着我们原本的 stop 里面就白清理了，还是会去执行set 操作。

我们首先来声明一下是否收集依赖的一个变量shouldTrack

let activeEffect;
let shouldTrack = false;



  run() {
    if (!this.active) {
      return this._fn();
    }

    // 应该收集
    shouldTrack = true;
    activeEffect = this;
    const r = this._fn();

    // 重置
    shouldTrack = false;

    return r;
  }

然后判断一下，如果是 stop 的状态，也就是!this.active 的时候，我们直接返回()

如果不是stop 的话，我们shouldTrack 打开，然后继续我们 然后继续调用我们的activeEffect，最后重置一下shouldTrack

结尾

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

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

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

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