优化effect stop功能，附全流程断点调试视频

前言

本文是 Vue3 源码实战专栏的第 6 篇。

第三篇完善effect功能中实现了stop方法，本篇文章完善stop方法，并通过断点调试来完整解析整个流程。

修改单测

在原本的基础上，修改effect中stop测试用例。

it("stop", () => {
  let dummy;
  const obj = reactive({ prop: 1 });
  const runner = effect(() => {
    dummy = obj.prop;
  });
  obj.prop = 2;
  expect(dummy).toBe(2);
  stop(runner);

  // obj.prop = 3;
  obj.prop++;
  expect(dummy).toBe(2);

  // stopped effect should still be manually callable
  runner();
  expect(dummy).toBe(3);
});

运行单测yarn test effect

报错分析

简单分析一下报错的原因。

obj.prop++可以理解成obj.prop = obj.prop + 1，存在get和set两个操作，触发get操作会重新收集依赖，导致stop中cleanupEffect方法删除所有effect失效。

实现

知道了根本原因是先触发get操作重新执行了effect中函数，也就是调用了track方法，那需要完善的逻辑应该这个方法入手。我们可以定义一个全局变量shouldTrack来判断是否需要进行track操作。

let reactiveEffect;
let shouldTrack;  // 定义

export function track(target, key) {
  ...
 if(!shouldTrack) return // 直接return不进行依赖收集
  if (!reactiveEffect) return;
  dep.add(reactiveEffect);
  reactiveEffect.deps.push(dep);
}

进行赋值的时候触发set操作，执行trigger函数，最终调用的是 Class 类ReactiveEffect中run方法。run方法中原本是直接返回了入参函数的执行结果，这里就需要判断一下stop的情况，可以依据active来判断。

如果是调用了stop方法之后，active赋值为false，这时候直接返回fn；

如果没有调用stop方法，先将shouldTrack设为true，表示可以进行track调用，然后执行fn，并将执行结果返回，但是在返回之前需要重置操作，将shouldTrack设置成false，因为如果在遇到stop之后，run函数中会直接return，不会将shouldTrack设为true，那在track时，就会走!shouldTrack直接return不再收集依赖。

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

  shouldTrack = true;
  reactiveEffect = this;

  const result = this._fn();
  shouldTrack = false;

  return result;
}

重构

track中shouldTrack和reactiveEffect的边界判断，可以提到track函数体内顶部，单独封装一个函数合成这两个判断。

依赖收集这儿可以优化的点，当dep中存在的reactiveEffect就不再重复收集了。

export function track(target, key) {
  if (!isTracking()) return;

  ...

  if (dep.has(reactiveEffect)) return;
  dep.add(reactiveEffect);
  reactiveEffect.deps.push(dep);
}

function isTracking() {
  return shouldTrack && reactiveEffect !== undefined;
}

调试

修改一下单测，用更简单的单测来通过调试清晰看一下上述流程。

it("stop", () => {
  let dummy;
  const obj = reactive({ prop: 1 });
  const runner = effect(() => {
    dummy = obj.prop;
  });
  stop(runner);
 
  obj.prop++;
  expect(dummy).toBe(1);
});