Vue 3 中怎么使用 effectScope 管理响应式副作用的生命周期与手动停止-Vue.js-PHP中文网

effectscope 是 vue 3.2+ 用于统一管理响应式副作用生命周期的工具，核心解决“谁来清理”问题；需显式创建、运行和停止，支持嵌套、detached 独立作用域及 onscopedispose 自动清理。

vue 3 中怎么使用 effectscope 管理响应式副作用的生命周期与手动停止

Vue 3.2+ 引入的 effectScope 是一个轻量但关键的生命周期管理工具，核心作用不是增强响应式，而是解决“谁来清理”的问题——尤其当响应式副作用（如 watch、computed、watchEffect）脱离组件上下文时。

基础用法：创建、注入、停止

所有副作用必须显式注册进作用域才受控，不能靠“自动捕获”：

调用 effectScope() 创建一个作用域实例（此时它什么也不做）
用 scope.run(() => { ... }) 执行回调，在其中定义 watch、computed 等——这些会自动归属该 scope
调用 scope.stop() 一次性释放所有已注册的响应式副作用和依赖关系

例如：

const scope = effectScope()
scope.run(() => {
  const data = ref(null)
  watch(source, v => data.value = v)
  const doubled = computed(() => data.value * 2)
})
// …… 任意时机调用
scope.stop() // watch 停止监听，computed 不再更新，内存可回收

组合式函数中封装自销毁逻辑

在 useXxx 函数里创建 scope，让副作用“自带销毁能力”，调用方无需关心内部细节：

函数内部创建 effectScope()，并在 run 中定义响应式逻辑和清理项
用 onScopeDispose 注册非响应式资源的清理（如 clearInterval、removeEventListener）
可选择返回一个 stop 方法，或直接在 onUnmounted / 条件判断中调用 scope.stop()

例如轮询 Hook：

Vue

避免 Vue 常见错误——响应式陷阱、ref 与 reactive 区别、计算属性时机及 Composition API 陷阱。

下载

export function usePolling(url, interval = 5000) {
  const scope = effectScope()
  const data = ref(null)
  scope.run(() => {
    const timer = setInterval(async () => {
      data.value = await (await fetch(url)).json()
    }, interval)
    onScopeDispose(() => clearInterval(timer))
    watch(data, console.log)
  })
  return { data, stop: () => scope.stop() }
}

嵌套与独立作用域的控制逻辑

作用域默认形成树状结构，生命周期天然联动：

子 scope 不传参创建（effectScope()），会自动挂载到当前活跃父 scope 的 scopes 数组中；父 stop() 时子自动停止
传 true 创建 detached 作用域（effectScope(true)），完全独立，不注册到父 scope，适合跨组件共享或长期驻留逻辑（如全局消息总线、后台同步服务）

注意：detached 作用域不会被任何外部 stop() 影响，必须由你主动调用其自身的 stop()。