Vue Academy · レッスン

グループ化したエフェクトのためのeffectScope

effectScope()、スコープ内でのwatcherとcomputedの実行、クリーンアップ用のscope.stop()

レッスン 4/413 ステップ

「グループ化したエフェクトのためのeffectScope」はCoddyKit上の無料Vue Academyレッスンです。これはレッスン4/4です。下記で完全なレッスンを無料で読むことができます。その後、ブラウザ内の組み込みコードエディタと24時間対応のAIチューターでハンズオン演習できます。これはVue Academy学習パスの一部であり、ウェブとCoddyKitアプリ全体で進捗が同期されます。 Vue Academyコースには全4レッスンが含まれています。

クリーンアップの問題

コンポーネントのsetupの外部で作成されたウォッチャーやcomputedは、自動的には破棄されません。単独で使用するコンポーザブルやプラグインレベルのコードでは、エフェクトがリークする可能性があります。effectScopeを使うとエフェクトをまとめて、まとめてクリーンアップできます。

effectScopeの動作

effectScope()は、実行中に作成されたリアクティブエフェクト（ウォッチャーやcomputed）を捕捉するスコープを作成します。後からスコープを停止すると、それらを一度にすべて破棄できます。

import { effectScope } from "vue"

const scope = effectScope()

runでエフェクトを収集する

scope.run(fn)を呼び出し、fnの内部でウォッチャーやcomputedを作成します。その呼び出し中に作成されたすべてのエフェクトがスコープに登録されます。

import { effectScope, ref, watch, computed } from "vue"

const scope = effectScope()
scope.run(() => {
  const count = ref(0)
  const doubled = computed(() => count.value * 2)
  watch(count, (v) => console.log(v))
})

スコープを停止する

scope.stop()を1回呼び出すだけで、スコープ内で作成されたすべてのウォッチャーとcomputedを停止できます。各stopハンドルを個別に追跡する必要はありません。

scope.stop() // disposes all watchers and computed at once

これが重要な理由

スコープがない場合は、各ウォッチャーのstopハンドルを取得して、1つずつ呼び出す必要があります。エフェクトが多いと、これはエラーの原因になりやすくなります。スコープを使えば、N個のクリーンアップを1つにまとめられます。

// without scope: must track each
const stop1 = watch(a, fn)
const stop2 = watch(b, fn)
// stop1(); stop2(); ... easy to forget one

ネストしたスコープ

スコープはネストできます。親の内部で作成された子スコープは、親が停止すると自動的に停止するため、階層的なクリーンアップをそのまま利用できます。

const parent = effectScope()
parent.run(() => {
  const child = effectScope() // stopped when parent stops
  child.run(() => watch(/* ... */))
})
parent.stop() // stops child too

分離されたスコープ

trueを渡すと、周囲の親スコープに収集されない分離されたスコープを作成できます。ライフタイムを独立して制御したい場合に使用します。

const scope = effectScope(true) // detached
// must be stopped manually; parent stop will not reach it

ユースケース：プラグインレベルのサブスクリプション

よくある用途は、単一のコンポーネントの外部で動作する、プラグインまたはアプリレベルのリアクティブなサブスクリプションです。たとえば、ストアの内容をlocalStorageと同期する処理です。アプリの終了時に停止するスコープにまとめます。

const appScope = effectScope()
appScope.run(() => {
  watch(store.state, persistToLocalStorage, { deep: true })
})
// on app shutdown: appScope.stop()

再利用可能な破棄可能オブジェクトを作る

コンポーザブルで独自のスコープを作成し、内部のエフェクトをまとめて、単一のdisposeを公開できます。呼び出し側は1回の呼び出しですべてをクリーンアップできます。

export function useTracker() {
  const scope = effectScope()
  scope.run(() => {
    watch(/* ... */)
  })
  return { dispose: () => scope.stop() }
}

スコープとコンポーネント

コンポーネントのsetup内部では、Vueがコンポーネントのライフサイクルに結び付いた暗黙のスコープをすでに実行しています。そのため、コンポーネントのウォッチャーはアンマウント時に自動的にクリーンアップされます。effectScopeを使えば、コンポーネントの外部でも同じ機能を利用できます。

getCurrentScopeとonScopeDispose

スコープ内では、onScopeDispose(fn)を使ってクリーンアップを登録できます。これはスコープが停止したときに実行され、任意のスコープで使えるonUnmountedに相当します。

import { onScopeDispose } from "vue"

scope.run(() => {
  const id = setInterval(tick, 1000)
  onScopeDispose(() => clearInterval(id))
})

確認テスト

effectScopeについての理解度を確認します。

対話的なレッスンで答える

まとめ

エフェクトをまとめるeffectScopeについて学びました。

effectScope()は、内部で作成されたエフェクトを捕捉するスコープを作成します。
scope.run(fn)は、fn内で作成されたウォッチャーやcomputedを収集します。
scope.stop()ですべてを一度に破棄できます。ネストしたスコープは親とともに停止し、trueを使うと分離されたスコープになります。
onScopeDispose(fn)は、停止時に実行されるクリーンアップを登録します。
コンポーネント外部のコンポーザブルやプラグインレベルのリアクティブなサブスクリプションに最適です。

無料で開始

AI チューターと学ぶ HTML — 無料

ブラウザでリアルコードを書いて実行し、24/7 の AI チューターから瞬時にサポートを受け、ウェブまたはアプリで続きから学習できます。

コース: 42
レッスン: 156

無料で学習を始めるコース全体を表示

よくある質問

「グループ化したエフェクトのためのeffectScope」レッスンは無料ですか？

はい。「グループ化したエフェクトのためのeffectScope」の完全なテキストはこのウェブで無料で読めます。インタラクティブに演習し（組み込みコードエディタと24時間対応のAIチューター）、Vue Academyコースの残りをアンロックするには、CoddyKit PROにアップグレードしてください。 Vue Academyコースには全4レッスンが含まれています。

「グループ化したエフェクトのためのeffectScope」で何を学びますか？

effectScope()、スコープ内でのwatcherとcomputedの実行、クリーンアップ用のscope.stop() ブラウザで直接実行するハンズオンコードでVue Academyを演習し、24時間対応のAIチューターがレッスンを進める中での質問に答えます。

Vue Academyを始めるのに経験は必要ですか？

事前経験は必要ありません。CoddyKitのVue Academyは初級者から上級者向けに構成されているため、ここから始めるか最初から始めて、自分のペースで進むことができます。これはレッスン4/4です。

「グループ化したエフェクトのためのeffectScope」レッスンにはどのくらい時間がかかりますか？

ほとんどのCoddyKitレッスンは約5～10分かかります。各レッスンはコンパクトでインタラクティブなので、着実に進歩し、ウェブとアプリ全体で正確に前回の場所から再開できます。

このVue Academyレッスンでコードを書いて実行できますか？

はい。すべてのVue Academyレッスンに組み込みコードエディタが含まれているため、ブラウザでリアルコードを書いて実行し、即座のAIフィードバックを取得できます。ローカル設定は不要です。

このコースのすべてのレッスン

← Vue Academyに戻る