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