Vue 3 怎么在组合式 API 中使用 effectScope 统一控制多个侦听器的销毁-Vue.js-PHP中文网

effectScope 用于统一管理响应式副作用，需按创建→注入→销毁顺序执行：调用 effectScope() 创建实例，用 scope.run() 包裹副作用，再调用 scope.stop() 统一清理。

vue 3 怎么在组合式 api 中使用 effectscope 统一控制多个侦听器的销毁

在组合式 API 中，effectScope 的核心用途就是把多个响应式副作用（比如 watch、watchEffect、computed）组织进一个可手动控制的容器里，从而用一次 scope.stop() 统一销毁它们，避免逐个维护清理函数。

关键步骤：创建 → 注入 → 销毁

必须按顺序执行三个动作，缺一不可：

调用 effectScope() 创建作用域实例（它本身不执行任何逻辑）
用 scope.run(() => { ... }) 包裹所有要受控的副作用——只有在这里面定义的 watch、watchEffect 等才会被自动收集
调用 scope.stop() 时，内部所有已注册的侦听器立即停止并释放依赖追踪

典型写法：封装成可复用的组合函数

这是最实用的场景。例如封装一个带轮询和状态监听的请求逻辑：

import { effectScope, ref, watch, watchEffect } from 'vue'
<p>export function useDataPolling(url, interval = 5000) {
const scope = effectScope()
const data = ref(null)
const loading = ref(false)</p><p>scope.run(() => {
// 自动归入 scope 的 watch
watch(data, (newVal) => {
console.log('数据更新:', newVal)
})</p><pre class="brush:php;toolbar:false;">// 自动归入 scope 的 watchEffect
watchEffect(async (onInvalidate) => {
  loading.value = true
  const controller = new AbortController()
  onInvalidate(() => controller.abort())

  try {
    const res = await fetch(url, { signal: controller.signal })
    data.value = await res.json()
  } finally {
    loading.value = false
  }
})

// 手动创建的定时器，也可纳入 scope 管理（需配合 onScopeDispose）
const timer = setInterval(() => {}, interval)
onScopeDispose(() => clearInterval(timer))

})

// 暴露主动停止方法 const stop = () => scope.stop()

return { data, loading, stop } }

使用者只需调用 stop()，所有侦听器、定时器、异步请求取消逻辑都会一并清理。