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 匹配组件名（name 选项），exclude 则排除指定组件。

<keep-alive include="HomePage,UserProfile">
  <router-view></router-view>
</keep-alive>

结合路由的 meta 字段
在路由配置中通过 meta 标记是否需要缓存，动态控制 <keep-alive>：

// router.js
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。可在这些钩子中处理缓存逻辑：

export default {
  activated() {
    // 组件被激活时调用（从缓存中恢复）
  },
  deactivated() {
    // 组件被停用时调用（进入缓存）
  }
}

手动控制缓存状态
通过 max 属性限制缓存组件数量，超出时销毁最久未使用的实例：

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

注意事项

• 组件需定义 name 选项才能被 include/exclude 识别。
• 频繁切换的复杂组件可能因缓存占用过多内存，需合理设置 max。
• 表单组件缓存时可能导致数据未重置，需在 deactivated 中手动清理状态。