目标

处理一些关于 stop 的 edge case
在 obj.prop ++ 时，会同时触发 getter 和 setter，因为 getter 会导致重新依赖收集。导致 stop 失败

  1. it('stop', () => {
  2.   let dummy;
  3.   const obj = reactive({ foo: 1 });
  4.   const runner = effect(() => {
  5.     dummy = obj.prop;
  6.   });
  7.   obj.prop = 2;
  8.   expect(dummy).toBe(2);
  9.   stop(runner);
  11.   obj.prop = 3;
  12.   expect(dummy).toBe(2);
  14.   // ******* bug
  15.   obj.prop ++; // obj.prop = obj.prop + 1; get -> set
  16.   expect(dummy).toBe(2);
  18.   // stopped effect should still be manually callable
  19.   runner();
  20.   expect(dummy).toBe(4);
  21. });

优化

可以对依赖收集 track 时做一些文章

  1. let activeEffect;
  2. let shouldTrack;
  3. class EffectReactive {
  4.   private _fn;
  5.   deps = [];
  6.   active = true;
  7.   onStop?: () => void;
  8.   constructor(fn, public scheduler?) {
  9.     this._fn = fn;
  10.   }
  11.   run() {
  12.     // 1. 会收集依赖
  13.     //    使用 shouldTrack 来区分
  14.     if (!this.active) {
  15.       return this._fn();
  16.     }
  18.     shouldTrack = true;
  19.     activeEffect = this;
  21.     const result = this._fn();
  23.     // reset
  24.     shouldTrack = false;
  26.     return result;
  27.   }
  28.   stop() {
  29.     if (this.active) {
  30.       cleanupEffect(this);
  31.       if (this.onStop) {
  32.         this.onStop();
  33.       }
  34.       this.active = false;
  35.     }
  36.   }
  37. }
  39. function cleanupEffect(effect) {
  40.   effect.deps.forEach((dep: any) => {
  41.     dep.delete(effect);
  42.   });
  44.   // dep 都清空了，对应的 effect.deps 就没有意义，可清空作优化
  45.   effect.deps.length = 0;
  46. }
  48. export function track(target, key) {
  49.   // 重构
  50.   // if (!activeEffect) return;
  51.   // if (!shouldTrack) return;
  52.   if(!isTracking()) return;
  54.   let depsMap = targetMap.get(target);
  55.   if (!depsMap) {
  56.     depsMap = new Map();
  57.     targetMap.set(target, depsMap);
  58.   }
  59.   let dep = depsMap.get(key);
  60.   if (!dep) {
  61.     dep = new Set();
  62.     depsMap.set(key, dep);
  63.   }
  65.   // 已经在 dep 中
  66.   if (dep.has(activeEffect)) return;
  68.   dep.add(activeEffect);
  69.   activeEffect.deps.push(dep);
  70. }
  72. function isTracking() {
  73.   return shouldTrack && activeEffect !== undefined;
  74. }