Vue 3 KeepAlive 组件：缓存动态组件示例

<template>
  <div>
    <button @click="toggleComponent">Toggle Component</button>
    <keep-alive>
      <component :is="currentComponent"></component>
    </keep-alive>
  </div>
</template>
<script>
import ComponentA from './ComponentA'
import ComponentB from './ComponentB'

export default {
  data() {
    return {
      currentComponent: 'ComponentA'
    }
  },
  components: {
    ComponentA,
    ComponentB
  },
  methods: {
    toggleComponent() {
      this.currentComponent = this.currentComponent === 'ComponentA' ? 'ComponentB' : 'ComponentA'
    }
  }
}
</script>
<p>在上面的例子中，有两个组件<code>ComponentA</code>和<code>ComponentB</code>，当点击按钮时，<code>currentComponent</code>的值会在<code>ComponentA</code>和<code>ComponentB</code>之间切换。使用<code>&lt;keep-alive&gt;</code>将动态组件包裹起来，可以保留组件的状态，避免每次切换组件时都重新渲染。</p>