Vueキャッシュ機能の使い方

Vueキャッシュ機能の使い方

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 = データ;
        }
    }
}
</スクリプト>

FBI 警告: >>> cachedAsync 関数は、PURE 関数にのみ適用されます。

この実装は実稼働環境でも安定的に使用されており、安心してご利用いただけます。

要約する

Vue キャッシュ機能の使い方についてはこれで終了です。Vue キャッシュ機能の使い方についてさらに詳しく知りたい方は、123WORDPRESS.COM の過去の記事を検索するか、以下の関連記事を引き続きご覧ください。今後とも 123WORDPRESS.COM をよろしくお願いいたします。

以下もご興味があるかもしれません:
  • Vue プロジェクトでページ キャッシュを強制的にクリアする例
  • Vue プロジェクトでキャッシュを実装するための最適なソリューションの詳細な説明
  • Vue のコンポーネント キャッシュの詳細な説明
  • Vueのコンポーネント情報キャッシュ問題について
  • Vueのページキャッシュの詳細な説明

<<:  Tomcat イメージをインストールして Docker に Web プロジェクトをデプロイする方法を簡単に説明します。

>>:  MySQLでANDとORを組み合わせる問題を解決する

推薦する

MySQL データベースのインデックス順序の詳細な説明

目次事件の原因解剖学ファイルの並べ替えファイルのソートが非常に遅いのですが、他に解決策はありますか?...

HTML テーブルタグチュートリアル (44): テーブルヘッダータグ

<br />ソース コード内で表の構造を明確に区別するために、HTML 言語では、表のヘ...

MySQL が my.cnf を読み込む順序の詳細

目次MySQLがmy.cnfを読み込む順序1. mysql.server の起動方法2. mysql...

CentOS7 で docker を使用して Apollo 構成センターをデプロイする実装

Apollo オープンソース アドレス: https://github.com/ctripcorp/...

表のセル間の境界線/区切り線を非表示にする方法

上の境界線のみを表示する <table frame=above>下の境界線のみを表示する...

Linuxはlsofコマンドを使用してファイルのオープンステータスを確認します

序文Linux では「すべてがファイル」であることは誰もが知っているので、ファイルのオープン状態を確...

vue.config.js からプロジェクト最適化までの vue2.x 構成

目次序文vue.config.js 構成オプションパッケージサイズを縮小するためのパッケージの最適化...

CSS3のtransform属性で実装される4つの機能

CSS3 では、transform 関数を使用して、テキストや画像の回転、拡大縮小、傾斜、移動という...

CSS3 のカラー値 RGBA とグラデーションカラーの使用方法の紹介

CSS3以前は、グラデーション画像は背景画像としてのみ使用できました。 CSS3 のグラデーション構...

userdel コマンドを使用して Linux ユーザーを削除する方法の詳細なチュートリアル

セルデルとは何かuserdel は、ユーザーを削除するための低レベルのツールです。 Debian で...

MySQL (8 および 5.7) の Docker インストール

この記事では、Dockerを使用してMySQLデータベースとリモートアクセス構成をデプロイする方法を...

Dockerコンテナの中国語言語パックの設定の問題を解決する

Dockerでdocker search centosを使用する場合docker pull dock...

BootStrap グリッド間に隙間を残す解決策

目次[例を見る]: 【本来の効果は以下の通り】理由は次のとおりです。 【解決】:要約するBootSt...

MySQLが正常にインストールされたかどうかを確認する方法

MySQL をインストールした後、DOS ウィンドウまたは MySQL 5.7 コマンドライン クラ...

入力テキスト ボックスと画像検証コードの位置合わせの問題 (画像は常に入力より 1 つ上になります)

Web ページ制作では、input と img が同じ行に配置されることが多く、img タグが常に ...