vue实现组件缓存原理
Vue 组件缓存原理
Vue 通过内置组件 <keep-alive> 实现组件缓存，其核心原理基于虚拟 DOM 和组件生命周期钩子管理。以下是关键实现机制：
缓存机制
<keep-alive> 通过 LRU（最近最少使用）算法缓存组件实例。默认缓存所有匹配的组件，可通过 include/exclude 属性或 max 属性控制缓存策略。
组件被缓存时，Vue 不会销毁其实例，而是将组件 DOM 节点保存在内存中。当再次激活时，直接从缓存中读取 DOM 结构和数据状态。
生命周期钩子
缓存组件会触发特定的生命周期钩子：
activated：组件被激活时调用（从缓存恢复）deactivated：组件被停用时调用（进入缓存）
原始钩子如 created/mounted 仅在首次加载时触发，而 activated 会在每次从缓存恢复时触发。
实现代码示例
// 伪代码展示核心逻辑
const KeepAlive = {
render() {
const vnode = this.$slots.default[0];
const key = vnode.key;
if (this.cache[key]) {
vnode.componentInstance = this.cache[key].componentInstance;
} else {
this.cache[key] = vnode;
}
vnode.data.keepAlive = true;
return vnode;
}
};关键步骤
虚拟 DOM 比对时会检查 data.keepAlive 标记。若存在，则复用缓存的组件实例而非创建新实例。
缓存组件时，Vue 会调用 deactivateChildComponent 方法将实例从父链中解除；激活时通过 activateChildComponent 重新建立联系。
性能优化
通过 max 属性限制缓存数量，避免内存过度占用。超出限制时，LRU 算法会销毁最久未使用的组件实例。
组件切换时，直接复用缓存的 VNode 和 DOM 节点，避免重复渲染和 patch 过程，显著提升性能。
