序文誰もが 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インデックスに関する重要な面接の質問をいくつか共有します
まず、データベース テーブルを作成します。 テーブル `t_demo` を作成します ( `id` ...
水平方向では、行の配置を左、中央、右に設定できます。基本的な構文<TR ALIGN="...
この記事では、画像ウォーターフォールフローを実現するためのJSの具体的なコードを参考までに共有します...
単一のテーブルをエクスポートするmysqldump -u ユーザー -p db名 テーブル名 >...
最近Bステーションでスマートアンチブロッキング弾幕と呼ばれる弾幕エフェクトを見ました。これは伝説のマ...
序文世界最高の Web サーバーの 1 つである Nginx の利点は明らかです。 Nginx がリ...
同じ関数や HTML コードが複数回使用される場合は、それらをコンポーネントに抽出することを検討でき...
概要私たちは、双十一に天猫で化粧品を購入する人の平均支出額を知りたい(商品の価格帯を見つけるのに役立...
1. VPSとCentOSシステムを購入しましたが、サーバーの時間が北京時間と一致せず、時差があるこ...
これはかなり前に書かれた記事です。今となっては、その中の考え方は学ぶ価値があるように思えます。jb5...
1.html <div class="ログインボディ"> <...
nginx の設定は次のとおりです。 http://172.17.188.27/wgcloud など...
序文デフォルトでは、MySQL はデータベース クエリ データをキャッシュするために大きなメモリ ブ...
この記事では、例を使用して、MySQL ストアド プロシージャの原理と使用方法を説明します。ご参考ま...
MySQL チューニング ツールの詳細な説明と実践的な演習の説明 ツールの紹介の説明 分析例の説明...