【Vue】keep-alive 缓存组件

<keep-alive> 是 Vue 内置的一个组件，用来缓存组件状态或避免重新渲染。

在 Vue 中，可以将 <keep-alive> 作为一个包裹动态组件的容器，被包裹的组件会被缓存起来，而不是被销毁或重新渲染。

以下是一些使用 <keep-alive> 的示例：

1. 缓存所有子组件，包括使用 v-for 渲染的：

<keep-alive>
  <component :is="view"></component>
</keep-alive>

2. 使用 include 和 exclude 属性来控制缓存哪些组件：

<keep-alive include="a,b">
  <component :is="view"></component>
</keep-alive>

<keep-alive exclude="a,b">
  <component :is="view"></component>
</keep-alive>

3. 使用 max 属性限制缓存组件的数量：

<keep-alive :max="10">
  <component :is="view"></component>
</keep-alive>

4. 使用 activate 和 deactivate 生命周期钩子来自定义缓存策略：

<keep-alive>
  <component :is="view" v-on:activate="onActivate" v-on:deactivate="onDeactivate"></component>
</keep-alive>

在实际应用中，<keep-alive> 可以用来保持组件状态或避免重复渲染，从而提高性能。