Vue <KeepAlive> 组件

使用内置的 <KeepAlive> 组件使组件保持先前输入的用户输入：

<KeepAlive>
  <component :is="activeComp"></component>
</KeepAlive>

内置的 <KeepAlive> 组件用于动态组件周围，以便在组件不活动时缓存组件，从而保持其状态。

<KeepAlive> 组件可以和不同的 Prop 一起使用，这样我们就可以指定应该缓存哪些组件，以便它们保持状态。

Prop	描述	试一试
none	所有组件都被缓存以保持其状态	试一试
include	可选。指定应保持其状态的组件的名称	试一试
exclude	可选。指定不应保持其状态的组件的名称	试一试
max	可选。指定应保持其状态的组件的最大数量如果指定最多缓存 4 个组件，则缓存的将是上次访问的 4 个组件	试一试

使用内置 <KeepAlive> 组件缓存的组件在设置或未设置为活动动态组件时，将在 activated 激活和 deactivated 停用状态之间切换。。

activated() 和 deactivated() 生命周期钩子可用于在缓存组件被设置或未被设置为活动组件时运行代码。

使用 include prop 指定将缓存值的组件：

<KeepAlive include="CompOne,CompThree">
  <component :is="activeComp"></component>
</KeepAlive>

使用 exclude prop 指定将缓存值的组件：

<KeepAlive exclude="CompOne">
  <component :is="activeComp"></component>
</KeepAlive>

使用 max prop 指定将缓存值的上次访问组件的数量：

<KeepAlive :max="2">
  <component :is="activeComp"></component>
</KeepAlive>