キープアライブキャッシュをクリアする方法の詳細なグラフィック説明

キープアライブキャッシュをクリアする方法の詳細なグラフィック説明

オープニングシーン

私のプロジェクトでは、フロントエンドとバックエンドが分離されていません。テクノロジースタックはlayui+vue+jqです。vueは後から導入しました。より良いコンポーネント化のために、ページをコンポーネント化してコードの重複を減らしています。jqページはdom要素を頻繁に取得する必要があるため、ページは非常に冗長です。jqページはコンポーネント化も容易ではなく、ページの機能を抽出してカプセル化することも困難です。そのため、vueを導入しました。最近、マルチページキャッシュという要件を実現する必要があります。左側のメニューバーをクリックすると、右側にページが表示されますが、クリックしたページをキャッシュする必要があります。

これは私が作った簡単な例です

v-for を使用した直接レンダリング

当初、私のアイデアは、配列を設計し、クリックされたコンポーネントがクリックされるたびに配列にプッシュし、v-for を介してカスタム コンポーネントでそれをトラバースすることでした。

クリックするとすべてのコンテンツが追加されることがわかります。このとき、現在のハイライトを表示するにはインデックスが必要であり、一度に 1 ページのみを表示することが要件です。このとき、インデックスを使用して他のページを非表示にする必要があります。

v-forに問題があります。削除すると、配列が変更されるため再レンダリングされます。

この機能が実装されていることがわかりますが、クリックするたびに多数の同一要素が追加されます。この時点で、重複排除操作を実行できます。

重複排除によりマルチページ機能を簡単に実現

私の関数はマルチページキャッシュを実装する必要があるため、つまりこれらすべてのページをキャッシュする必要があるため、キープアライブコンポーネントを使用しましたが、配列が変更されると、ページは再レンダリングされます。

ページ B を操作すると、ページ A が閉じられ、つまり削除され、その後ページ B が再レンダリングされますが、これでは必要なキャッシュ効果は得られません。したがって、レンダリングにv-forを直接使用することはできません。

その後、再レンダリングするかどうかを決定するカスタムディレクティブを自分で実装することを考えましたが、カスタムディレクティブにはこれがまったくないため、インスタンスや vnode を取得できず、自分でキャッシュを実装できません。

その後、jsx 構文を使用してレンダリングし、インスタンスをキャッシュするか再作成するかを決定するコンポーネントを自分で記述したいと思いましたが、キャッシュを使用してレンダリングすることはできませんでした。
そこで、現在ハイライトされているページをループせずに直接レンダリングするキープアライブコンポーネントを思いつきました。

カスタムコンポーネントで直接レンダリングする

この時点で、キャッシュ機能が実現できます。自分でキープアライブを実現するのはまだ非常に面倒です。組み込みのキープアライブは依然として非常に便利であり、キャッシュは依然として非常に強力です。

キープアルブの強力なキャッシュの問題

後で問題が見つかりました。ページを操作して閉じた後、再度開くと、ページにデータが残っていました。キープアライブ キャッシュが強力すぎるとしか言いようがありません。そこで、キャッシュをクリアする方法を考えました。公式サイトには、include と exclude の 2 つの API があります。include は、含まれているコンポーネントの名前をキャッシュし、exclude はその逆です。含まれているものはキャッシュされません。ただし、私のページ コンポーネントは以前に構築されたもので、匿名コンポーネントです。

名前を追加してみましたが、うまくいきませんでした。Baiduでキャッシュをクリアする方法を調べました。

参考記事: https://www.jb51.net/article/219189.htm

削除するときにキャッシュもクリアできるか考えました。

長い間探し回った後、ついにキャッシュを見つけました

これは$children[0].$options.parent.cacheに書いた簡単な例です。実際のプロジェクトでは、_vnode.chindren.componentInstanceの最初の要素です。

一番重要なのはこのキープアライブです。これを見つければキャッシュが見つかります。以前jsxを書いてみようとしたのですが、キャッシュのものが見つからないようです。キープアライブがないとキャッシュがないということでしょうか。キープアライブを自分で実装するのはやはり難しいです。

キャッシュを見つけると、その中のキー名がコンポーネントの名前に関連していることがわかります。indexOf を使用して一致させ、キャッシュを削除できます。

