vue实现页面缓存
使用 <keep-alive> 组件实现缓存
Vue 内置的 <keep-alive> 组件可以缓存动态组件或路由组件。通过包裹需要缓存的组件，可以保留其状态避免重复渲染。
<template>
<keep-alive>
<router-view v-if="$route.meta.keepAlive"></router-view>
</keep-alive>
<router-view v-if="!$route.meta.keepAlive"></router-view>
</template>在路由配置中为需要缓存的页面添加 meta 标记：
const routes = [
{
path: '/list',
component: List,
meta: { keepAlive: true }
}
]通过 include/exclude 控制缓存范围
<keep-alive> 提供 include 和 exclude 属性，可精确控制哪些组件需要缓存。include 匹配组件名，exclude 表示不缓存的组件。
<keep-alive :include="['Home', 'Profile']">
<router-view></router-view>
</keep-alive>利用 activated 和 deactivated 钩子
被 <keep-alive> 缓存的组件会额外触发两个生命周期钩子：
activated：组件被激活时调用deactivated：组件被停用时调用
export default {
activated() {
// 重新获取数据等操作
},
deactivated() {
// 清除定时器等操作
}
}结合 v-show 实现局部缓存
对于非路由组件，可以使用 v-show 替代 v-if 实现类似缓存效果。v-show 通过 CSS 控制显示隐藏，不会销毁组件实例。
<template>
<div v-show="isVisible">缓存内容</div>
</template>使用第三方库实现高级缓存
对于复杂场景，可考虑使用如 vue-ls 等库实现本地存储级别的缓存：
import VueLocalStorage from 'vue-ls'
Vue.use(VueLocalStorage)
// 使用示例
this.$ls.set('key', value)
this.$ls.get('key')注意事项
- 缓存过多组件可能导致内存占用过高
- 表单内容缓存时需注意数据更新问题
- 动态路由参数变化时可能需要强制刷新
- 组件名称必须唯一且稳定，否则缓存可能失效
