vue keep alive实现
vue keep-alive 的实现方式
在 Vue 中，keep-alive 是一个内置组件，用于缓存动态组件或组件的状态，避免重复渲染。以下是其核心实现方法：
基本用法
<keep-alive>
<component :is="currentComponent"></component>
</keep-alive>keep-alive 会缓存包裹的组件实例，当切换组件时，不会触发组件的销毁和重新创建。
包含与排除特定组件
通过 include 和 exclude 属性可以指定需要缓存或排除缓存的组件：
<keep-alive :include="['ComponentA', 'ComponentB']" :exclude="['ComponentC']">
<component :is="currentComponent"></component>
</keep-alive>include：只有名称匹配的组件会被缓存（支持字符串、正则或数组）。exclude：名称匹配的组件不会被缓存。
最大缓存实例数
通过 max 属性可以限制缓存的组件实例数量，超出时会销毁最久未访问的实例：
<keep-alive :max="5">
<component :is="currentComponent"></component>
</keep-alive>生命周期钩子
被缓存的组件会触发特定的生命周期钩子：
activated：组件被激活时调用（从缓存中恢复）。deactivated：组件被停用时调用（进入缓存）。
export default {
activated() {
console.log('组件被激活');
},
deactivated() {
console.log('组件被停用');
}
};自定义 key 控制缓存
默认情况下，keep-alive 根据组件的 name 选项进行缓存。可以通过 key 属性自定义缓存标识：
<keep-alive>
<router-view :key="$route.fullPath"></router-view>
</keep-alive>与 Vue Router 结合使用
keep-alive 常用于缓存路由组件：
<keep-alive>
<router-view></router-view>
</keep-alive>通过路由的 meta 字段可以更灵活地控制缓存：
{
path: '/foo',
component: Foo,
meta: { keepAlive: true }
}<keep-alive>
<router-view v-if="$route.meta.keepAlive"></router-view>
</keep-alive>
<router-view v-if="!$route.meta.keepAlive"></router-view>实现原理
keep-alive 的核心原理是通过 Vue 的虚拟 DOM 缓存机制：
- 在渲染阶段，
keep-alive会检查缓存中是否存在目标组件。 - 如果存在，直接返回缓存的实例；否则创建新实例并缓存。
- 使用 LRU（最近最少使用）算法管理缓存数量（当
max被设置时）。
其内部通过 cache 对象存储组件实例，并通过 keys 数组记录访问顺序：
const cache = Object.create(null);
const keys = [];当组件切换时，keep-alive 会调用 pruneCacheEntry 方法清理超出缓存的实例。
