前端Vue: vue 的keep-alive的作用是什么？怎么实现的？如何刷新的?

作用

用于缓存组件实例，避免重复销毁和创建，保留组件状态（如表单数据、滚动位置），提升页面切换性能。

实现原理

1. 缓存机制：内部维护一个缓存对象（Map），以组件 key或 name为键，存储组件实例
2. 实例复用：组件切换时，不执行 destroyed，而是从 DOM 移除并缓存；重新激活时直接插入 DOM
3. 生命周期：增加 activated（激活）和 deactivated（停用）两个钩子
4. LRU策略：通过 max属性限制最大缓存数，超出时淘汰最久未使用的实例

刷新方式

1. 自然更新：组件内部响应式数据变化会自动更新
2. 激活钩子：activated()中重新获取数据
3. 改变key：修改组件 key强制销毁重建
4. include/exclude：动态修改 include/exclude 名单
5. 路由参数：利用 $route.params变化触发 watch 或 beforeRouteUpdate

常用配置

<!-- 只缓存指定组件，最多10个 -->
<keep-alive :include="['User','Post']" :max="10">
  <router-view />
</keep-alive>

核心思想：用内存换性能，适合多页面切换且状态需保留的场景。