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

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

オープニングシーン

私のプロジェクトでは、フロントエンドとバックエンドが分離されていません。テクノロジースタックは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 境界オーバーフロー検証方法の手順

推薦する

Vue+SSMは画像アップロードのプレビュー効果を実現します

現在の要件は、ファイルのアップロード ボタンがあることです。ボタンをクリックすると、アップロードする...

Linux 上でプライベート Git サーバーを構築するための詳細なチュートリアル

1. サーバーのセットアップリモート リポジトリは実際にはローカル リポジトリと何ら変わりなく、純粋...

Windows 上の MySQL 5.6 で my.ini 設定ファイルを見つける方法

忘れてしまった場合に後で戻って確認できるようにメモしておいてください。問題の説明:今日はちょっとした...

DockerにRabbitMQを素早くインストールする方法

1. 画像を取得する #Webコントロールページを含むバージョンを指定します docker pull...

適応的な幅と高さを持つ9つの正方形グリッドの背景画像の切り取りの分析

<br />幅と高さが適応するオリジナルの 9 グリッド レイアウトをベースに、ネットワ...

Zabbix で Windows のパフォーマンスを監視する方法

背景情報最近、Windows パフォーマンスに関する本を読み直しています。以前は SCOM 監視を使...

alpineをベースにdockerfileで作成したクローラーScrapyイメージの実装

1.アルパインイメージをダウンロードする [root@DockerBrian ~]# docker ...

Vueモバイル端末は画面上で指をスライドさせる方向を判定する

vueモバイル端末は、画面上で指をスライドさせる方向を判断します。具体的な内容は次のとおりです。これ...

docker システムコマンドセットの使用

目次docker システム df docker システム プルーンdocker systemc 情報...

Alibaba Cloud SSHリモート接続がしばらくすると切断される問題を解決

問題の再現Alibaba Cloud Server は、Finalshell リモート接続を使用して...

JavaScript シミュレーション計算機

この記事では、JavaScriptシミュレーション計算機の具体的なコードを参考までに紹介します。具体...

vue3 の setUp とリアクティブ関数の使用方法の詳細な説明

1. いつsetUpを実行するかvue3 ではメソッドを正常に使用できるようになったことは誰もが知っ...

VueのRender関数

目次1. ノード、ツリー、仮想DOM 2. 仮想DOM 2.1 データオブジェクトの詳細2.2 制約...

Vueでスケルトンスクリーンを実装する例

目次スケルトンスクリーンの使用Vueアーキテクチャスケルトンスクリーンアイデアの概要抽象コンポーネン...

Angular CDK を使用してサービスポップアップトーストコンポーネント機能を実装する

目次1. 環境設備2. ToastコンポーネントとToastServiceを作成する2.1 Toas...