vue3 动态keepalive 缓存

Vue 3 中的动态 keep-alive 缓存可以通过使用 `<keep-alive>` 组件来实现。该组件包裹需要缓存的动态组件，并根据组件的唯一标识符来决定是否缓存。

下面是一个示例：

<template>
  <div>
    <button @click="toggleComponent">Toggle Component</button>
    <keep-alive>
      <component :is="currentComponent" :key="componentKey"></component>
    </keep-alive>
  </div>
</template>

<script>
export default {
  data() {
    return {
      currentComponent: 'ComponentA',
      componentKey: 0
    };
  },
  methods: {
    toggleComponent() {
      this.currentComponent = this.currentComponent === 'ComponentA' ? 'ComponentB' : 'ComponentA';
      this.componentKey += 1; // 更新 key，强制重新渲染组件
    }
  }
};
</script>

在上面的示例中，我们使用了一个按钮来切换两个不同的组件（`ComponentA` 和 `ComponentB`）。通过将它们包裹在 `<keep-alive>` 组件中，并根据 `componentKey` 的变化来强制重新渲染，我们可以实现动态的缓存。

当切换组件时，Vue 会优先从缓存中获取已经渲染过的组件实例，而不是销毁并重新创建新的实例。这样可以提高性能并保持组件状态的连续性。

请注意，每个缓存的组件都需要有唯一的标识符，这里我们使用 `:key` 绑定 `componentKey` 来实现。确保每个组件的标识符在切换时是唯一的，这样才能正确地缓存和重新渲染组件。

希望这个示例对你有帮助！