effectScope for Grouped Effects
effectScope(), running watchers and computed in a scope, scope.stop() for cleanup.
effectScope for Grouped Effects is a free Vue Academy lesson on CoddyKit. This is lesson 4 of 4. Any 3 lessons of this learning path are free to read in full — after that, CoddyKit PRO unlocks every lesson, plus hands-on practice with a built-in code editor and a 24/7 AI tutor. It is part of the Vue Academy learning path, and your progress syncs across the web and the CoddyKit app. The Vue Academy course includes 4 lessons in total.
The Cleanup Problem
Watchers and computed values created outside a component’s setup are not automatically disposed. In composables used standalone, or plugin-level code, you can leak effects. effectScope solves this by grouping effects for collective cleanup.
What effectScope Does
effectScope() creates a scope that captures any reactive effects (watchers, computed) created while it runs. Later you stop the scope to dispose them all at once.
import { effectScope } from "vue"
const scope = effectScope()Collecting Effects with run
Call scope.run(fn) and create your watchers and computed inside fn. Every effect created during that call is registered with the scope.
import { effectScope, ref, watch, computed } from "vue"
const scope = effectScope()
scope.run(() => {
const count = ref(0)
const doubled = computed(() => count.value * 2)
watch(count, (v) => console.log(v))
})Stopping the Scope
scope.stop() stops every watcher and computed created inside the scope in a single call — no need to track each stop handle individually.
scope.stop() // disposes all watchers and computed at onceWhy This Matters
Without a scope you must capture each watcher’s stop handle and call them one by one. With many effects this is error-prone. A scope turns N cleanups into one.
// without scope: must track each
const stop1 = watch(a, fn)
const stop2 = watch(b, fn)
// stop1(); stop2(); ... easy to forget oneNested Scopes
Scopes nest. A child scope created inside a parent is stopped automatically when the parent stops, so you get hierarchical cleanup for free.
const parent = effectScope()
parent.run(() => {
const child = effectScope() // stopped when parent stops
child.run(() => watch(/* ... */))
})
parent.stop() // stops child tooDetached Scopes
Pass true to create a detached scope that is NOT collected by a surrounding parent scope. Use it when you want independent lifetime control.
const scope = effectScope(true) // detached
// must be stopped manually; parent stop will not reach itUse Case: Plugin-Level Subscriptions
A common use is plugin or app-level reactive subscriptions that live outside any single component — e.g. syncing a store to localStorage. Group them in a scope you stop on app teardown.
const appScope = effectScope()
appScope.run(() => {
watch(store.state, persistToLocalStorage, { deep: true })
})
// on app shutdown: appScope.stop()Building a Reusable Disposable
A composable can create its own scope to bundle internal effects and expose a single dispose. Callers clean up everything with one call.
export function useTracker() {
const scope = effectScope()
scope.run(() => {
watch(/* ... */)
})
return { dispose: () => scope.stop() }
}Scopes and Components
Inside a component’s setup, Vue already runs an implicit scope tied to the component lifecycle — that is why component watchers auto-clean on unmount. effectScope gives you that same power outside components.
getCurrentScope and onScopeDispose
Within a scope you can register cleanup with onScopeDispose(fn), which runs when the scope stops — analogous to onUnmounted but for any scope.
import { onScopeDispose } from "vue"
scope.run(() => {
const id = setInterval(tick, 1000)
onScopeDispose(() => clearInterval(id))
})Quick Check
Check your understanding of effectScope.
Recap
You learned effectScope for grouped effects:
effectScope()creates a scope that captures effects created inside it.scope.run(fn)collects the watchers/computed created infn.scope.stop()disposes them all at once; nested scopes stop with their parent (usetruefor detached).onScopeDispose(fn)registers cleanup that runs on stop.- Ideal for composables and plugin-level reactive subscriptions outside components.
Learn HTML with an AI tutor — free
Write and run real code in your browser, get instant help from a 24/7 AI tutor, and pick up where you left off on the web or in the app.
- Courses
- 42
- Lessons
- 156
Frequently Asked Questions
Is the “effectScope for Grouped Effects” lesson free?
Yes — any 3 lessons of the Vue Academy learning path, including “effectScope for Grouped Effects”, are free to read in full here on the web. After that, CoddyKit PRO unlocks every lesson, plus interactive practice with a built-in code editor and a 24/7 AI tutor. The Vue Academy course includes 4 lessons in total.
What will I learn in “effectScope for Grouped Effects”?
effectScope(), running watchers and computed in a scope, scope.stop() for cleanup. You practise Vue Academy with hands-on code you run directly in the browser, and a 24/7 AI tutor answers your questions as you work through the lesson.
Do I need any experience to start Vue Academy?
No prior experience is required. Vue Academy on CoddyKit is structured for beginners through advanced learners, so you can start here or from the beginning and move at your own pace. This is lesson 4 of 4.
How long does the “effectScope for Grouped Effects” lesson take?
Most CoddyKit lessons take about 5–10 minutes. Each one is bite-sized and interactive, so you make steady progress and pick up exactly where you left off across the web and the app.
Can I write and run code in this Vue Academy lesson?
Yes. Every Vue Academy lesson includes a built-in code editor, so you write and run real code right in your browser and get instant AI feedback — no local setup required.
All lessons in this course
- Advanced Reactivity: shallowRef and triggerRef
- Composable Factories and Parameterized Composables
- State Machines with XState in Vue
- effectScope for Grouped Effects