vue缓存如何实现
Vue 缓存实现方法
使用 keep-alive 组件
Vue 内置的 keep-alive 组件可以缓存动态组件或路由组件，避免重复渲染。
基本用法是将需要缓存的组件包裹在 keep-alive 标签内：
<keep-alive>
<component :is="currentComponent"></component>
</keep-alive>支持通过 include 和 exclude 属性指定缓存或排除的组件名：
<keep-alive include="ComponentA,ComponentB" exclude="ComponentC">
<router-view></router-view>
</keep-alive>路由级缓存
在 Vue Router 中结合 keep-alive 实现路由页面缓存：
<keep-alive>
<router-view v-if="$route.meta.keepAlive"></router-view>
</keep-alive>
<router-view v-if="!$route.meta.keepAlive"></router-view>需在路由配置中设置 meta 字段：
routes: [
{
path: '/pageA',
component: PageA,
meta: { keepAlive: true }
}
]组件生命周期钩子
被 keep-alive 缓存的组件会触发特定生命周期钩子：
activated：组件被激活时调用（从缓存中重新显示）deactivated：组件被停用时调用（进入缓存）
可通过这些钩子管理数据刷新逻辑：
export default {
activated() {
this.fetchData(); // 重新获取数据
},
deactivated() {
this.clearTimer(); // 清理定时器等资源
}
}手动缓存策略
对于复杂场景，可通过 Vuex 或本地存储实现数据级缓存：
// 使用 Vuex 存储数据
const store = new Vuex.Store({
state: {
cachedData: null
},
mutations: {
setCache(state, data) {
state.cachedData = data;
}
}
});
// 组件中调用
this.$store.commit('setCache', response.data);缓存清理策略
通过 max 属性限制最大缓存实例数，超出时销毁最久未使用的实例：
<keep-alive :max="5">
<router-view></router-view>
</keep-alive>也可编程式清理缓存：
// 获取 keep-alive 实例
const keepAliveInstance = this.$refs.keepAlive;
// 清除指定组件缓存
keepAliveInstance.cache = {};
keepAliveInstance.keys = [];
