vue怎么实现组件缓存
Vue 组件缓存的实现方法
Vue 提供了内置的 <keep-alive> 组件来实现组件缓存，避免重复渲染和销毁，提升性能。以下是具体实现方式：
基本用法
<keep-alive>
<component :is="currentComponent"></component>
</keep-alive>这种方式会缓存所有被包裹的动态组件。
配合路由使用
在 Vue Router 中可以直接包裹 <router-view>：
<keep-alive>
<router-view></router-view>
</keep-alive>条件性缓存
通过 include 和 exclude 属性控制哪些组件需要缓存：
<keep-alive :include="['ComponentA', 'ComponentB']">
<router-view></router-view>
</keep-alive>include 匹配组件名（name 选项），exclude 则是排除特定组件。
最大缓存实例数
使用 max 属性限制最大缓存组件数量：
<keep-alive :max="5">
<router-view></router-view>
</keep-alive>生命周期钩子
被缓存的组件会触发特殊生命周期：
activated() {
// 组件被激活时调用
},
deactivated() {
// 组件被停用时调用
}注意事项
- 需要确保被缓存组件都有唯一的
name选项 - 组件切换时会保留所有状态（data、DOM 状态等）
- 大量缓存可能增加内存占用，需合理使用
- 动态组件切换时不会触发常规的 created/mounted 钩子
高级用法
对于需要自定义缓存策略的场景，可以结合 Vue 的 vnode 和缓存机制自行实现类似功能，但通常 <keep-alive> 已能满足大多数需求。
