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を組み合わせる問題を解決する
問題の説明 (環境: windows7、MySql8.0)今日、MySql をインストールした後、M...
目次1. MySQLでよく使われる文字列関数2. 数値関数3. 日付と時刻の機能4. プロセス機能5...
目次React Hooks に基づく状態共有の実装ユーザーエクスペリエンスこの記事では、主に Rea...
序文Oracle や SQL Server などのデータベースには、ストレージ エンジンが 1 つだ...
今日、私はプロジェクトの移行の問題に取り組んでいましたが、突然、大量の写真をどうやって移動したらよい...
通常、開発プロセスでは、インターフェイス要求の成功または失敗は httpcode に基づいて決定され...
MYSQL におけるグループ化とリンクは、データベースの操作やデータのやり取りで最もよく使用される ...
ミラーリングも Docker のコアコンポーネントの 1 つです。ミラーリングはコンテナ操作の基盤で...
目次同一起源ポリシーAjax リクエストの制限: Ajaxは自身のサーバーにのみリクエストを送信でき...
場合によっては、データ内のデータを再利用する必要がありますが、データ内のデータはさまざまなフォーム、...
伝統的な方法は、正方形を固定形式で書くことです。長さ=幅を直接書き、次のように固定値を書きます。 。...
この記事の例では、文字の出現回数をカウントするJavaScriptの具体的なコードを参考までに共有し...
最近、データライフサイクル管理の詳細を整理していたときに、小さな問題を発見しました。それは、MySQ...
vsftpd の概要vsftpd は「very secure FTP daemon」の略称で、セキ...
セル - 表の内容 セルの余白 (表の余白) (cellpadding) - セルの外側の距離を表し...