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インデックスに関する重要な面接の質問をいくつか共有します

推薦する

js を使用して 2 つの HTML ウィンドウ間で通信する方法

シナリオ: ページAがページBを開くと、ページBで操作した後、ページAは変更されたデータを同期する必...

MySQL マスタースレーブ同期における server-id の例の詳細な説明

序文MySQL クラスターを構築する場合、当然のことながら、データの一貫性を確保するために、データベ...

CSSテーマを簡単に切り替える方法の詳細な説明

最近、個人の Web サイトに非常にシンプルなカラー スキーム (テーマ) スイッチャーを追加しまし...

HTML onfocus gain focus および onblur lose focus イベントの詳細な説明

HTML onfocus イベント属性定義と使用法onfocus 属性は、要素がフォーカスを受け取っ...

デザイン視点技術はデザイン能力の重要な資本である

ある設計士はこう尋ねた。「実際のプロジェクト制作には参加せずに、純粋に設計だけをすることはできますか...

Dockerイメージの作成とプロジェクト全体のワンクリックパッケージングとデプロイ

一般的な Dockerfile 命令の紹介命令説明するから新しいイメージが構築される基となるイメージ...

単一のdivの正多角形変換を実現する純粋なCSS

前回の記事では、beforeとafterの擬似要素を使用してMaterial Designスタイルの...

ハイパーリンクを表示して開く方法

<br />インターネット上の無数の情報は基本的に HTML ドキュメントで構成されてお...

JSの基本概念の詳細な紹介

目次1. JSの特徴1.1 マルチパラダイム1.2 説明1.3 シングルスレッド1.4 ノンブロッキ...

Linuxでポートが開いているかどうかを確認する方法のまとめ

方法1: lsofコマンドを使用するlsof コマンドを使用して、ポートが開いているかどうかを確認で...

js 実行コンテキストとスコープの概要

目次序文文章1. JavaScriptコードの実行プロセスに関連する概念2. 実行コンテキストと実行...

docker を使用して crownblog プロジェクトを Alibaba Cloud にデプロイする方法

フロントエンドプロジェクトのパッケージ化.env.productionを見つけて、自分のIPまたはド...

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

chmod コマンド構文chmod コマンドを使用する場合の正しい構文は次のとおりです。 chmod...

ハイパーリンクを開くターゲットのテスト

リンクのターゲット属性は、リンクが開く場所を決定します。その値は通常、_blank、_self、_p...

Ubuntu 19.04 インストール チュートリアル (画像とテキストの手順)

1. 準備1.1 VMware 15 をダウンロードしてインストールするダウンロード リンク: h...