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

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 をよろしくお願いいたします。

以下もご興味があるかもしれません:
  • vue3 watch と watchEffect の使い方と違い
  • VUE3 での watch と watchEffect の使い方の詳細な説明
  • vue3 の watch と watchEffect についてご存知ですか?
  • Vue3 における watchEffect の具体的な使用法についての簡単な説明
  • vue3 の watch と watchEffect の詳細な例

<<:  Linux での screen コマンドの使用方法の詳細な説明

>>:  MySQLインデックスに関する重要な面接の質問をいくつか共有します

推薦する

MySQLの場合の使用例分析

まず、データベース テーブルを作成します。 テーブル `t_demo` を作成します ( `id` ...

HTML テーブルタグチュートリアル (24): 行の水平方向の配置属性 ALIGN

水平方向では、行の配置を左、中央、右に設定できます。基本的な構文<TR ALIGN="...

JSは画像の滝の流れの効果を実現します

この記事では、画像ウォーターフォールフローを実現するためのJSの具体的なコードを参考までに共有します...

MySQL 全体または単一のテーブルデータのエクスポート

単一のテーブルをエクスポートするmysqldump -u ユーザー -p db名 テーブル名 >...

CSS3はマスク連打機能を実現する

最近Bステーションでスマートアンチブロッキング弾幕と呼ばれる弾幕エフェクトを見ました。これは伝説のマ...

Nginx はリクエスト接続を統合し、ウェブサイトのアクセス例を高速化します

序文世界最高の Web サーバーの 1 つである Nginx の利点は明らかです。 Nginx がリ...

オブジェクト指向の観点から Vue コンポーネントを理解するための簡単な分析

同じ関数や HTML コードが複数回使用される場合は、それらをコンポーネントに抽出することを検討でき...

MySQL グループ化クエリと集計関数

概要私たちは、双十一に天猫で化粧品を購入する人の平均支出額を知りたい(商品の価格帯を見つけるのに役立...

CentOS サーバーの時間を北京時間に変更する方法

1. VPSとCentOSシステムを購入しましたが、サーバーの時間が北京時間と一致せず、時差があるこ...

XHTML+CSS Web ページ作成における美しいスタイルシートの適用

これはかなり前に書かれた記事です。今となっては、その中の考え方は学ぶ価値があるように思えます。jb5...

CSS ボーダーは四隅の実装コードを追加します

1.html <div class="ログインボディ"> <...

nginx を使用して wgcloud へのアクセスを構成する方法

nginx の設定は次のとおりです。 http://172.17.188.27/wgcloud など...

MySql でメモリ使用量を削減する方法の詳細な説明

序文デフォルトでは、MySQL はデータベース クエリ データをキャッシュするために大きなメモリ ブ...

MySQL ストアド プロシージャの原理と使用法の詳細な説明

この記事では、例を使用して、MySQL ストアド プロシージャの原理と使用方法を説明します。ご参考ま...

MysqlチューニングExplainツールの詳細な説明と実践的な演習(推奨)

MySQL チューニング ツールの詳細な説明と実践的な演習の説明 ツールの紹介の説明 分析例の説明...