vue怎么实现组件缓存
Vue 实现组件缓存的方法
Vue 提供了内置组件 <keep-alive> 来实现组件缓存，避免重复渲染和销毁组件，提升性能。
基本用法
使用 <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']" :exclude="['ComponentC']">
<router-view></router-view>
</keep-alive>生命周期钩子
被缓存的组件会触发特定的生命周期钩子：
activated：组件被激活时调用（从缓存中恢复）deactivated：组件被停用时调用（进入缓存）
export default {
activated() {
console.log('组件被激活');
},
deactivated() {
console.log('组件被停用');
}
}结合路由实现缓存
在路由配置中通过 meta 字段标记需要缓存的组件：
const routes = [
{
path: '/page1',
component: Page1,
meta: { keepAlive: true }
},
{
path: '/page2',
component: Page2,
meta: { keepAlive: false }
}
]在路由视图中动态判断：
<keep-alive>
<router-view v-if="$route.meta.keepAlive"></router-view>
</keep-alive>
<router-view v-if="!$route.meta.keepAlive"></router-view>缓存策略优化
对于需要动态控制缓存的情况，可以使用 v-if 配合 key 属性：
<keep-alive>
<router-view v-if="$route.meta.keepAlive" :key="$route.fullPath"></router-view>
</keep-alive>这种方式通过改变 key 可以强制重新渲染特定路由的缓存组件。
