序文誰もが vue2 の watch API に精通している必要があります。vue2 の vue インスタンスには $watch メソッドがあり、sfc (署名ファイル コンポーネント) には watch オプションがあります。プロパティが変更されたときに目的の動作を実行するために使用できます。例えば:
しかし、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 上級監視を停止 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 をよろしくお願いいたします。 以下もご興味があるかもしれません:
|
<<: Linux での screen コマンドの使用方法の詳細な説明
>>: MySQLインデックスに関する重要な面接の質問をいくつか共有します
シナリオ: ページAがページBを開くと、ページBで操作した後、ページAは変更されたデータを同期する必...
序文MySQL クラスターを構築する場合、当然のことながら、データの一貫性を確保するために、データベ...
最近、個人の Web サイトに非常にシンプルなカラー スキーム (テーマ) スイッチャーを追加しまし...
HTML onfocus イベント属性定義と使用法onfocus 属性は、要素がフォーカスを受け取っ...
ある設計士はこう尋ねた。「実際のプロジェクト制作には参加せずに、純粋に設計だけをすることはできますか...
一般的な Dockerfile 命令の紹介命令説明するから新しいイメージが構築される基となるイメージ...
前回の記事では、beforeとafterの擬似要素を使用してMaterial Designスタイルの...
<br />インターネット上の無数の情報は基本的に HTML ドキュメントで構成されてお...
目次1. JSの特徴1.1 マルチパラダイム1.2 説明1.3 シングルスレッド1.4 ノンブロッキ...
方法1: lsofコマンドを使用するlsof コマンドを使用して、ポートが開いているかどうかを確認で...
目次序文文章1. JavaScriptコードの実行プロセスに関連する概念2. 実行コンテキストと実行...
フロントエンドプロジェクトのパッケージ化.env.productionを見つけて、自分のIPまたはド...
chmod コマンド構文chmod コマンドを使用する場合の正しい構文は次のとおりです。 chmod...
リンクのターゲット属性は、リンクが開く場所を決定します。その値は通常、_blank、_self、_p...
1. 準備1.1 VMware 15 をダウンロードしてインストールするダウンロード リンク: h...