见证Vue3源码之美：深入剖析effect的stop功能

2023-09-05 23:51:54

邂逅effect的stop功能

在Vue3的浩瀚源码之海中，effect是一个举足轻重的概念，它掌管着响应式系统的核心。effect.stop功能赋予了开发者主动停止响应式追踪的能力，为优化性能和内存管理提供了便利。

踏入测试用例的迷宫

为了深入理解effect的stop功能，让我们从测试用例effect.spec.ts入手。这些测试用例勾勒出stop功能的轮廓，为我们提供了探索的基石。

describe('effect.stop', () => {
  it('should stop tracking', () => {
    const fn = vi.fn();
    const runner = effect(fn);
    runner.stop();
    runner.effect.run();
    expect(fn).not.toBeCalled();
  });
});

测试用例揭示了以下关键信息：

effect.stop()方法被调用后，响应式追踪将停止。
调用runner.effect.run()不会触发响应式函数的执行。

探寻runner的奥秘

那么，runner中的effect实例是如何获取的呢？深入源码，我们发现了一个名为createEffect的函数，它负责创建effect实例并将其附加到runner对象上。

function createEffect(fn, options) {
  const effect = new Effect(fn, options);
  effect.runner = effect.run.bind(effect);
  return effect;
}

现在，我们明白了，当调用runner.effect.run()时，实际上是执行了effect实例的run方法。

揭开effect实例的来源

那么，effect实例又从何而来呢？答案隐藏在runner.run方法中：

run(options) {
  if (this.active) {
    if (this.options.scheduler) {
      this.options.scheduler.add(this);
    } else {
      this.run();
    }
  }
}

如果effect处于激活状态，则会调用run方法。在这个过程中，根据配置的scheduler，effect将被加入调度队列或直接执行。

拨云见日，直达本质

通过以上分析，我们拨开了迷雾，揭示了effect.stop功能的运作机制：