Vue 中 keep-alive

keep-alive 是 Vue 内置的一个抽象组件，它能够缓存不活动的组件实例，而不是销毁它们。

缓存机制
1、keep-alive 内部维护一个缓存对象（cache）和一个键值对映射（keys），用于存储被包裹组件的实例。
2、当组件首次渲染时，会将其 VNode 和实例存入缓存。
3、当组件切换离开时，不会调用 destroy 钩子，而是被失活（deactivated）。
4、当组件再次切换回来时，直接从缓存中取出实例，避免重新创建，仅触发 activated 钩子。

生命周期钩子
被 keep-alive 包裹的组件会额外获得两个生命周期钩子：
activated：组件被激活时调用（从缓存中恢复）。
deactivated：组件被失活时调用（进入缓存）。

属性	类型	说明
include	字符串/正则/数组	匹配到的组件会被缓存
exclude	字符串/正则/数组	匹配到的组件不会被缓存
max	数字	最多缓存多少个组件实例，超出时采用 LRU 策略淘汰

与 v-if 的区别

特性	keep-alive	v-if
组件实例	缓存实例，不销毁	完全销毁和重建
生命周期	触发 activated/deactivated	触发 created/destroyed
性能	切换更快	切换慢（重建开销）
状态保持	保持所有状态	完全重置

总结

关键点	说明
本质	缓存组件实例，避免重复创建/销毁
适用场景	标签页切换、路由缓存、表单状态保持
性能优势	减少 DOM 操作和组件初始化开销
注意事项	使用 activated 刷新数据，设置 max 控制内存，必须声明 name
最佳实践	选择性缓存（include/exclude），配合路由元信息动态控制