オープニングシーン私のプロジェクトでは、フロントエンドとバックエンドが分離されていません。テクノロジースタックは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 をよろしくお願いいたします。 以下もご興味があるかもしれません:
|
<<: CentOS 8.1 で LEMP (Linux+Nginx+MySQL+PHP) 環境を構築する (チュートリアルの詳細)
>>: MySQL InnoDB row_id 境界オーバーフロー検証方法の手順
現在の要件は、ファイルのアップロード ボタンがあることです。ボタンをクリックすると、アップロードする...
1. サーバーのセットアップリモート リポジトリは実際にはローカル リポジトリと何ら変わりなく、純粋...
忘れてしまった場合に後で戻って確認できるようにメモしておいてください。問題の説明:今日はちょっとした...
1. 画像を取得する #Webコントロールページを含むバージョンを指定します docker pull...
<br />幅と高さが適応するオリジナルの 9 グリッド レイアウトをベースに、ネットワ...
背景情報最近、Windows パフォーマンスに関する本を読み直しています。以前は SCOM 監視を使...
1.アルパインイメージをダウンロードする [root@DockerBrian ~]# docker ...
vueモバイル端末は、画面上で指をスライドさせる方向を判断します。具体的な内容は次のとおりです。これ...
目次docker システム df docker システム プルーンdocker systemc 情報...
問題の再現Alibaba Cloud Server は、Finalshell リモート接続を使用して...
この記事では、JavaScriptシミュレーション計算機の具体的なコードを参考までに紹介します。具体...
1. いつsetUpを実行するかvue3 ではメソッドを正常に使用できるようになったことは誰もが知っ...
目次1. ノード、ツリー、仮想DOM 2. 仮想DOM 2.1 データオブジェクトの詳細2.2 制約...
目次スケルトンスクリーンの使用Vueアーキテクチャスケルトンスクリーンアイデアの概要抽象コンポーネン...
目次1. 環境設備2. ToastコンポーネントとToastServiceを作成する2.1 Toas...