vue キャッシュ コンポーネントとは何を意味しますか?

Vue では、キャッシュ コンポーネントは「キープアライブ」であり、抽象コンポーネントであるため、それ自体で DOM 要素をレンダリングしたり、コンポーネントの親コンポーネント チェーンに表示されたりすることはありません。キャッシュ コンポーネントは、主にコンポーネントの状態を保存したり、再レンダリングを回避したりするために使用され、動的コンポーネントをラップするときに、非アクティブなコンポーネント インスタンスを破棄する代わりにキャッシュします。

#このチュートリアルの動作環境: Windows7 システム、vue3 バージョン、DELL G3 コンピューター。

vue では、キャッシュ コンポーネントは「キープアライブ」であり、抽象コンポーネントです。

キャッシュ コンポーネント "keep-alive"

keep-alive は Vue の組み込みコンポーネントです。動的コンポーネントをラップする場合非アクティブなコンポーネントのインスタンスがメモリ内に残り、リクエストが最適化され、DOM の再レンダリングが防止されます。

公式ドキュメント:

動的コンポーネントでのキープアライブの使用

主にコンポーネントの状態を保持したり、再レンダリングを回避したりするために使用され、動的コンポーネントをラップするときに、非アクティブなコンポーネントのインスタンスを破棄する代わりにキャッシュします。

(1) コンポーネント キャッシュは永続的ではありません。アプリケーションの実行中に再レンダリングされないだけです。ページが更新されても、初期状態に戻ります。

(2) は抽象コンポーネントです。それ自体では DOM 要素をレンダリングせず、コンポーネントの親コンポーネント チェーンにも表示されません。

(3) 切り替え先のコンポーネントには、コンポーネントの名前オプションまたはローカル/グローバル登録のいずれによっても、独自の名前が必要です。

(4) コンポーネントのライフサイクルフックとキャッシュ

(5) include 属性と exclude 属性により、コンポーネントを条件付きでキャッシュできます。どちらも、カンマ区切りの文字列、正規表現、または配列として表すことができます。

<!-- 逗号分隔字符串 -->
<keep-alive include="a,b">
  <component :is="view"></component>
</keep-alive>

<!-- 正则表达式 (使用 `v-bind`) -->
<keep-alive :include="/a|b/">
  <component :is="view"></component>
</keep-alive>

<!-- 数组 (使用 `v-bind`) -->
<keep-alive :include="[&#39;a&#39;, &#39;b&#39;]">
  <component :is="view"></component>
</keep-alive>

一致では、まずコンポーネント自体の名前オプションがチェックされ、名前オプションが使用できない場合は、そのローカル登録名 (親コンポーネントのコンポーネント オプションのキー値) と一致します。匿名コンポーネントは照合できません。 [学習ビデオ共有:

vue ビデオ チュートリアル 、Web フロントエンド ビデオ ]

#キャッシュ コンポーネントの使用に関するいくつかの問題

問題 1: キャッシュされたコンポーネントが多すぎる場合、または不要なコンポーネントもキャッシュされている場合、過剰なメモリ使用量が発生します。

問題 2: 更新する必要があるものがキャッシュされることになります。たとえば、詳細コンポーネントがキャッシュされている場合、更新されません。

戦略: 重要な、高頻度 (ホームページなど) またはあまり変更されないコンポーネントをキャッシュします。

解決策: ルートをキャッシュするようにマークし、ルートをロードするときにルートをキャッシュするかどうかを動的に決定します。キャッシュされるコンポーネントのより正確な制御

コンポーネント キャッシュの最適化された書き込み方法:

ルートを定義するときに、追加のルーティング [メタ情報] を追加します。 ]、いくつかの情報要素を追加します。

{ 
  path: '/', 
  component: () => import('../views/home/index.vue'), 
  //是否缓存
  meta: { isKeepAlive: true } 
},

app.vue のメタ メタ情報に基づいてコンポーネントをキャッシュするかどうかを決定します

<div id="app">
  <keep-alive>
    <router-view v-if="$route.meta.isKeepAlive"/>
  </keep-alive>
  <router-view v-if="!$route.meta.isKeepAlive"/>
</div>

(学習ビデオ共有:

Web フロントエンド開発、基本プログラミングビデオ＃ ＃＃）＃＃＃

以上がvue キャッシュ コンポーネントとは何を意味しますか?の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。