Keep-alive

Keep-alive

在正常的 Vue 渲染逻辑中，当你切换路由或动态组件时，旧组件会被销毁（Unmount），新组件会被挂载（Mount）。

这会带来两个显著问题：

1. 状态丢失：用户在输入框打了一半的字、列表滚动到的位置、勾选的复选框，切换回来全没了。
2. 性能损耗：如果组件很重（比如有很多图表或复杂的计算），每次重新加载都要重新跑生命周期、重新发请求，页面会卡顿。

keep-alive 缓存 组件实例（VNode）。
当组件被“销毁”时，它并不会真正从内存中被垃圾回收，而是被移动到一个隐藏的容器中。它保存了以下内容：

• 组件的 DOM 状态（例如：滚动位置、输入框内的文字）。
• 组件的 Data/State（响应式数据、计算属性的值）。
• 子组件的状态（递归保存整个组件树）

Keep-alive使用

1.包裹动态组件

2.配合属性精细化控制 若不想缓存所有的组件，有三个关键参数：

• include：字符串或正则。只有名称匹配的组件会被缓存。
• exclude：任何名称匹配的组件都不会被缓存。
• max：最多可以缓存多少个组件实例。一旦达到这个数字，Vue 会销毁那个最久没被访问的组件（LRU 算法）

3.路由级别使用

// vue3
<router-view v-slot="{ Component }">
  <keep-alive>
    <component :is="Component" />
  </keep-alive>
</router-view>

底层原理：

待补充