Vue.js

# エフェクトスコープ API 3.2+

INFO

エフェクトスコープは、主にライブラリの作成者を対象とした高度な API です。この API を活用する方法の詳細は、対応する RFC (opens new window) を参照してください。

# effectScope

エフェクトスコープのオブジェクトを生成します。このオブジェクト内で生成されたリアクティブなエフェクト（例：computed や watcher）を補足して、これらのエフェクトを一緒に処理できるようにします。

タイピング:

function effectScope(detached?: boolean): EffectScope

interface EffectScope {
  run<T>(fn: () => T): T | undefined // スコープが非アクティブの場合は undefined
  stop(): void
}
1
2
3
4
5
6

例:

const scope = effectScope()

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

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

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

//　スコープ内のすべてのエフェクトを破棄する
scope.stop()
1
2
3
4
5
6
7
8
9
10
11
12

# getCurrentScope

現在アクティブなエフェクトスコープを返します。

タイピング:

function getCurrentScope(): EffectScope | undefined
1

# onScopeDispose

現在アクティブなエフェクトスコープを破棄するコールバックを登録します。コールバックは関連するエフェクトスコープが停止したときに呼び出されます。

このメソッドは、各 Vue コンポーネントの setup() 関数もエフェクトスコープで呼び出すため、再利用可能に構成された関数の onUnmounted の非結合コンポーネントの代替として使用できます。

タイピング:

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

← Composition API →