vue3 异步组件

<template>
     <div class="tabs-content" @click="switchTab(tab)" 
     v-for="(tab, index) in tabData" :key="index">
        {{ tab.name }}
      </div>
       <keep-alive>
             <component :is="currentTab.tabComp"></component>
       </keep-alive>
</template>

<script setup lang="ts">
    
    import { reactive,ref,markRaw,defineAsyncComponent} from 'vue';
    const A = defineAsyncComponent(() =>
      import('./A.vue')
    )
    const B = defineAsyncComponent(() =>
      import('./B.vue')
    )
    const C = defineAsyncComponent(() =>
      import('./C.vue')
    )
    const tabData=reactive([
        {name: 'A组件',tabComp:markRaw(A)},                    
        {name: 'B组件',tabComp:markRaw(B)},                            
        {name: 'C组件',tabComp:markRaw(C)},
    ])
    type tabType={
        name:string,
        tabComp:any
    }
    const switchTab=(tab:tabType)=>{
         currentTab.tabComp = tab.tabComp

    }
    const currentTab = reactive<tabType[]>({
        tabComp:tabData[0].tabComp
    })
    
</script>

<style>
</style>
在打包时，异步组件会被单独抽离出来，打成一个单独的AsyncComponent