vue实现组件缓存

Vue 组件缓存的实现方法

在 Vue 中，可以通过内置组件 <keep-alive> 实现组件缓存，避免重复渲染和销毁带来的性能损耗。

使用 <keep-alive> 缓存动态组件

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

<keep-alive> 会缓存不活动的组件实例，当组件切换时不会触发销毁和重新创建。

结合路由缓存页面组件

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

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

指定缓存特定组件

通过 include 和 exclude 属性控制哪些组件需要缓存：

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

include 接受组件名称的字符串或正则表达式，匹配的组件会被缓存。

生命周期钩子

被缓存的组件会触发特定的生命周期钩子：

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

export default {
  activated() {
    // 组件被激活时执行
  },
  deactivated() {
    // 组件被停用时执行
  }
}

最大缓存实例数

通过 max 属性限制最大缓存实例数：

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

当缓存实例超过最大值时，最久未被访问的实例会被销毁。

自定义缓存策略

对于更复杂的缓存需求，可以通过 v-if 配合状态管理实现自定义缓存逻辑：

<div v-if="shouldCache">
  <component-a v-show="isActive"></component-a>
</div>
<div v-else>
  <component-a></component-a>
</div>