vue实现keepalive
Vue 中实现 KeepAlive 的方法
Vue 的 <keep-alive> 是一个内置组件，用于缓存不活动的组件实例，避免重复渲染和销毁。以下是实现方式及注意事项：
基本用法
将需要缓存的组件包裹在 <keep-alive> 标签内：
<template>
<keep-alive>
<component :is="currentComponent"></component>
</keep-alive>
</template>结合路由使用
在 Vue Router 中缓存特定路由组件：
<template>
<router-view v-slot="{ Component }">
<keep-alive>
<component :is="Component" v-if="$route.meta.keepAlive" />
</keep-alive>
<component :is="Component" v-if="!$route.meta.keepAlive" />
</router-view>
</template>需在路由配置中设置 meta 字段：
{
path: '/detail',
component: Detail,
meta: { keepAlive: true }
}包含/排除特定组件
通过 include 或 exclude 属性控制缓存范围（匹配组件名）：
<keep-alive include="Home,About" exclude="Contact">
<router-view></router-view>
</keep-alive>生命周期钩子
被缓存的组件会触发特有生命周期：
activated：组件被激活时调用deactivated：组件被停用时调用export default { activated() { console.log('组件重新激活'); }, deactivated() { console.log('组件被缓存'); } }
最大缓存实例数
通过 max 属性限制缓存数量，超出时销毁最久未使用的实例：
<keep-alive :max="5">
<router-view></router-view>
</keep-alive>注意事项
- 组件必须有明确的
name选项才能被include/exclude匹配 - 缓存过多组件可能导致内存占用过高
- 动态组件切换时，非响应式数据可能不会自动更新
