深入理解 Vue 3 源码中 `stop` 函数如何实现对响应式副作用的精准清理，以及它在 `unmounted` 钩子中的应用。

各位老铁，早上好（或者晚上好，取决于你几点看到这篇文章），今天咱们聊聊 Vue 3 响应式系统里一个低调但极其重要的角色 —— stop 函数。它就像一个默默守护你代码的清洁工，负责在组件卸载的时候，把那些没用的响应式副作用给清理干净，防止内存泄漏，让你的应用跑得更丝滑。

开胃小菜：响应式副作用是个啥？

在深入 stop 之前，咱们先搞清楚啥叫“响应式副作用”。简单来说，就是那些依赖于响应式数据，并且会在数据改变时执行的函数。

举个栗子：

<template>
  <div>{{ count }}</div>
</template>

<script>
import { ref, onMounted, watch } from 'vue';

export default {
  setup() {
    const count = ref(0);

    onMounted(() => {
      // 这是一个响应式副作用：当 count 改变时，会更新 document.title
      watch(count, (newValue) => {
        document.title = `Count: ${newValue}`;
      });
    });

    return {
      count
    };
  }
};
</script>

在这个例子中，watch 内部创建了一个 effect，这个 effect 就是一个响应式副作用。它依赖了 count 这个响应式数据，当 count 的值发生改变时，watch 提供的回调函数会被执行，从而更新 document.title。

stop 函数：副作用的终结者

好了，现在主角登场了。stop 函数的作用很简单粗暴：停止一个响应式副作用的执行。它就像一个“停止按钮”，按下它，对应的 effect 就不再响应数据变化，也不会再执行。

在 Vue 3 源码中，stop 函数的简化版大概是这样的：

function stop(effect) {
  if (effect.active) {
    effect.active = false;
    if (effect.onStop) {
      effect.onStop();
    }
    effect.deps.forEach(dep => {
      dep.delete(effect)
    })
    effect.deps.length = 0; // 清空依赖集合，防止内存泄漏
  }
}

咱们来一行一行解读一下：

if (effect.active): 确保 effect 当前是激活状态。只有激活状态的 effect 才能被停止。
effect.active = false;: 把 effect 的 active 属性设置为 false。这个属性是用来标记 effect 是否处于激活状态的关键标志。
if (effect.onStop): 如果 effect 定义了 onStop 回调函数，就执行它。这个回调函数允许你在 effect 停止时执行一些额外的清理工作。
effect.deps.forEach(dep => { dep.delete(effect) }): 遍历 effect 依赖的所有 dep 集合，从每个 dep 集合中移除当前的 effect。这是清理 effect 和响应式数据之间关联的关键步骤。
effect.deps.length = 0;: 清空 effect.deps 数组。因为dep.delete(effect)仅仅移除了集合中关于effect的引用，而effect本身还持有dep的引用，这会造成内存泄漏，所以要清空。

stop 在 unmounted 钩子里的妙用

你可能会问：stop 函数这么厉害，那它在哪里用呢？答案就在组件的 unmounted 钩子里。

当一个 Vue 组件被卸载时，Vue 会自动调用 unmounted 钩子。在这个钩子里，我们可以使用 stop 函数来停止组件内部创建的响应式副作用，防止这些副作用在组件卸载后继续执行，从而导致内存泄漏。

让我们回到之前的例子，稍微修改一下：

<template>
  <div>{{ count }}</div>
</template>

<script>
import { ref, onMounted, onUnmounted, watch } from 'vue';

export default {
  setup() {
    const count = ref(0);
    let stopWatch; // 用于保存 stop 函数

    onMounted(() => {
      // 创建响应式副作用，并保存 stop 函数
      stopWatch = watch(count, (newValue) => {
        document.title = `Count: ${newValue}`;
      });
    });

    onUnmounted(() => {
      // 在组件卸载时，停止响应式副作用
      stopWatch();
    });

    return {
      count
    };
  }
};
</script>

