0Pricing
Vue Academy · Lesson

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 — lesson 4 of 4. You can read the complete lesson below for free — then practise it hands-on in the browser with a built-in code editor and a 24/7 AI tutor. It is part of the Vue Academy learning path, one of 4 lessons in the course, and your progress syncs across the web and the CoddyKit app.

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 once

Why 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 one

Nested 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 too

Detached 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 it

Use 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 in fn.
  • scope.stop() disposes them all at once; nested scopes stop with their parent (use true for detached).
  • onScopeDispose(fn) registers cleanup that runs on stop.
  • Ideal for composables and plugin-level reactive subscriptions outside components.

Frequently asked questions

Is the “effectScope for Grouped Effects” lesson free?

Yes — the full text of “effectScope for Grouped Effects” is free to read here on the web, and the Vue Academy course includes 4 lessons in total. To practise it interactively (a built-in code editor and a 24/7 AI tutor) and unlock the rest of the Vue Academy course, upgrade to CoddyKit PRO.

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; this is — lesson 4 of 4, so you can start here or from the beginning and move at your own pace.

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

  1. Advanced Reactivity: shallowRef and triggerRef
  2. Composable Factories and Parameterized Composables
  3. State Machines with XState in Vue
  4. effectScope for Grouped Effects
← Back to Vue Academy