Effect Scope API 3.2+

effectScope

Creates an effect scope object which can capture the reactive effects (e.g. computed and watchers) created within it so that these effects can be disposed together.

Typing:

function effectScope(detached?: boolean): EffectScope

interface EffectScope {
  run<T>(fn: () => T): T | undefined // undefined if scope is inactive
  stop(): void
}

Example:

const scope = effectScope()

scope.run(() => {
  const doubled = computed(() => counter.value * 2)

  watch(doubled, () => console.log(doubled.value))

  watchEffect(() => console.log('Count: ', doubled.value))
})

// to dispose all effects in the scope
scope.stop()

getCurrentScope

Returns the current active effect scope if there is one.

Typing:

function getCurrentScope(): EffectScope | undefined

onScopeDispose

Registers a dispose callback on the current active effect scope. The callback will be invoked when the associated effect scope is stopped.

This method can be used as a non-component-coupled replacement of onUnmounted in reusable composition functions, since each Vue component's setup() function is also invoked in an effect scope.

Typing:

function onScopeDispose(fn: () => void): void