在这个例子中，我们在 onMounted 钩子里创建了一个响应式副作用，并把 watch 返回的 stop 函数保存到了 stopWatch 变量中。然后，在 onUnmounted 钩子里，我们调用了 stopWatch()，从而停止了响应式副作用的执行。

更优雅的写法：onScopeDispose

Vue 3 提供了一个更方便的 API： onScopeDispose。它可以自动在组件卸载时执行清理函数，避免了手动保存 stop 函数的麻烦。

上面的例子可以改写成这样：

<template>
  <div>{{ count }}</div>
</template>

<script>
import { ref, onMounted, onScopeDispose, watch } from 'vue';

export default {
  setup() {
    const count = ref(0);

    onMounted(() => {
      // 创建响应式副作用
      watch(count, (newValue) => {
        document.title = `Count: ${newValue}`;
      }, {
        onStop: () => {
          console.log("watch effect stopped")
        }
      });
    });

    onScopeDispose(() => {
        console.log("scope disposed")
    })

    return {
      count
    };
  }
};
</script>

在这个例子中，我们不再需要手动保存 stop 函数，而是直接在 watch 的 options 中传入 onStop，Vue 会自动在组件卸载时调用 onStop 函数，从而停止响应式副作用的执行。同时，onScopeDispose 也能保证在组件卸载时执行清理函数，使得代码更简洁清晰。

stop 函数的源码探秘（简化版）

为了更好地理解 stop 函数的工作原理，咱们来扒一扒 Vue 3 源码（简化版）：

// packages/reactivity/src/effect.ts

export let activeEffectScope: EffectScope | undefined

export class EffectScope {
  active = true
  effects: ReactiveEffect[] = []
  cleanups: (() => void)[] = []

  constructor(detached = false) {
    if (!detached && activeEffectScope) {
      activeEffectScope.effects.push(this as any)
    }
  }

  run<T>(fn: () => T): T | undefined {
    if (this.active) {
      try {
        this.on()
        return fn()
      } finally {
        this.off()
      }
    } else {
      __DEV__ && warn(`cannot run an inactive effect scope.`)
    }
  }

  on() {
    activeEffectScope = this
  }

  off() {
    activeEffectScope = undefined
  }

  stop() {
    if (this.active) {
      let i = this.effects.length
      while (i--) {
        this.effects[i].stop()
      }
      this.cleanups.forEach(fn => {
        fn()
      })
      this.active = false
    }
  }
}

export let activeEffect: ReactiveEffect | undefined;

export class ReactiveEffect<T = any> {
  active = true;
  deps: Dep[] = [];
  parent: ReactiveEffect | undefined = undefined
  onStop?: () => void

  constructor(
    public fn: () => T,
    public scheduler: EffectScheduler | null = null,
    scope?: EffectScope
  ) {
    recordEffectScope(this, scope)
  }

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

    let parent: ReactiveEffect | undefined = activeEffect;
    try {
      activeEffect = this;
      shouldTrack.value = true;

      cleanupEffect(this);
      return this.fn();
    } finally {
      activeEffect = parent;
      shouldTrack.value = wasTracking;
    }
  }

  stop() {
    if (this.active) {
      cleanupEffect(this)
      if (this.onStop) {
        this.onStop()
      }
      this.active = false
    }
  }
}

function cleanupEffect(effect: ReactiveEffect) {
  const { deps } = effect
  if (deps.length) {
    for (let i = 0; i < deps.length; i++) {
      deps[i].delete(effect)
    }
    effect.deps.length = 0
  }
}

export type Dep = Set<ReactiveEffect> & TrackedMarkers

export const createDep = (effects?: ReactiveEffect[]): Dep => {
  const dep = new Set<ReactiveEffect>(effects) as Dep
  dep.w = 0
  dep.n = 0
  return dep
}

let shouldTrack = {
  value: true
}

const wasTracking = shouldTrack.value

export function trackEffects(
  dep: Dep,
  options?: DebuggerOptions
) {
  if (!dep.has(activeEffect!)) {
    dep.add(activeEffect!)
    activeEffect!.deps.push(dep)
  }
}

