vue3 语法糖setup 动态加载组件

defineAsyncComponent 使用:

<a-tabs type="card" v-model:activeKey="activeKey">
      <a-tab-pane key="publicData" tab="公共数据源" />
      <a-tab-pane key="proxyData" tab="代理数据源" />
      <a-tab-pane key="hostedData" tab="托管数据源" />
      <a-tab-pane key="fileData" tab="文件数据源" />
    </a-tabs>

 <div class="w-full h-full">
    <component :is="currentCopmonent" />
 </div>


<script setup>
import { ref, watch } from 'vue';
import { Tabs } from 'ant-design-vue';
  const ATabs = Tabs;
  const ATabPane = Tabs.TabPane;
import { defineAsyncComponent } from 'vue'
const activeKey = ref('publicData');

  let currentCopmonent = ref({});

  currentCopmonent.value = defineAsyncComponent(
    () => import(`./components/${activeKey.value}Source.vue`),
  );
  watch(
    () => activeKey.value,
    () => {
      currentCopmonent.value = defineAsyncComponent(
        () => import(`./components/${activeKey.value}Source.vue`),
      );
    },
  );

/*****************************************/

  <component :is="item" v-for="item in list"></component>


  <script setup>
  import { defineAsyncComponent, computed } from 'vue'
  const controlList = ['TestA', 'TestB']
  const list = computed(() => {
    return controlList.map(m => {
      return defineAsyncComponent(() => import(`src/components/portrait/${m}.vue`))
    })
  })