Vue3动态组件component 如何和keepalive结合实现多个组件的缓存

Vue3 中的动态组件 `v-component` 结合 `keep-alive` 功能可以有效地管理多个组件的缓存，防止不必要的重新渲染，提高性能。以下是实现步骤：

1. 首先，在你的组件模板中使用 `<keep-alive>` 包裹动态组件，这将所有在该标签内的组件缓存起来：

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

2. 定义 `currentComponent` 数据属性，用于切换当前显示的组件：

<script setup>
import { ref } from 'vue';
const currentComponent = ref('componentA');
// 假设你有多个组件如 componentA, componentB, componentC
const components = ['componentA', 'componentB', 'componentC'];
</script>

3. 在需要改变组件时，更新 `currentComponent` 变量：

<template>
...
<button @click="changeComponent">切换组件</button>
...

<script setup>
...
function changeComponent() {
  const index = // 根据业务需求获取下一个或上一个索引，如果到达边界则循环回开头
  currentComponent.value = components[index];
}
</script>

4. 如果想设置缓存策略，例如只缓存用户交互后才会切换的组件，可以在 `keep-alive` 的 `include` 或 `exclude` 属性中添加条件判断。

通过这种方式，每次切换组件时，只有被切换的那部分会被卸载并保存到内存中，其他未切换的组件仍然保留在缓存中，直到它们再次激活。