Vue3 での watchEffect の使用に関する簡単な分析

序文

誰もが vue2 の watch API に精通している必要があります。vue2 の vue インスタンスには $watch メソッドがあり、sfc (署名ファイルコンポーネント) には watch オプションがあります。プロパティが変更されたときに目的の動作を実行するために使用できます。例えば：

ID が変更されたら、データベースから新しいデータを取得します。
プロパティが変更されたときにアニメーションを実行します。
検索条件が変更された場合は、クエリされたデータを更新します。

しかし、watch API に加えて、vue3 では watchEffect API も追加されました。その使用方法を見てみましょう。

userID の依存関係を収集し、userID が変更されると、watchEffect コールバックが実行されます。

// [ドキュメント](https://v3.vuejs.org/api/computed-watch-api.html#watcheffect) を参考にした例

'vue' から {watchEffect, ref} をインポートします。
設定 （） {
    定数ユーザーID = ref(0)
    watchEffect(() => console.log(ユーザーID))
    タイムアウトを設定する(() => {
      ユーザーID.値 = 1
    }, 1000)

    /*
      * ログ
      * 0 
      * 1
    */

    戻る {
      ユーザーID
    }
 }

時計とどう違うのですか？

まず、サンプルコードから、watchEffect では監視するプロパティを指定する必要がないことがわかります。依存関係は自動的に収集されます。コールバックでレスポンシブプロパティを参照している限り、これらのプロパティが変更されるとコールバックが実行されますが、watch では指定されたプロパティのみを監視して変更を加えることができます (v3 以降では、複数のプロパティを同時に指定できます)。
2 番目のポイントは、watch は新しい値と古い値 (更新前の値) を取得できますが、watchEffect は取得できないことです。
3 つ目のポイントは、watchEffect が存在する場合、コンポーネントが初期化されて依存関係を収集するときに 1 回実行され (computed と同様)、その後、収集された依存関係が変更され、コールバックが再度実行されますが、watch は最初に依存関係を指定するため、コールバックは必要ありません。

それらの違いから、それぞれの長所と短所がわかります。ビジネスニーズに基づいて適切な選択を行うことができます。

watchEffect 上級

監視を停止

watchEffect は次のようにリスナーを停止する関数を返します。

const stop = watchEffect(() => {
  /* ... */
})

// 後で
停止（）

例は、上にリンクされている公式ドキュメントから引用したものです。

watchEffect がセットアップまたはライフサイクルに登録されている場合、コンポーネントがアンマウントされると自動的に停止します。

副作用を無効にする

副作用とは何ですか？予測できないインターフェースリクエストは副作用です。ユーザー ID を使用してユーザーの詳細を照会し、ユーザー ID を監視するとします。ユーザー ID が変更されると、リクエストが開始されます。これは非常に簡単で、ウォッチで実行できます。ただし、データ要求プロセス中にユーザー ID が複数回変更された場合、複数の要求が行われ、最後に返されたデータによって、以前に返されたすべてのユーザー詳細が上書きされます。これはリソースの浪費につながるだけでなく、ウォッチコールバックが実行される順序を保証することもできません。そして、watchEffect を使用するとそれが実現できます。

無効化()

onInvalidate(fn)に渡されたコールバックは、watchEffectが再実行されるか、watchEffectが停止されたときに実行されます。

ウォッチエフェクト(() => {
      // 非同期 API 呼び出し。操作オブジェクトを返します。const apiCall = someAsyncMethod(props.userID)

      onInvalidate(() => {
        // 非同期 API 呼び出しをキャンセルします。
        apiCall.キャンセル()
      })
})

onInvalidate の助けを借りて、上記の状況に対してよりエレガントな最適化を行うことができます。

要約する

Vue3 での watchEffect の使い方についてはこれで終了です。Vue3 watchEffect の使い方についてさらに詳しく知りたい方は、123WORDPRESS.COM の過去の記事を検索するか、以下の関連記事を引き続きご覧ください。今後とも 123WORDPRESS.COM をよろしくお願いいたします。

以下もご興味があるかもしれません: