# エフェクトスコープ 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
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
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