Vue keep-alive 缓存组件
使用 keep-alive 保留组件状态，避免重复渲染，提升动态切换性能。 · 难度：入门 · +15XP
keep-alive 的作用
<keep-alive> 是一个内置组件，用于缓存动态组件或路由组件的实例。当组件被切换时，它不会销毁，而是被缓存起来，再次显示时直接复用，保留所有状态。
基本用法
<keep-alive>
<component :is="currentTab" />
</keep-alive>生命周期钩子
被 keep-alive 包裹的组件会额外触发 activated 和 deactivated 钩子。
| 钩子 | 触发时机 |
|---|---|
| activated | 组件被激活（重新插入 DOM） |
| deactivated | 组件被停用（缓存） |
包含与排除
<keep-alive include="ComponentA,ComponentB" exclude="ComponentC" max="5">
<component :is="currentView" />
</keep-alive>include 和 exclude 接受组件名称或正则，max 限制最大缓存实例数。
练习提示
1. 创建两个计数器组件，分别有独立的 count 状态。
2. 用动态组件切换，观察带 keep-alive 和不带时的状态差异。