vue keep alive实现
Vue Keep-Alive 实现
Vue 的 keep-alive 是一个内置组件，用于缓存动态组件或路由组件，避免重复渲染和销毁，从而提升性能。以下是其核心实现方法和使用场景。
基本用法
在模板中直接包裹需要缓存的组件或路由视图：
<keep-alive>
<component :is="currentComponent"></component>
</keep-alive>或用于路由：
<keep-alive>
<router-view></router-view>
</keep-alive>缓存特定组件
通过 include 和 exclude 属性控制哪些组件需要缓存。支持字符串、正则表达式或数组：
<keep-alive :include="['ComponentA', 'ComponentB']">
<component :is="currentComponent"></component>
</keep-alive>生命周期钩子
被缓存的组件会触发 activated 和 deactivated 钩子，而非 created 或 destroyed：
export default {
activated() {
console.log('组件被激活');
},
deactivated() {
console.log('组件被停用');
}
};结合路由的 meta 配置
在路由配置中通过 meta 标记需要缓存的组件：
const routes = [
{
path: '/a',
component: ComponentA,
meta: { keepAlive: true }
}
];在 router-view 中动态判断：
<keep-alive>
<router-view v-if="$route.meta.keepAlive"></router-view>
</keep-alive>
<router-view v-if="!$route.meta.keepAlive"></router-view>缓存实例限制
通过 max 属性限制最大缓存实例数，超出时最早缓存的实例会被销毁：
<keep-alive :max="5">
<router-view></router-view>
</keep-alive>实现原理
keep-alive 的核心原理是通过 LRU（最近最少使用）算法管理缓存。其内部维护一个缓存对象（cache）和一个键数组（keys），当组件切换时：
- 命中缓存时直接从
cache中提取实例。 - 未命中时缓存新实例，并淘汰最久未使用的实例（如果达到
max限制）。
