effectScope() Group Effects into a Scope
Last updated: 2026-10-22
effectScope() Group Effects into a Scope
effectScope() groups watchers and computed into one scope that starts and stops as a unit — no per-effect stop bookkeeping.
| Group | Reactivity: Advanced |
|---|---|
| Kind | API |
| Scope | Component |
| Vue Version | 3.0+ |
| SSR Support | Yes |
📝 Syntax
const scope = effectScope()
scope.run(() => {
watch(a, fn)
watchEffect(fn2)
})
scope.stop() // stops every effect inside⚙️ Arguments
| detached | true detaches from the parent scope (default false) |
|---|
Returns：A scope with run, stop, on, off, pause and resume
▶ Example
Edit the code below and see the live result:
Output：
Both logs follow changes until stopAll() is clicked, then neither updates.💡 Key Points
💡 Tip Use it in composables so callers hold a single handle to dispose everything.
ℹ️ Note Effects attach to the component scope by default; detached scopes outlive components.
⚠️ Warning Only effects created inside run() belong to the scope.
🏷️ Related Advanced
💡 Related Cases
More case studies coming soon.
📚 Related Tutorials
❓ FAQ
Q Can I skip it?
A Fine for one effect; scopes cut boilerplate when managing many.
Q When to use detached?
A For state that outlives components, such as store internals.
Q Can it be paused?
A 3.4+ adds pause()/resume() for all effects in the scope.
