vue キャッシュコンポーネントとは何を意味しますか?-フロントエンドQ&A-php.cn

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

青灯夜游

リリース： 2022-12-02 20:51:35

オリジナル

2925 人が閲覧しました

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

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

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

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

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

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

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

公式ドキュメント:

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

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

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

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

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

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

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

(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: &#39;/&#39;, 
  component: () => import(&#39;../views/home/index.vue&#39;), 
  //是否缓存
  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 サイトの他の関連記事を参照してください。