0Pricing
Vue Academy · Lesson

effectScope for Grouped Effects

effectScope(), running watchers and computed in a scope, scope.stop() for cleanup.

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()

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