Vue <KeepAlive> 组件
示例
使用内置的 <KeepAlive> 组件来保持组件中之前输入的表单数据
<KeepAlive>
<component :is="activeComp"></component>
</KeepAlive>
更多示例请参见下方。
定义和用法
内置的 <KeepAlive> 组件用于包裹动态组件，当组件不活跃时对其进行缓存，从而保持其状态。
Props
该 <KeepAlive> 组件可以与不同的 prop 一起使用，以便我们指定哪些组件应该被缓存，从而保持其状态。
| Prop | 描述 | |
|---|---|---|
| none | 缓存所有组件，以保持其状态 | 运行示例 » |
| include | 可选。指定需要保持状态的组件的名称 | 运行示例 » |
| exclude | 可选。指定不需要保持状态的组件的名称 | 运行示例 » |
| max | 可选。指定需要保持状态的组件的最大数量。如果您指定最多缓存 4 个组件，那么将被缓存的是最近访问的 4 个组件。 | 运行示例 » |
<KeepAlive> 缓存组件的生命周期
通过内置的 <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>
相关页面
Vue 教程：动态组件
Vue 教程：“activated”和“deactivated”生命周期钩子
