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