Vue 3 中使用 keep-alive 组件缓存动态组件 - 示例讲解

在 Vue 3 中，可以使用keep-alive组件来缓存动态组件或者路由视图，从而避免重复创建和销毁。

以下是一个简单的示例：

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

<script>
import ComponentA from './ComponentA.vue';
import ComponentB from './ComponentB.vue';

export default {
  data() {
    return {
      componentName: 'ComponentA',
    };
  },
  methods: {
    toggleComponent() {
      this.componentName = this.componentName === 'ComponentA' ? 'ComponentB' : 'ComponentA';
    },
  },
  components: {
    ComponentA,
    ComponentB,
  },
};
</script>

在上面的示例中，我们使用了一个keep-alive组件来缓存<component>，并使用动态的componentName来切换组件。当点击按钮时，组件会在ComponentA和ComponentB之间切换，但是每次切换时，组件的状态都会得到保留，而不是重新创建。

这是一个简单的用法示例，你可以根据实际需求进行调整和扩展。