vue でのキープアライブ コンポーネントの役割と使用法

---

vue におけるキープアライブ コンポーネントの役割

キープアライブは、コンポーネントの状態を保持し、再レンダリングを回避するために使用されます。
この問題は、ルート キャッシュ属性とも呼ばれます
。

• 含まれるもの: 文字列または正規表現。一致するコンポーネントのみがキャッシュされます。
• 除外: 文字列または正規表現。一致するコンポーネントはキャッシュされません。

例: リストページと詳細ページがあり、ユーザーは「詳細を開く」=>「リストに戻る」=>「詳細を開く」を実行することがよくあります。この場合、リストと詳細の両方が非常に頻繁に使用されるページであるため、<を使用できます。リスト コンポーネントの keep コンポーネント -alive></keep-alive> キャッシュにより、ユーザーがリストに戻るたびに、再レンダリングするのではなく、キャッシュからすぐにレンダリングできるようになります。

1. すべてのキャッシュ

Keep-alive タグを使用してルータービューをラップすると、完全なキャッシュを実現できます

<keep-alive>
  <router-view> </router-view>
</keep-alive>

2. 指定された 1 つのルートをキャッシュする

また、Keep-alive タグを使用してルータービューをラップし、Keep-alive で include を使用してキャッシュする必要があるページの名前を指定します。

<keep-alive include='缓存页面的名称'>
  <router-view> </router-view>
</keep-alive>

3. 指定した複数のルートをキャッシュする

2 つのルータービュー タグを使用する必要があり、1 つはキャッシュ アウトレットとして、もう 1 つはキャッシュ フリー アウトレットとして、次にルーティング設定中にキャッシュされたページにメタ属性を追加し、keepAlive 値を設定します。

<keep-alive>

  <router-view v-if="$route.meta.keepAlive"></router-view>

</keep-alive>

<router-view v-if="!$route.meta.keepAlive"></router-view>

{
    
    
 path:'/car',
 name:'car',
 component: Car,
 meta: {
    
    keepAlive: true} //true缓存 false不缓存
}