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

オープニングシーン

私のプロジェクトでは、フロントエンドとバックエンドが分離されていません。テクノロジースタックは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 をよろしくお願いいたします。