オープニングシーン私のプロジェクトでは、フロントエンドとバックエンドが分離されていません。テクノロジースタックは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 境界オーバーフロー検証方法の手順
Swarm クラスター管理導入Docker Swarm は Docker 用のクラスター管理ツールで...
Mysql5.5 デュアルマシン ホットスタンバイ実装 2つのMySQLをインストールするMySQ...
ソフトウェアのグリーンバージョンとインストールバージョンの違いは何ですか?通常、ファイルのインストー...
目次序文面接官は適切な質問をしていますか? § React は setState をどのように制御し...
目次1. MySQL msiバージョンをダウンロードする2. インストール3. 環境変数を設定する1...
1. 仮想マシンにLinuxシステムをインストールし、仮想マシンを起動し、rootとパスワードを入力...
すべてのプラットフォーム用の MySQL ダウンロードは、MySQL ダウンロードから入手できます。...
使用シナリオ既存のサーバー A と B の場合、サーバー A の指定されたディレクトリ (たとえば、...
クリックハウスの紹介ClickHouse は、SQL クエリを使用して分析データ レポートをリアルタ...
序文会社でのインターンシップ中、フロントエンド開発にはvue+element-uiフレームワークを使...
目次序文最適化ソ連オンデマンドインポート1. ルーティングファイルでコンポーネントをオンデマンドでイ...
これまでのブログ投稿では、HTML 5 ではあまり使われていないが注目すべき API やヒントに焦点...
MySQL バージョン: MySQL Community Edition (GPL) ------ ...
目次1.1Tinyint型の説明1.2 練習環境の説明1.3 未署名属性の追加1.3.1 SQLモー...