vue如何实现缓存组件
Vue 实现缓存组件的方法
在 Vue 中，可以通过 <keep-alive> 组件实现组件缓存，避免重复渲染和销毁，提升性能。
使用 <keep-alive> 缓存动态组件
<keep-alive>
<component :is="currentComponent"></component>
</keep-alive>currentComponent 是动态切换的组件名，<keep-alive> 会缓存已渲染的组件实例。
缓存路由组件
在 Vue Router 中，可以通过 <keep-alive> 包裹 <router-view> 实现路由组件缓存：
<keep-alive>
<router-view></router-view>
</keep-alive>指定缓存特定组件
通过 include 或 exclude 属性指定需要缓存或排除缓存的组件：
<keep-alive include="ComponentA,ComponentB">
<component :is="currentComponent"></component>
</keep-alive>include 接受组件名（name 选项定义的名称）的字符串或正则表达式，匹配的组件会被缓存。
结合路由 meta 属性实现条件缓存
在路由配置中，通过 meta 字段标记需要缓存的组件：
{
path: '/foo',
component: Foo,
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('Component activated');
},
deactivated() {
console.log('Component deactivated');
}
}缓存最大实例数
通过 max 属性限制最大缓存实例数，超出时最早访问的实例会被销毁：
<keep-alive :max="5">
<router-view></router-view>
</keep-alive>注意事项
- 被缓存的组件必须有
name选项，否则无法匹配include/exclude。 - 频繁切换的组件适合缓存，但内存敏感场景需谨慎使用。
- 动态路由参数变化时，相同组件实例会被复用，可通过监听
$route或使用key强制更新。
