Vue3でのEffectScopeの使い方

Vue バージョン 3.2 では、新しいエフェクト スコープ API が導入されています。effectScope を使用してエフェクト スコープを作成すると、その中で作成されたリアクティブな副作用 (つまり、計算されたプロパティとリスナー) をキャプチャできるため、キャプチャされた副作用をまとめて処理できます。 getCurrentScope メソッドを使用して、現在アクティブなエフェクト スコープを取得できます。現在アクティブなエフェクト スコープにハンドラー コールバック関数を登録するには、onScopeDispose を使用します。このコールバック関数は、関連するエフェクト スコープが停止したときに呼び出されます。

const scope = effectScope()

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

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

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

// 处理掉当前作用域内的所有 effect
scope.stop()

Vue のセットアップでは、初期化の開始時に応答が収集されますが、インスタンスをアンインストールすると、応答は自動的に追跡されなくなるため、非常に便利な機能です。

ただし、コンポーネントの外で使用したり、別のパッケージを作成したりする場合、これは非常に面倒になる可能性があります。計算されたものと別のファイルで監視するものに対するリアクティブな依存関係を削除するにはどうすればよいですか?

サンプル コード、参考リンク

const disposables = []

const counter = ref(0)
const doubled = computed(() => counter.value * 2)

disposables.push(() => stop(doubled.effect))

const stopWatch2 = watchEffect(() => {
  console.log(`counter: ${counter.value}`)
})

disposables.push(stopWatch2)

const stopWatch3 = watch(doubled, () => {
  console.log(doubled.value)
})

disposables.push(stopWatch3)

上記のコードでは、computed と watch の合計 3 つの応答依存関係を記述し、これらの応答依存関係の stopHandle を配列に格納しました。これは、将来必要になったときに、次のようにすべての応答を直接停止できるように、この配列を維持する必要があることを意味します。

disposables.forEach((f) => f())
disposables = []

特に、いくつかの複雑な組み合わせ関数コードを扱う場合、すべてのリアクティブな依存関係を手動で収集するのは面倒です。合成関数で作成されたリアクティブな依存関係にアクセスできない場合、依存関係の収集は忘れられやすく、メモリ リークや予期しない動作が発生する可能性があります。

この機能は、コンポーネントの setup() 応答依存関係収集および処理関数を、コンポーネント モデルの外部で再利用できるより一般的な API に抽象化する試みです。

また、コンポーネントの setup() スコープまたはユーザー定義スコープから「分離された」エフェクトを作成する機能も提供します。

この関数はどのような問題を解決しますか?

// global shared reactive state
let foo

function useFoo() {
  if (!foo) { // lazy initialization
      foo = ref()
      watch(foo, ...) // <- this is stopped when component that created it is unmounted
      // make some http calls etc
  }
  return foo
}

component1 = {
    setup() {
        useFoo() // lazily initialize
    }
}

component2 = {
    setup() {
        useFoo() // lazily initialize
    }
}

複数のコンポーネント間で機能を共有する合成関数があります。問題は、component1 という最初のコンポーネントが useFoo のリアクティブな依存関係を停止するときです。グローバル変数 foo に対する進行中の影響は他のコンポーネントへの呼び出しに影響を与えるため、この影響を停止する必要があります。

以上がVue3でのEffectScopeの使い方の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。