在Vue3中实现缓存和复用动态组件

更新时间：2026年04月29日 16:52:12 作者：Astrifall

本文介绍了在Vue3中使用<KeepAlive>组件和手动管理组件实例来缓存和复用动态组件的方法,使用<KeepAlive>可以缓存特定组件,控制缓存实例数量,并通过生命周期钩子执行相应逻辑,手动管理则通过对象存储组件实例,提高性能,最后,将逻辑封装到组合式函数中,增强代码复用性

1. 使用<KeepAlive>组件缓存动态组件

基本使用

<KeepAlive> 是 Vue 3 内置的一个组件，它可以将包裹在其中的动态组件进行缓存，当组件被切换隐藏时，其状态会被保留，再次显示时无需重新创建。

<template>
  <div>
    <button @click="currentComponent = 'ComponentA'">显示组件 A</button>
    <button @click="currentComponent = 'ComponentB'">显示组件 B</button>
    <!-- 使用 KeepAlive 包裹动态组件 -->
    <KeepAlive>
      <component :is="currentComponent" />
    </KeepAlive>
  </div>
</template>

<script setup>
import { ref } from 'vue';
import ComponentA from './ComponentA.vue';
import ComponentB from './ComponentB.vue';

const currentComponent = ref('ComponentA');

const components = {
  ComponentA,
  ComponentB
};
</script>

代码解释

在模板中，使用 <KeepAlive> 组件包裹 <component :is="currentComponent" />，这样 ComponentA 和 ComponentB 在切换时会被缓存。
currentComponent 是一个响应式变量，用于控制显示哪个组件。

包含和排除特定组件

你可以使用 include 和 exclude 属性来指定哪些组件需要被缓存或排除。这两个属性的值可以是组件名称的字符串、正则表达式或数组。

<template>
  <div>
    <button @click="currentComponent = 'ComponentA'">显示组件 A</button>
    <button @click="currentComponent = 'ComponentB'">显示组件 B</button>
    <!-- 只缓存 ComponentA -->
    <KeepAlive include="ComponentA">
      <component :is="currentComponent" />
    </KeepAlive>
  </div>
</template>

<script setup>
import { ref } from 'vue';
import ComponentA from './ComponentA.vue';
import ComponentB from './ComponentB.vue';

const currentComponent = ref('ComponentA');

const components = {
  ComponentA,
  ComponentB
};
</script>

代码解释

include="ComponentA" 表示只有 ComponentA 会被缓存，ComponentB 不会被缓存，每次切换到 ComponentB 时都会重新创建。
若使用 exclude 属性，则与之相反，被排除的组件不会被缓存。例如 <KeepAlive exclude="ComponentB"> 会缓存除 ComponentB 之外的组件。

最大缓存实例数

你可以使用 max 属性来限制 <KeepAlive> 缓存的最大实例数量。当缓存的实例数量超过 max 值时，最早缓存的实例会被销毁。

<template>
  <div>
    <button @click="currentComponent = 'ComponentA'">显示组件 A</button>
    <button @click="currentComponent = 'ComponentB'">显示组件 B</button>
    <button @click="currentComponent = 'ComponentC'">显示组件 C</button>
    <!-- 最多缓存 2 个组件实例 -->
    <KeepAlive max="2">
      <component :is="currentComponent" />
    </KeepAlive>
  </div>
</template>

<script setup>
import { ref } from 'vue';
import ComponentA from './ComponentA.vue';
import ComponentB from './ComponentB.vue';
import ComponentC from './ComponentC.vue';

const currentComponent = ref('ComponentA');

const components = {
  ComponentA,
  ComponentB,
  ComponentC
};
</script>

代码解释

max="2" 表示 <KeepAlive> 最多缓存 2 个组件实例。当切换到第三个组件时，最早缓存的组件实例会被销毁。

组件缓存状态的生命周期钩子

当组件被 <KeepAlive> 缓存时，会有两个特殊的生命周期钩子 onActivated 和 onDeactivated，可以在这两个钩子中执行相应的逻辑。

<template>
  <div>
    This is Component A.
  </div>
</template>

<script setup>
import { onActivated, onDeactivated } from 'vue';

onActivated(() => {
  console.log('Component A is activated.');
});

onDeactivated(() => {
  console.log('Component A is deactivated.');
});
</script>

代码解释

onActivated：当组件被激活（从缓存中显示出来）时触发。
onDeactivated：当组件被停用（被隐藏并放入缓存）时触发。

通过上述方法，你可以在 Vue 3 中灵活地缓存和复用动态组件，提高应用的性能和用户体验。

2. 组件实例缓存（手动管理）

除了使用 <KeepAlive>，你还可以手动管理组件实例的缓存。通过一个对象来存储组件实例，在需要使用时从对象中获取。

<template>
  <div>
    <button @click="showComponent('ComponentA')">显示组件 A</button>
    <button @click="showComponent('ComponentB')">显示组件 B</button>
    <component :is="currentComponent" v-if="currentComponent" />
  </div>
