effectScope 是 Vue 3.2+ 用于显式创建副作用作用域的工具，可统一挂载并一次性销毁 watch、computed 等响应式 effect，避免内存泄漏；适用于动态组合副作用、条件启用/停用、SSR 隔离及测试生命周期控制等场景。
effectScope 是 Vue 3.2+ 引入的用于显式创建副作用作用域的工具，它能将多个响应式副作用（如 watch、computed、onMounted 中的 effect）收集到一个作用域内，实现统一挂载与**一次性销毁**，避免内存泄漏和重复注册问题。
什么时候该用 effectScope？
当你需要动态创建一组响应式逻辑（比如在函数内启动多个 watch、或根据条件开启 computed + watch 组合），又希望它们能随某个时机（如组件卸载、条件切换）自动清理时，effectScope 就比手动逐个调用 stop 更可靠、更简洁。
典型场景包括：
- 可复用的组合式函数中封装多个响应式副作用
- 动态表单/弹窗中按需启用监控逻辑，关闭时彻底释放
- 服务端渲染（SSR）中隔离客户端副作用，避免跨请求污染
- 测试中模拟组件生命周期，精准控制 effect 生命周期
基础用法：创建并运行副作用
调用 effectScope() 返回一个作用域实例，用其 run(fn) 方法执行副作用代码。所有在 fn 内通过 watch、computed、watchEffect 等创建的响应式 effect 都会被自动注册到该作用域中。
示例：
import { effectScope, watch, ref } from 'vue'
<p>export function useAutoSave(data) {
const scope = effectScope()</p><p>const saved = ref(false)</p><div class="aritcle_card flexRow artxards">
<div class="artcardd flexRow">
<a class="aritcle_card_img" rel="nofollow" href="/xiazai/gongju/2234" title="Vuejs"><img
src="https://img.php.cn/upload/manual/001/242/473/6a06adfe771d0724.png" alt="Vuejs" onerror="this.onerror='';this.src='/static/lhimages/moren/morentu.png'" ></a>
<div class="aritcle_card_info flexColumn">
<a rel="nofollow" href="/xiazai/gongju/2234" title="Vuejs" class="overflowclass">Vuejs</a>
<p class="overflowclass">Vue.js 官方推荐通过 npm 进行安装，这是构建现代化前端项目最主流的方式。在终端中执行 npm install vue 即可获取最新稳定版，如需指定版本可添加 @版本号，例如 npm install vue@3.4.0。安装前请确保已配置 Node.js 环境（推荐 v18 及以上版本），并建议将 npm 镜像源切换至国内镜像以提升下载速度。对于大型项目，还可通过 npm create v</p>
</div>
<a rel="nofollow" href="/xiazai/gongju/2234" title="Vuejs" class="aritcle_card_btn flexRow flexcenter"><b></b><span>下载</span>
</a>
</div>
</div><p>scope.run(() => {
watch(data, () => {
console.log('数据变化，触发保存')
saved.value = true
setTimeout(() => saved.value = false, 2000)
}, { immediate: true })</p><pre class="brush:php;toolbar:false;">// 这个 computed 也会被纳入 scope
const isDirty = computed(() => JSON.stringify(data.value) !== initialJson)})
// 返回清理方法 return () => scope.stop() }
主动销毁：stop() 一键清理所有副作用
调用作用域实例的 .stop() 方法，会立即停止并清理该作用域下所有已注册的响应式 effect（包括 watch、computed、watchEffect、onBeforeUnmount 中注册的 effect 等），且不可逆。
关键行为：
- 已停止的作用域不能再调用
run() -
computed停止后不再追踪依赖，也不再响应更新 -
watch和watchEffect的回调不会再执行 - 不会影响作用域外的响应式逻辑
与组件生命周期联动（推荐实践）
在 setup 或组合式函数中，通常配合 onUnmounted 自动销毁：
import { effectScope, onUnmounted, watch } from 'vue'
<p>export default {
setup() {
const scope = effectScope()</p><pre class="brush:php;toolbar:false;">scope.run(() => {
watch(someRef, handler)
watchEffect(() => { /* ... */ })
// 其他副作用...
})
onUnmounted(() => {
scope.stop() // 组件卸载时统一清理
})
return { /* ... */ }} }
也可以配合条件逻辑动态启停：
const scope = effectScope()
const isActive = ref(false)
<p>watch(isActive, (now) => {
if (now) {
scope.run(() => {
watch(data, syncToServer)
})
} else {
scope.stop() // 清理旧 scope
}
})</p>大量免费API接口：立即使用
涵盖生活服务API、金融科技API、企业工商API、等相关的API接口服务。免费API接口可安全、合规地连接上下游，为数据API应用能力赋能！
