vue缓存实现原理
Vue 缓存实现原理
Vue 中的缓存主要通过 keep-alive 组件实现，用于缓存动态组件或路由组件，避免重复渲染和销毁，提升性能。
keep-alive 的核心机制
keep-alive 是一个抽象组件，不会渲染为实际的 DOM 节点。它通过 include、exclude 和 max 属性控制缓存策略：
include：匹配的组件会被缓存。exclude：匹配的组件不会被缓存。max：限制最大缓存组件数量，超出时按 LRU（最近最少使用）策略淘汰。
缓存的生命周期钩子
被缓存的组件会触发特定的生命周期钩子：
activated：组件被激活时调用（从缓存中重新插入 DOM）。deactivated：组件被停用时调用（从 DOM 移除，存入缓存）。
实现原理
-
缓存数据结构
Vue 内部通过一个缓存对象（如cache）存储组件实例，键为组件标识（如name或tag），值为组件实例的 VNode。 -
LRU 算法
当缓存数量超过max时，优先移除最久未被访问的组件实例。通过维护一个键的访问顺序数组实现。 -
渲染逻辑
- 首次渲染时，组件实例会被缓存。
- 再次渲染时，直接从缓存中取出 VNode，避免重新创建和挂载。
示例代码
<template>
<keep-alive :include="['ComponentA']" :max="5">
<component :is="currentComponent"></component>
</keep-alive>
</template>
<script>
export default {
data() {
return {
currentComponent: 'ComponentA'
};
}
};
</script>注意事项
- 缓存的组件需定义
name选项，否则include/exclude无法匹配。 - 频繁切换的组件适合缓存，但需注意内存占用问题。
- 动态路由结合
keep-alive时，可通过meta字段控制缓存策略。
通过以上机制，Vue 的缓存实现有效减少了重复渲染开销，适用于需要保持状态或复杂计算的组件场景。
