vue实现组件缓存

Vue 实现组件缓存的常用方法

使用 <keep-alive> 标签

Vue 提供了内置组件 <keep-alive>，用于缓存不活动的组件实例，避免重复渲染。基本用法如下：

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

<keep-alive> 默认会缓存所有子组件，但可以通过 include 或 exclude 属性指定需要缓存的组件：

<keep-alive :include="['ComponentA', 'ComponentB']">
  <component :is="currentComponent"></component>
</keep-alive>

动态组件结合 <keep-alive>

动态组件切换时，结合 v-if 或 v-show 控制缓存逻辑：

<keep-alive>
  <component-a v-if="showComponentA"></component-a>
  <component-b v-else></component-b>
</keep-alive>

路由级缓存

在 Vue Router 中，可以通过 <keep-alive> 缓存路由组件：

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

若需选择性缓存部分路由，可使用路由元信息：

{
  path: '/detail',
  component: Detail,
  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：组件被停用时调用

  export default {
  activated() {
    console.log('组件重新激活');
  },
  deactivated() {
    console.log('组件被缓存');
  }
  }

自定义缓存策略

通过 max 属性限制缓存实例数量，超出时销毁最久未使用的实例：

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

手动控制缓存

通过 v-if 动态销毁和重建组件，实现精确控制：

<keep-alive>
  <child-component v-if="shouldCache"></child-component>
</keep-alive>

注意事项

• 被缓存的组件会保留状态（如数据、DOM 结构），但不会触发 created 或 mounted 钩子
• 频繁切换的组件适合缓存，但需注意内存占用问题
• 表单类组件缓存时可能导致数据未重置，需在 activated 中处理