Vue <KeepAlive> 组件
示例
使用内置 <KeepAlive> 组件，使组件保留之前输入的用户输入:
<KeepAlive>
<component :is="activeComp"></component>
</KeepAlive>
请参阅下面的更多示例。
定义和用法
内置的 <KeepAlive> 组件用于动态组件，以在组件不活动时缓存组件，以便保留其状态。
Props 选项
<KeepAlive> 组件可以与不同的 props 一起使用，以便我们可以指定应该缓存哪些组件以保持其状态。
| Props 选项 | 描述 | |
|---|---|---|
| none | 所有组件都会被缓存，以便保留它们的状态 | 运行示例 » |
| include | 可选。 指定应保持其状态的组件的名称 | 运行示例 » |
| exclude | 可选。 指定不应不保留其状态的组件的名称 | 运行示例 » |
| max | 可选。 指定应保持其状态的组件的最大数量。 如果指定最多缓存 4 个组件，则将缓存最后访问的 4 个组件 | 运行示例 » |
<KeepAlive> 缓存的组件的生命周期
使用内置 <KeepAlive> 组件缓存的组件在设置或未设置为活动动态组件时将在 activated 和 deactivated 状态之间切换。
当此类缓存组件设置或未设置为活动组件时，activated() 和 deactivated() 生命周期钩子可用于运行代码。
更多示例
示例
使用 include 属性指定哪些组件将缓存值:
<KeepAlive include="CompOne,CompThree">
<component :is="activeComp"></component>
</KeepAlive>
示例
使用 exclude 属性指定哪些组件not不缓存值:
<KeepAlive exclude="CompOne">
<component :is="activeComp"></component>
</KeepAlive>
示例
使用 max 属性指定最后访问的组件中有多少将缓存值:
<KeepAlive :max="2">
<component :is="activeComp"></component>
</KeepAlive>
相关页面
Vue 教程: 动态组件
Vue 教程: 'activated' 和 'deactivated' 生命周期钩子
