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 クライアントが数秒で終了する問題を解決する (my.ini が見つからない)

問題の説明 (環境: windows7、MySql8.0)今日、MySql をインストールした後、M...

MySQL関数の包括的な概要

目次1. MySQLでよく使われる文字列関数2. 数値関数3. 日付と時刻の機能4. プロセス機能5...

React Hooks に基づく小さな状態管理の詳細な説明

目次React Hooks に基づく状態共有の実装ユーザーエクスペリエンスこの記事では、主に Rea...

MySQL InnoDBエンジンのインデックスとストレージ構造の詳細な説明

序文Oracle や SQL Server などのデータベースには、ストレージ エンジンが 1 つだ...

2つのLinuxサーバー間でファイルとフォルダを転送する手順

今日、私はプロジェクトの移行の問題に取り組んでいましたが、突然、大量の写真をどうやって移動したらよい...

nestjs からフロントエンドに返されるデータ形式のカプセル化実装

通常、開発プロセスでは、インターフェイス要求の成功または失敗は httpcode に基づいて決定され...

MySQLグループリンクの使用に関する詳細な説明

MYSQL におけるグループ化とリンクは、データベースの操作やデータのやり取りで最もよく使用される ...

Docker イメージ管理の一般的な操作コード例

ミラーリングも Docker のコアコンポーネントの 1 つです。ミラーリングはコンテナ操作の基盤で...

相同性とクロスドメイン、jsonp(関数カプセル化)、CORS原則の詳細な分析

目次同一起源ポリシーAjax リクエストの制限: Ajaxは自身のサーバーにのみリクエストを送信でき...

Vueはデータを初期状態にリセットします

場合によっては、データ内のデータを再利用する必要がありますが、データ内のデータはさまざまなフォーム、...

CSSを使用してアダプティブスクエアを実装する方法の例

伝統的な方法は、正方形を固定形式で書くことです。長さ=幅を直接書き、次のように固定値を書きます。 。...

JavaScriptは文字の出現回数をカウントします

この記事の例では、文字の出現回数をカウントするJavaScriptの具体的なコードを参考までに共有し...

MySQL主キー命名戦略関連

最近、データライフサイクル管理の詳細を整理していたときに、小さな問題を発見しました。それは、MySQ...

Linux の vsftpd サービス構成の簡単な分析 (匿名、ユーザー、仮想ユーザー)

vsftpd の概要vsftpd は「very secure FTP daemon」の略称で、セキ...

HTML のセルパディングとセルスペース属性を図で説明します

セル - 表の内容 セルの余白 (表の余白) (cellpadding) - セルの外側の距離を表し...