機能が実装されており、マルチページキャッシュが実現できていることがわかります。

Vue は依然として非常に強力であると言わざるを得ません。Keep-alive も依然として非常に強力です。

要約する

キープアライブキャッシュをクリアする方法についての記事はこれで終わりです。キープアライブキャッシュをクリアする詳細については、123WORDPRESS.COM の以前の記事を検索するか、以下の関連記事を引き続き参照してください。今後とも 123WORDPRESS.COM をよろしくお願いいたします。

以下もご興味があるかもしれません:
  • Vue でキープアライブ キャッシュ コンポーネントをアクティブに破棄する方法
  • Vue キャッシュでキープアライブ ページのデータをリフレッシュする方法
  • Vue のキープアライブによってコンポーネントがキャッシュされるのを防ぐ方法
  • Vueはキープアライブを使用して、リフレッシュせずにデータキャッシュを実装します。
  • Vue のキープアライブとインクルード キャッシュの問題
  • キープアライブがマルチレベルルーティングメニューをキャッシュできない問題の解決策
  • キープアライブデータキャッシュによるVueプロジェクトの最適化方法
  • キャッシュされたページを柔軟にするkeep-alive + vuexの詳細な説明
  • Vue のキープアライブ キャッシュ問題の解決方法
  • vue2 でキープアライブを使用してマルチレイヤー リスト ページをキャッシュする方法

<<:  CentOS 8.1 で LEMP (Linux+Nginx+MySQL+PHP) 環境を構築する (チュートリアルの詳細)

>>:  MySQL InnoDB row_id 境界オーバーフロー検証方法の手順

推薦する

Docker Swarm クラスタ管理の使用と原理の分析

Swarm クラスター管理導入Docker Swarm は Docker 用のクラスター管理ツールで...

Ubuntu は、Mysql+Keepalived の高可用性実装 (デュアルアクティブ ホットスタンバイ) を構築します。

Mysql5.5 デュアルマシン ホットスタンバイ実装 2つのMySQLをインストールするMySQ...

システムエラー 1067 を解決するための MySQL データベース グリーン バージョンのインストール チュートリアル

ソフトウェアのグリーンバージョンとインストールバージョンの違いは何ですか?通常、ファイルのインストー...

ReactのsetStateがマクロタスクなのかマイクロタスクなのかについて詳しく話しましょう

目次序文面接官は適切な質問をしていますか? § React は setState をどのように制御し...

MySQL msiバージョンのダウンロードとインストールの初心者向けの詳細なグラフィックチュートリアル

目次1. MySQL msiバージョンをダウンロードする2. インストール3. 環境変数を設定する1...

LinuxでifconfigとaddrがIPアドレスを表示できない問題を解決する

1. 仮想マシンにLinuxシステムをインストールし、仮想マシンを起動し、rootとパスワードを入力...

LinuxにMySQLをインストールするための詳細なチュートリアル

すべてのプラットフォーム用の MySQL ダウンロードは、MySQL ダウンロードから入手できます。...

Linuxサーバー間のリアルタイムファイル同期の実現

使用シナリオ既存のサーバー A と B の場合、サーバー A の指定されたディレクトリ (たとえば、...

...

DockerはClickHouseをインストールし、データテストを初期化します

クリックハウスの紹介ClickHouse は、SQL クエリを使用して分析データ レポートをリアルタ...

要素 el-table テーブルの二次カプセル化 (テーブルの高さの調整付き)

序文会社でのインターンシップ中、フロントエンド開発にはvue+element-uiフレームワークを使...

Vue SPA ファースト スクリーン最適化ソリューション

目次序文最適化ソ連オンデマンドインポート1. ルーティングファイルでコンポーネントをオンデマンドでイ...

HTML5で見逃せないAPIやヒントのまとめ

これまでのブログ投稿では、HTML 5 ではあまり使われていないが注目すべき API やヒントに焦点...

最新バージョンMySQL5.7.19 解凍版インストールガイド

MySQL バージョン: MySQL Community Edition (GPL) ------ ...

MySQLの整数データ型tinyintの詳細な説明

目次1.1Tinyint型の説明1.2 練習環境の説明1.3 未署名属性の追加1.3.1 SQLモー...