export function triggerEffects(
  dep: Dep | ReactiveEffect[],
  options?: DebuggerOptions
) {
  const effects = isArray(dep) ? dep : [...dep]
  for (const effect of effects) {
    if (effect.scheduler) {
      effect.scheduler()
    } else {
      effect.run()
    }
  }
}

function recordEffectScope(effect: ReactiveEffect, scope?: EffectScope) {
  scope = scope || activeEffectScope
  if (scope && scope.active) {
    scope.effects.push(effect)
  }
}

这段代码涉及几个关键概念：

ReactiveEffect: 代表一个响应式副作用。它包含了副作用的执行函数 fn、调度器 scheduler、以及一个 active 标志。
Dep: 代表一个依赖集合。它存储了所有依赖于同一个响应式数据的 ReactiveEffect。
activeEffect: 一个全局变量，指向当前正在执行的 ReactiveEffect。
stop: ReactiveEffect 类上的方法，用于停止副作用。
cleanupEffect: 函数，用于清理副作用和依赖之间的关联。
EffectScope: 用于管理一组 effect 的集合，可以批量停止一组 effect。

当一个响应式数据被访问时，Vue 会把当前的 activeEffect 添加到该数据对应的 Dep 集合中。这样，当数据发生改变时，Vue 就能找到所有依赖于该数据的 ReactiveEffect，并执行它们。

stop 函数的核心在于：

把 ReactiveEffect 的 active 属性设置为 false，阻止它再次执行。
调用 cleanupEffect 函数，清理 ReactiveEffect 和 Dep 之间的关联，防止内存泄漏。

表格总结：stop 函数的关键步骤

步骤	作用
`effect.active = false;`	标记 effect 为非激活状态，阻止它再次执行。
`effect.onStop()`	执行 effect 上的 `onStop` 回调函数，允许进行额外的清理工作。
`cleanupEffect(effect)`	清理 effect 和它所依赖的响应式数据之间的关联，防止内存泄漏。具体来说就是遍历`effect.deps`，将每一个`dep`中的`effect`移除，同时将`effect.deps`置空。

EffectScope 进阶

Vue 3 新增了 EffectScope，它允许你将一组相关的 effect 组织在一起，并统一管理它们的生命周期。这在组件内部创建多个 effect 时非常有用。

<template>
  <div>{{ count }}</div>
</template>

<script>
import { ref, onMounted, onUnmounted, watch, EffectScope } from 'vue';

export default {
  setup() {
    const count = ref(0);
    const scope = new EffectScope(); // 创建一个 EffectScope

    onMounted(() => {
      scope.run(() => { // 在 scope.run 中创建 effect
        watch(count, (newValue) => {
          document.title = `Count: ${newValue}`;
        });
      });
    });

    onUnmounted(() => {
      scope.stop(); // 停止 scope 中的所有 effect
    });

    return {
      count
    };
  }
};
</script>

在这个例子中，我们创建了一个 EffectScope，并在 scope.run 中创建了 watch effect。当组件卸载时，我们调用 scope.stop()，从而停止了 scope 中的所有 effect。这比手动停止每个 effect 更加方便。

stop 函数的注意事项

只停止自己创建的 effect：不要尝试停止 Vue 内部创建的 effect，否则可能会导致应用出错。
避免重复停止：确保 effect 只被停止一次，多次停止可能会导致错误。
在正确的时机停止：在组件卸载时或者不再需要 effect 时，及时停止 effect，防止内存泄漏。

总结：stop 函数的重要性

stop 函数是 Vue 3 响应式系统的重要组成部分。它负责清理响应式副作用，防止内存泄漏，确保应用的稳定性和性能。理解 stop 函数的工作原理，可以帮助你更好地理解 Vue 3 的响应式系统，并编写出更健壮的 Vue 应用。

好了，今天的讲座就到这里。希望大家对 stop 函数有了更深入的理解。记住，代码的清洁工很重要，要好好爱护它们！如果觉得有用，记得点赞哦！下次再见！

发表回复 取消回复

发表回复取消回复