vue keep alive 实现
Vue Keep-Alive 实现原理
Vue的<keep-alive>是一个内置组件，用于缓存不活动的组件实例，避免重复渲染和销毁。以下是其核心实现机制：
缓存机制
<keep-alive>通过LRU（最近最少使用）算法管理缓存。组件被包裹时，Vue会将其vnode（虚拟节点）和DOM节点缓存起来。当组件再次激活时，直接从缓存中取出，避免重新创建。
生命周期钩子
被缓存的组件会触发特定的生命周期钩子：
activated：组件被激活时调用deactivated：组件被停用时调用
基本用法
<keep-alive>
<component :is="currentComponent"></component>
</keep-alive>配置参数
<keep-alive>支持以下props：
include：字符串或正则表达式，只有名称匹配的组件会被缓存exclude：字符串或正则表达式，名称匹配的组件不会被缓存max：数字，最多可以缓存的组件实例数量
<keep-alive :include="['ComponentA', 'ComponentB']" :max="10">
<router-view></router-view>
</keep-alive>实现细节
在Vue源码中，<keep-alive>组件主要通过以下方式工作：
- 在render函数中获取子组件的vnode
- 根据include/exclude规则判断是否需要缓存
- 使用缓存对象存储组件实例
- 处理组件激活/停用时的状态恢复
与Router结合
在Vue Router中，可以通过meta字段控制路由级别的缓存：
{
path: '/detail',
component: Detail,
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>注意事项
- 被缓存的组件必须有name选项，用于include/exclude匹配
- 频繁切换的大型组件可能导致内存占用过高
- 动态组件切换时，需要考虑组件状态的保持问题
