vue2のキャッシュ機能vue2版にはこのようなキャッシュ機能がある /** * 純粋関数のキャッシュバージョンを作成します。 */ 関数キャッシュ(fn){ var キャッシュ = Object.create(null); 戻り値 (関数 cachedFn (str) { var ヒット = キャッシュ[str]; ヒットを返す || (cache[str] = fn(str)) }) } 上記の関数には、配列があり、各要素の最初の文字を大文字に変換する必要があるなどの一般的なシナリオがあります。 const配列 = ['abc', 'ed', 'abc', 'acd', 'ed', 'fkg', ...]; 一般的な解決策 // 大文字化関数を定義する function capitalize (str) { str.charAt(0).toUpperCase() + str.slice(1) を返す }; const capitalizeArray = array.map(大文字化); よく見ると、配列には重複する要素がたくさんあることがわかります。それらは同じ結果を返します。実際、capitalize を実行するために計算を繰り返す必要はありません。さらに、capitalize は PURE 関数です。このとき、上記のキャッシュされた関数を使用してメモを作成できます。 変換は次のようになります 関数 capitalize(str) { str.charAt(0).toUpperCase() + str.slice(1) を返す }; const capitalizeArray = array.map(cached(capitalize)); 重複する文字列が見つかった場合、キャッシュされた結果が直接返されます。大文字化は非常に時間のかかる作業であり、パフォーマンスの最適化にはそれ以上の作業が必要であることを考慮してください。 Vue キャッシュ関数の変換上記の例は、キャッシュ同期タスクの純粋な機能です。ビジネス開発では、入力ボックスの検索などのシナリオがあります。入力ボックスが入力イベントをトリガーすると、インターフェイスを呼び出してクエリ結果を返します。たとえば、キーワード「Nuggets」を入力すると結果が返され、次に「Nuggets NBA」と入力すると結果が返されました。このとき、NBAを削除して再度「Nuggets」を検索しました。実は、この結果は以前にも確認しています。キャッシュされている場合は、インターフェイスを再度呼び出さずに直接キャッシュをプルできます。 キャッシュに基づいて非同期純粋関数をキャッシュするためのメモを実装します const cachedAsync = function(fn) { const キャッシュ = Object.create(null); 非同期strを返す => { const ヒット = キャッシュ[str]; (ヒット)の場合{ リターンヒット; } // 成功した Promise のみをキャッシュし、失敗した場合は直接戻りを再度要求します (cache[str] = await fn(str)); }; }; 使用シナリオ const cachedAsyncQueryPrdList = cachedAsync(prdNo => { // 以下はリクエスト操作であり、Promiseを返します queryPrdList を返します({ いいえ }); }); <テンプレート> <el-input v-model="prdNo" placeholder="製品コードを入力してください" @input="handleQueryPrdList" /> <el-選択> <el-option v-for="prdList 内の項目" :label="item.label" :value="item.value"> </el-select> </テンプレート> <スクリプト> エクスポートデフォルト{ データ() { 製造番号: ''、 prdリスト: [], }, メソッド: { 非同期handleQueryPrdList() { const {データ} = cachedAsyncQueryPrdList(this.prdNo); this.prdList = データ; } } } </スクリプト> 上記の実装は、同じキーワードが入力されたときに、前回のリクエストが成功した場合は、サーバーに新しいリクエストを行わずにキャッシュが直接取得されることを意味します。メモは成功したプロミスのみをキャッシュするためです。 最適化上記のシナリオでは、el-input の基になるレイヤーが、手ぶれ防止レイヤーを実行するために、compositionEnd イベントと compilationStart イベントを使用していますが、入力イベントは、テキストが実際に画面に入力されたときにのみトリガーされます。しかし、これだけでは十分ではありません。ユーザーが非常に速く入力すると、1 秒あたりに複数のリクエストが送信され、サーバーの負荷が増大する可能性があります。そのため、このタイプの機能は、通常、手ぶれ補正機能と組み合わせて使用されます。 手ぶれ防止機能 定数デバウンス = (fn, ms = 300) => { タイムアウトIdを設定します。 関数(...引数)を返す{ タイムアウトをクリアします(タイムアウトId); timeoutId = setTimeout(() => fn.apply(this, args), ms); }; }; 次にそれをcachedAsyncで使用します const cachedAsyncQueryPrdList = cachedAsync(prdNo => { // 以下は、Promiseを返すAjaxリクエスト操作です queryPrdList を返します({ いいえ }); }); <テンプレート> <el-input v-model="prdNo" placeholder="製品コードを入力してください" @input="debounceQueryPrdListFn" /> <el-選択> <el-option v-for="prdList 内の項目" :label="item.label" :value="item.value"> </el-select> </テンプレート> <スクリプト> 定数 noop = () => {}; エクスポートデフォルト{ データ() { 製造番号: ''、 prdリスト: [], debounceQueryPrdListFn: 何もしない、 }, 作成された() { this.debounceQueryPrdListFn = debounce(this.handleQueryPrdList); }, メソッド: { 非同期handleQueryPrdList() { const {データ} = cachedAsyncQueryPrdList(this.prdNo); this.prdList = データ; } } } </スクリプト>
この実装は実稼働環境でも安定的に使用されており、安心してご利用いただけます。 要約するVue キャッシュ機能の使い方についてはこれで終了です。Vue キャッシュ機能の使い方についてさらに詳しく知りたい方は、123WORDPRESS.COM の過去の記事を検索するか、以下の関連記事を引き続きご覧ください。今後とも 123WORDPRESS.COM をよろしくお願いいたします。 以下もご興味があるかもしれません:
|
<<: Tomcat イメージをインストールして Docker に Web プロジェクトをデプロイする方法を簡単に説明します。
>>: MySQLでANDとORを組み合わせる問題を解決する
目次事件の原因解剖学ファイルの並べ替えファイルのソートが非常に遅いのですが、他に解決策はありますか?...
<br />ソース コード内で表の構造を明確に区別するために、HTML 言語では、表のヘ...
目次MySQLがmy.cnfを読み込む順序1. mysql.server の起動方法2. mysql...
Apollo オープンソース アドレス: https://github.com/ctripcorp/...
上の境界線のみを表示する <table frame=above>下の境界線のみを表示する...
序文Linux では「すべてがファイル」であることは誰もが知っているので、ファイルのオープン状態を確...
目次序文vue.config.js 構成オプションパッケージサイズを縮小するためのパッケージの最適化...
CSS3 では、transform 関数を使用して、テキストや画像の回転、拡大縮小、傾斜、移動という...
CSS3以前は、グラデーション画像は背景画像としてのみ使用できました。 CSS3 のグラデーション構...
セルデルとは何かuserdel は、ユーザーを削除するための低レベルのツールです。 Debian で...
この記事では、Dockerを使用してMySQLデータベースとリモートアクセス構成をデプロイする方法を...
Dockerでdocker search centosを使用する場合docker pull dock...
目次[例を見る]: 【本来の効果は以下の通り】理由は次のとおりです。 【解決】:要約するBootSt...
MySQL をインストールした後、DOS ウィンドウまたは MySQL 5.7 コマンドライン クラ...
Web ページ制作では、input と img が同じ行に配置されることが多く、img タグが常に ...