vueにキャッシュメカニズムはありますか?

vue にはキャッシュ メカニズムがあります。「キープアライブ」を使用して、切り替えられたコンポーネントをメモリ内に保持したり、コンポーネントの状態を保持したり、再レンダリングを回避したり、ページ キャッシュを実装したりできます。 「alive」は、Vue の組み込み抽象コンポーネントであり、同じコンポーネントが複数回ロードされることを避け、パフォーマンスの消費を削減するためにコンポーネントをキャッシュするために使用されます。

#この記事の動作環境: 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>

一部のページをキャッシュする

注: トランジションがこれら 2 つの外側で直接ラップされている場合は、エラーが報告されます。トランジション グループが直接使用されている場合は、エラーが報告されます。報告されており、2 つの遷移が必要です。

[関連する推奨事項:「

vue.js チュートリアル 」]

以上がvueにキャッシュメカニズムはありますか?の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。