vue如何实现页面缓存

Vue 实现页面缓存的常用方法

使用 <keep-alive> 组件
<keep-alive> 是 Vue 内置组件，用于缓存动态组件或路由组件，避免重复渲染。
基本用法：

<keep-alive>
  <component :is="currentComponent"></component>
</keep-alive>

或结合路由：

<keep-alive>
  <router-view></router-view>
</keep-alive>

通过 include 和 exclude 控制缓存范围

• include：指定需要缓存的组件名（数组或字符串）
• exclude：指定不缓存的组件名
  示例：

  <keep-alive :include="['Home', 'Profile']">
  <router-view></router-view>
  </keep-alive>

利用 meta 字段动态控制路由缓存
在路由配置中通过 meta 标记是否需要缓存：

routes: [
  {
    path: '/home',
    component: Home,
    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 钩子，而非 created 或 mounted。

• activated：组件被激活时调用
• deactivated：组件被停用时调用

手动控制缓存状态
通过 :max 属性限制最大缓存实例数：

<keep-alive :max="5">
  <router-view></router-view>
</keep-alive>

注意事项

• 缓存过多可能导致内存占用过高，需合理规划缓存策略
• 表单输入框等状态保留可能引发问题，需通过 key 或手动重置处理
• 嵌套路由需结合 v-if 和路由层级设计实现精准缓存