vue实现组件缓存
Vue 实现组件缓存的常用方法
使用 <keep-alive> 标签
Vue 提供了内置组件 <keep-alive>，用于缓存不活动的组件实例，避免重复渲染。基本用法如下：
<template>
<keep-alive>
<component :is="currentComponent"></component>
</keep-alive>
</template><keep-alive> 默认会缓存所有子组件，但可以通过 include 或 exclude 属性指定需要缓存的组件：
<keep-alive :include="['ComponentA', 'ComponentB']">
<component :is="currentComponent"></component>
</keep-alive>动态组件结合 <keep-alive>
动态组件切换时，结合 v-if 或 v-show 控制缓存逻辑：
<keep-alive>
<component-a v-if="showComponentA"></component-a>
<component-b v-else></component-b>
</keep-alive>路由级缓存
在 Vue Router 中，可以通过 <keep-alive> 缓存路由组件：
<template>
<keep-alive>
<router-view></router-view>
</keep-alive>
</template>若需选择性缓存部分路由，可使用路由元信息：
{
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>生命周期钩子控制
被缓存的组件会触发特定的生命周期钩子：
activated：组件被激活时调用deactivated：组件被停用时调用export default { activated() { console.log('组件重新激活'); }, deactivated() { console.log('组件被缓存'); } }
自定义缓存策略
通过 max 属性限制缓存实例数量，超出时销毁最久未使用的实例：
<keep-alive :max="5">
<router-view></router-view>
</keep-alive>手动控制缓存
通过 v-if 动态销毁和重建组件，实现精确控制：
<keep-alive>
<child-component v-if="shouldCache"></child-component>
</keep-alive>注意事项
- 被缓存的组件会保留状态（如数据、DOM 结构），但不会触发
created或mounted钩子 - 频繁切换的组件适合缓存，但需注意内存占用问题
- 表单类组件缓存时可能导致数据未重置，需在
activated中处理
