通过缓存组件实例（含data、dom、生命周期状态）避免销毁重建，从而保留表单输入、滚动位置等状态；需组件有name，支持include/exclude/max控制缓存范围与数量。
用
为什么状态会丢失？
默认情况下，<component :is="xxx"></component> 每次切换都会销毁旧组件、创建新实例——unmounted 触发，内部响应式数据、表单输入、滚动位置、定时器等全部清空。这不是 bug，而是 Vue 的默认行为。
keep-alive 是怎么起作用的？
它不渲染真实 DOM，只做一件事：当组件被切换“离开”时，不销毁，而是缓存整个实例（含 data、computed、DOM 节点、生命周期状态）；再次激活时，直接复用缓存，触发 activated 钩子而非 mounted。
- 必须确保被包裹的组件有明确的
name（选项或通过defineOptions({ name: 'MyComponent' })） - 支持
include/exclude属性精准控制哪些组件参与缓存 - 配合
max可限制缓存数量，防止内存持续增长
常见状态丢失场景与应对补充
仅靠 <keep-alive></keep-alive> 不够？这些情况需要额外处理：
-
异步加载的数据未缓存：组件激活时检查
data是否为空，为空再请求；或在activated中主动刷新关键数据 -
第三方富文本/编辑器状态重置：在
deactivated中手动保存光标、内容快照；activated中恢复 -
路由参数变化但组件复用：监听
$route或使用watch监听route.params，按需更新内部状态 -
props 更新不触发重新渲染：给
<component></component>加唯一:key（如:key="route.path"），强制重建以接收新 props
实际写法示例
模板中这样包裹：
<keep-alive :include="['UserForm', 'OrderList']"><component :is="currentView" :user-id="userId"></component></keep-alive>
在组件内合理利用生命周期：
onActivated(() => {
if (!formData.loaded) loadData()
})
onDeactivated(() => {
saveDraftToLocalStorage()
})前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
