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 A from './A.vue'
    import B from './B.vue'
    import C2 from './C2.vue'
    import { reactive,ref,markRaw} from 'vue';
    const tabData=reactive([
        {name: 'A组件',tabComp:markRaw(A)},                    
        {name: 'B组件',tabComp:markRaw(B)},                            
        {name: 'C组件',tabComp:markRaw(C2)},
    ])
    type tabType={
        name:string,
        tabComp:any
    }
    const switchTab=(tab:tabType)=>{
         currentTab.tabComp = tab.tabComp

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

markRaw

作用:标记一个对象,使其永远不会再成为响应式对象

应用场景:

1.有些值不应被设置成响应式时,例如复杂的第三方类库等

2.当渲染具有不可变数据源的大列表时,跳过响应式转换可以提高性能

3.在动态渲染组件的时候我们就可以使用 markRaw 包裹。