Vue.js

# Effect Scope API 3.2+

INFO

Effect scope is an advanced API primarily intended for library authors. For details on how to leverage this API, please consult its corresponding RFC (opens new window).

# 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
}
1
2
3
4
5
6

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()
1
2
3
4
5
6
7
8
9
10
11
12

# getCurrentScope

Returns the current active effect scope if there is one.

Typing:

function getCurrentScope(): EffectScope | undefined
1

# 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
1