vue にはキャッシュ メカニズムがあります。「キープアライブ」を使用して、切り替えられたコンポーネントをメモリ内に保持したり、コンポーネントの状態を保持したり、再レンダリングを回避したり、ページ キャッシュを実装したりできます。 「alive」は、Vue の組み込み抽象コンポーネントであり、同じコンポーネントが複数回ロードされることを避け、パフォーマンスの消費を削減するためにコンポーネントをキャッシュするために使用されます。
![vueにキャッシュメカニズムはありますか?](https://img.php.cn/upload/article/202204/26/2022042617114147242.jpg)
#この記事の動作環境: Windows 10 システム、Vue バージョン 2.9.6、DELL G3 コンピューター。
vue にはキャッシュ メカニズムはありますか
PC であってもモバイルであっても、キャッシュは避けられない問題です。 vue には keepAlive があり、この API は基本的に開発ニーズの一部を満たします。
キープアライブの簡単な紹介:
1. 切り替えられたコンポーネントをメモリ内に保持します。その状態を保持することも、再レンダリングを回避してページ キャッシュを実現することもできます。
2.
は抽象コンポーネントであり、それ自体で DOM 要素をレンダリングしたり、親コンポーネント チェーンに現れたりすることはありません。 3. 内でコンポーネントが切り替えられると、その 2 つのライフサイクル フック関数 (アクティブ化と非アクティブ化) がそれに応じて実行されます。 (これは基本的に何もありません) 注: 2.2.0 以降のバージョンでは、アクティブ化と非アクティブ化は ツリー内のすべてのネストされたコンポーネントでトリガーされます。 keep-alive は Vue の組み込みコンポーネントであり、動的コンポーネントをラップすると、非アクティブなコンポーネント インスタンスを破棄する代わりにキャッシュします。
関数:
同じコンポーネントの複数回のロードを回避し、パフォーマンスの消費を削減し、ユーザー エクスペリエンスを向上させるためにコンポーネントをキャッシュするために使用されます。
使用例:
App.vue の keep-alive タグを使用してすべてのページをキャッシュする <div id="app">
<keep-alive>
<tar-bar></tar-bar>
<div class="container">
<left-menu></left-menu>
<Main />
</div>
</keep-alive>
</div>
ログイン後にコピー
一部のページをキャッシュする
![1650964728108599.png vueにキャッシュメカニズムはありますか?](https://img.php.cn/upload/image/478/721/303/1650964728108599.png)
![1650964732156498.png vueにキャッシュメカニズムはありますか?](https://img.php.cn/upload/image/674/431/429/1650964732156498.png)
注: トランジションがこれら 2 つの外側で直接ラップされている場合は、エラーが報告されます。トランジション グループが直接使用されている場合は、エラーが報告されます。報告されており、2 つの遷移が必要です。 [関連する推奨事項:「vue.js チュートリアル 」]
以上がvueにキャッシュメカニズムはありますか?の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。