vue3 使用keepalive

Vue 3中使用`<keep-alive>`组件来缓存和复用组件。`<keep-alive>`是一个抽象组件，它会将其包裹的动态组件缓存起来，而不是销毁和重新创建它们。

要在Vue 3中使用`<keep-alive>`，需要在需要缓存的组件外部包裹它。例如：

<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>

在上面的示例中，`<component>`用于动态渲染当前的组件，而`<keep-alive>`用于缓存这些组件。每次切换组件时，当前组件会被缓存起来，而不是销毁。

注意：在使用`<keep-alive>`时，被包裹的组件需要有唯一的`key`属性，以便Vue可以正确地缓存和复用组件。