vue keep-alive の簡単な概要

1. 機能

主にコンポーネントの状態を保持したり、再レンダリングを回避したりするために使用されます。

2. 使用方法

<keep-alive> 動的コンポーネントをラップする場合、非アクティブなコンポーネント インスタンスは破棄されるのではなくキャッシュされます。

<keep-alive> は抽象コンポーネントです。DOM 要素自体はレンダリングされず、コンポーネントの親チェーンにも表示されません。

<keep-alive> 内でコンポーネントが切り替えられると、それに応じてアクティブ化および非アクティブ化されたライフサイクル フック関数が実行されます。

3. 小道具

含む

include - 文字列または正規表現。名前が一致するコンポーネントのみがキャッシュされます。

除外する

exclude - 文字列または正規表現。名前が一致するコンポーネントはキャッシュされません。

include および exclude プロパティを使用すると、コンポーネントを条件付きでキャッシュできます。どちらも、コンマ区切りの文字列、正規表現、または配列として表現できます。

<!-- カンマ区切りの文字列 -->
<キープアライブを含める="a,b">
 <コンポーネント :is="view"></コンポーネント>
</キープアライブ>

<!-- 正規表現 (`v-bind` を使用) -->
<キープアライブ:include="/a|b/">
 <コンポーネント :is="view"></コンポーネント>
</キープアライブ>

<!-- 配列 (`v-bind` を使用) -->
<キープアライブ:include="['a', 'b']">
 <コンポーネント :is="view"></コンポーネント>
</キープアライブ>

最初にコンポーネント自身の名前オプションに対して一致がチェックされます。それが利用できない場合は、ローカルに登録された名前 (親コンポーネントのコンポーネント オプション キーの値) に対して一致がチェックされます。匿名コンポーネントは一致できません。

最大

max: 数値。キャッシュできるコンポーネント インスタンスの最大数。

この数に達すると、最も長い時間アクセスされていないキャッシュされたコンポーネント インスタンスは、新しいインスタンスが作成される前に破棄されます。

<キープアライブ:max="10">
 <コンポーネント :is="view"></コンポーネント>
</キープアライブ>

上記は、vue の keep-alive の詳細についての簡単な分析です。vue の keep-alive の詳細については、123WORDPRESS.COM の他の関連記事に注目してください。