Effect作用域与嵌套Effect清理机制是Vue响应式系统保障依赖准确追踪和避免内存泄漏的核心：通过effectScope()显式划分副作用边界，scope.run()注册effect，scope.stop()批量清理；嵌套effect按作用域层级自动管理生命周期，父effect重执行时仅清理同scope子effect，全局或异步effect需手动绑定并清理。
Vue.js 的响应式系统中，Effect 作用域（Effect Scope） 和 嵌套 Effect 的清理逻辑 是保障依赖追踪准确、避免内存泄漏的关键机制。它不是简单地“注册后执行”，而是一套有层次、可嵌套、自动管理生命周期的响应式副作用调度体系。
Effect 作用域：显式划分响应式副作用边界
Effect Scope 是一个容器，用于收集和统一管理在其内部创建的所有响应式 effect（如 watch、computed、onMounted 中的 reactive 依赖等）。它让开发者能主动控制一批 effect 的激活与释放时机。
- 通过
effectScope()创建新作用域，返回一个EffectScope实例 - 调用
scope.run(() => {...})执行回调，其中所有 effect（包括effect()、computed()、watch()）会自动归属该作用域 -
scope.stop()会停止并清理该作用域下所有 effect —— 包括取消依赖追踪、清空依赖列表、移除 scheduler 引用 - 组件级的
setup()默认隐式绑定一个作用域；onUnmounted内部调用的就是当前作用域的stop()
嵌套 Effect 的自动清理：父子依赖链决定释放顺序
当 effect 在另一个 effect 内部被创建（例如在 effect 回调里调用 watch 或新建 computed），就形成嵌套关系。Vue 不靠手动维护栈，而是通过作用域嵌套层级 + effect 激活状态来决定清理行为。
- 子 effect 被创建时，会记录其所属的当前活跃作用域（即最近一次未 stop 的 scope）
- 父 effect 重新执行前，会先调用
cleanup清理上一轮收集的依赖；此时若子 effect 属于同一 scope，则一并被 stop - 若子 effect 属于独立 scope（如在外层手动
effectScope().run(...)），则父 effect 重跑不会影响它 —— 它只随自身 scope 的生命周期释放 - 清理不是“递归销毁”，而是按作用域粒度批量停用，再由每个 effect 自行触发
track/trigger解绑
手动清理的典型场景与注意事项
多数情况 Vue 自动处理，但在动态逻辑或跨组件协作中需主动干预：
立即学习“前端免费学习笔记（深入）”；
- 条件性创建 effect：用
v-if切换时，对应 effect 会随作用域自动 stop；但若用if/else在同一个setup中分支创建不同 effect，应确保它们属于同一 scope 或显式管理 - 异步 effect（如
watch回调中发请求）：请求未完成时组件卸载，effect 已 stop，但 Promise 仍可能 resolve —— 需配合onInvalidate或abortController做业务侧清理 - 全局 effect（如插件中使用
effect）：必须手动绑定 scope 并在适当时机stop，否则无法被组件卸载回收 - 避免 effect 泄漏：不要在循环或高频事件中反复调用
effect()却不保存引用或清理 —— 每个都应归属明确 scope
调试与验证清理是否生效
可通过以下方式确认 effect 是否被正确释放：
- 在 effect 回调开头打印日志，组件卸载后不应再触发
- 观察
targetMap（内部依赖图）中对应对象的 deps 数量是否归零（需 dev 模式 + Vue Devtools） - 使用
getCurrentScope()检查当前活跃作用域，配合scope.effects查看已注册 effect 列表 - 对关键 effect 显式保存引用，调用
stop()后检查其active属性是否为false
