ウォッチエフェクトとは

本人github

watchEffectは、Vue 3 の複合 API 関数であり、関数を即座に実行し、その依存関係を応答的に追跡するために使用されます。依存関係 (リアクティブ参照または計算プロパティ) が変更されると、関数は自動的に再実行されます。

これは Vue 2 とは多少異なりますwatch。watch通常、単一のリアクティブ プロパティまたは計算されたプロパティを観察するために使用されますが、watchEffect複数のリアクティブな依存関係は自動的に追跡できます。

基本的な使い方

import {
    
     ref, watchEffect } from 'vue';

export default {
    
    
  setup() {
    
    
    const count = ref(0);
    const doubled = ref(0);

    watchEffect(() => {
    
    
      console.log(`count is: ${
      
      count.value}`);  // 自动追踪 count
      doubled.value = count.value * 2;  // 自动追踪 doubled
    });

    return {
    
    
      count,
      doubled
    };
  }
}

この例では、watchEffectすぐに 1 回実行され、変更されるたびに再実行されcountますdoubled。

観察をやめる

watchEffect観察を停止する関数を返します。この関数を呼び出して観察を停止できます。

const stopWatch = watchEffect(() => {
    
    
  // 你的代码
});

// 停止观察
stopWatch();

とのwatch比較

• watchEffectすべてのリアクティブな依存関係を自動的に追跡するため、より自動化され便利になります。
• watch単一のリアクティブ参照または計算されたプロパティを観察し、古い値と新しい値を提供できるため、より柔軟です。

どちらを選択するかは、特定のニーズによって異なります。より多くの制御と柔軟性が必要な場合は、 を選択することもできますwatch。よりシンプルで自動のソリューションが必要な場合は、これのwatchEffect方が適しているかもしれません。