effectScope() 批量管理副作用作用域

最后更新：2026-10-22

effectScope() 创建一个作用域，把多个侦听器/计算属性收在一起统一启动与停止，避免逐个管理 stop 函数。

📝 语法

const scope = effectScope()
scope.run(() => {
  watch(a, fn)
  watchEffect(fn2)
})
scope.stop()   // 一次性停掉作用域内全部副作用

detached	true 时脱离父作用域（默认 false，随父一起停止）

返回值：作用域对象：run(cb) / stop() / on() / off() / pause() / resume()

修改下面的代码，在预览区实时查看效果：

输出：

停止前两个日志都跟随变化；点 stopAll 后两个都不再更新。

💡 提示 写组合式函数时用它：调用方只拿一个 stop/作用域句柄即可整体销毁。

ℹ️ 说明 组件内默认挂在组件作用域下；detached: true 可跨组件独立存活。

⚠️ 注意 scope 内的 computed/watch 只有在该 scope 运行时创建才被收编。

更多案例即将上线。

Q 没有它不行吗？

A 单个侦听器用返回的 stop 即可；多个副作用成组管理时它显著减少样板代码。

Q detached 用在哪？

A 需要跨越组件生命周期的状态管理（如 Pinia 内部）会用它。

Q 能暂停吗？

A 3.4+ 提供 pause()/resume()，可临时挂起作用域内全部副作用。

Web-Tutorial 技术团队

由多位开发者共同维护的编程教程平台。每篇教程由对应领域的开发者编写和审核，确保内容准确可靠。如发现任何问题，欢迎向我们反馈。