</template>

<script setup>
import { ref, shallowRef, markRaw } from 'vue';
import ComponentA from './ComponentA.vue';
import ComponentB from './ComponentB.vue';

// 存储组件实例的缓存对象
const componentCache = {};
const currentComponent = ref(null);

const showComponent = (name) => {
  if (!componentCache[name]) {
    const component = name === 'ComponentA' ? ComponentA : ComponentB;
    // 创建组件实例并存储到缓存中
    componentCache[name] = markRaw(shallowRef(component));
  }
  currentComponent.value = componentCache[name].value;
};
</script>

代码解释

componentCache 是一个对象，用于存储组件实例。
showComponent 方法根据传入的组件名称，检查缓存中是否存在该组件实例。如果不存在，则创建实例并存储到缓存中；如果存在，则直接从缓存中获取。

3. 组合式函数封装

可以将动态组件的逻辑封装到组合式函数中，提高代码的复用性。

// useDynamicComponent.js
import { ref, shallowRef, markRaw } from 'vue';

export function useDynamicComponent() {
  const componentCache = {};
  const currentComponent = ref(null);

  const showComponent = (name, component) => {
    if (!componentCache[name]) {
      componentCache[name] = markRaw(shallowRef(component));
    }
    currentComponent.value = componentCache[name].value;
  };

  return {
    currentComponent,
    showComponent
  };
}

<template>
  <div>
    <button @click="showComponent('ComponentA', ComponentA)">显示组件 A</button>
    <button @click="showComponent('ComponentB', ComponentB)">显示组件 B</button>
    <component :is="currentComponent" v-if="currentComponent" />
  </div>
</template>

<script setup>
import { useDynamicComponent } from './useDynamicComponent.js';
import ComponentA from './ComponentA.vue';
import ComponentB from './ComponentB.vue';

const { currentComponent, showComponent } = useDynamicComponent();
</script>

代码解释

useDynamicComponent 组合式函数封装了动态组件的缓存和显示逻辑。
在组件中使用该组合式函数，通过调用 showComponent 方法来显示不同的组件。

总结

以上为个人经验，希望能给大家一个参考，也希望大家多多支持脚本之家。

您可能感兴趣的文章:

详解vue如何获取当前系统时间
这篇文章主要详细介绍了vue如何获取当前系统时间,本文通过实例代码给大家介绍的非常详细,对大家的学习或工作具有一定的参考借鉴价值,需要的朋友可以参考下
2024-01-01
vue如何转换时间格式为年月日时分秒和年月日(补零)
这篇文章主要介绍了vue如何转换时间格式为年月日时分秒和年月日(补零),具有很好的参考价值,希望对大家有所帮助,如有错误或未考虑完全的地方,望不吝赐教
2024-04-04
分享一个精简的vue.js 图片lazyload插件实例
本篇文章主要介绍了分享一个精简的vue.js 图片lazyload插件实例。非常具有实用价值，需要的朋友可以参考下。
2017-03-03
vuex与map映射实现方法梳理分析
Vuex中的映射允许您将state中的任何属性(state、getter、mutation和action)绑定到组件中的计算属性,并直接使用state中的数据，下面我们来详细了解
2022-09-09
vue递归实现树形组件
这篇文章主要为大家详细介绍了vue递归实现树形组件，文中示例代码介绍的非常详细，具有一定的参考价值，感兴趣的小伙伴们可以参考一下
2022-07-07
Vue框架中正确引入JS库的方法介绍
最近在学习使用vue框架，在使用中遇到了一个问题，查找相关资料终于找了正确的姿势，所以这篇文章主要给大家介绍了关于在Vue框架中正确引入JS库的方法，需要的朋友可以参考借鉴，下面来一起看看吧。
2017-07-07
vue.js指令v-for使用以及下标索引的获取
今天小编就为大家分享一篇关于vue.js指令v-for使用以及下标索引的获取，小编觉得内容挺不错的，现在分享给大家，具有很好的参考价值，需要的朋友一起跟随小编来看看吧
2019-01-01
vue项目在IE浏览器下运行空白问题及解决
IE11浏览器无法解析ES6语法导致Vue项目在IE11下显示空白,解决方法包括安装babel-polyfill,并在项目的main.js文件中引入babel-polyfill,此外,js-base64版本3及以上不兼容IE11,解决办法是使用版本3以下的js-base64,这些措施可以帮助兼容IE11,确保项目正常运行
2024-09-09
总结vue映射的方法与混入的使用过程
这篇文章主要介绍了总结vue映射的方法与混入的使用过程，具有很好的参考价值，希望对大家有所帮助。如有错误或未考虑完全的地方，望不吝赐教
2022-04-04
vue-cli或vue项目利用HBuilder打包成移动端app操作
这篇文章主要介绍了vue-cli或vue项目利用HBuilder打包成移动端app操作，具有很好的参考价值，希望对大家有所帮助。一起跟随小编过来看看吧
2020-07-07