如何实现vue缓存

Vue 缓存实现方法

使用 <keep-alive> 组件
Vue 提供了内置的 <keep-alive> 组件，用于缓存动态组件或路由组件。通过包裹需要缓存的组件，可以保留其状态避免重复渲染。

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

缓存特定组件
通过 include 或 exclude 属性指定需要缓存或排除的组件名（需与组件的 name 选项匹配）。

<keep-alive include="ComponentA,ComponentB">
  <router-view></router-view>
</keep-alive>

动态路由缓存
在路由配置中结合 meta 字段标记需要缓存的页面，通过 v-if 控制 <keep-alive> 的生效范围。

// 路由配置
{
  path: '/detail',
  component: Detail,
  meta: { keepAlive: true }
}

<!-- 动态绑定 include -->
<keep-alive :include="cachedViews">
  <router-view v-if="$route.meta.keepAlive"></router-view>
</keep-alive>
<router-view v-if="!$route.meta.keepAlive"></router-view>

手动管理缓存
通过 $destroy 或 <keep-alive> 的 max 属性限制缓存数量，避免内存泄漏。

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

生命周期钩子
被缓存的组件会触发 activated 和 deactivated 钩子，可用于数据刷新或清理操作。

export default {
  activated() {
    // 组件被激活时调用
    this.fetchData();
  },
  deactivated() {
    // 组件被停用时调用
    this.clearTimer();
  }
}

注意事项

• 组件必须设置 name 选项才能被 include/exclude 匹配。
• 频繁切换的组件建议设置 max 限制缓存数量。
• 表单组件需谨慎缓存，可能引发数据状态不一致问题。