Effect 作用域是 Vue 3.2 引入的副作用容器，为 watch、computed 等提供统一生命周期管理与批量清理能力，解决手动清理难、内存泄漏及组合式函数不可控等问题。
Effect 作用域（effectScope）是 Vue 3.2 引入的核心响应式辅助机制，本质是一个“副作用容器”——它不改变响应式数据本身，而是为 watch、computed、watchEffect 甚至手动创建的定时器、事件监听等副作用提供统一的生命周期归属和批量控制能力。
为什么需要 Effect 作用域？
在没有作用域管理时，每个副作用都是独立存在的：
- 组件卸载前必须手动调用
stop()停止watch，手动clearInterval清理定时器，手动removeEventListener移除监听器； - 组合式函数（如
useMouse、useScroll）内部创建的副作用，调用方无法感知、也无法统一清理，容易堆积监听器造成内存泄漏； - 多个计算属性与侦听器逻辑耦合紧密，但清理逻辑分散，维护成本高、易遗漏。
Effect 作用域怎么工作？
它通过一个隐式“活跃作用域栈”实现自动绑定：
- 调用
effectScope()创建一个新作用域对象； - 在
scope.run(() => { ... })内部执行的响应式 API（watch、computed等）会自动将自身注册到当前活跃作用域中； - 调用
scope.stop()时，Vue 会遍历该作用域下所有已注册的副作用，依次停止、解绑、释放依赖，无需开发者干预。
典型使用场景
组件内局部副作用聚合
适合复杂逻辑模块（如表单校验、实时搜索、图表联动）：
立即学习“前端免费学习笔记（深入）”；
从零开始编排 SpringBoot+Vue 全栈项目工作流，适用于新建全栈项目或完整脚手架请求，触发后依次调用 product‑spec‑builder（需求调研）等模块。
const scope = effectScope();
onMounted(() => {
scope.run(() => {
const search = ref('');
const results = ref([]);
watch(search, debounce(async (val) => {
results.value = await api.search(val);
}, 300));
watchEffect(() => console.log('当前结果数:', results.value.length));
});
});
onUnmounted(() => scope.stop());
可复用组合函数封装
让 useXxx 函数自带清理能力，调用即安全：
export function useTimeout(fn, delay) {
const scope = effectScope();
scope.run(() => {
const timer = setTimeout(fn, delay);
onScopeDispose(() => clearTimeout(timer)); // 或直接 scope.stop()
});
return () => scope.stop();
}
嵌套与独立作用域
支持层级化管理：子作用域默认继承父作用域，也可用 effectScope(true) 创建完全独立的作用域，互不影响。
关键细节提醒
-
scope.stop()后，所有关联的computed将不再更新、watch不再触发、watchEffect停止响应； -
onScopeDispose是作用域销毁前的钩子，适用于需在停止前执行清理逻辑（如发送埋点、关闭连接）； - 作用域本身不持有响应式数据，只管理副作用；
ref、reactive仍由 GC 自动回收，但它们触发的副作用会被作用域接管； - 组件 setup 中推荐配合
onUnmounted调用stop，组合式函数中建议返回stop方法供调用方控制。
