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

在 Vue 3 中，可以使用``组件来缓存动态组件或者是路由页面。下面是一个简单的例子：

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

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

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

在这个例子中，我们有两个组件`ComponentA`和`ComponentB`。通过点击'Toggle Component'按钮，我们可以切换当前显示的组件。使用``组件将动态组件包裹起来，这样切换组件时，之前渲染的组件实例会被缓存起来，避免每次切换都重新创建组件实例。

注意，``组件只能包裹动态组件或者是``组件。