vue3 TS 使用 component is 动态加载组件的正确用法

<template>
  <div>
    <div id="nav">
      <ul>
        <li @click="onCompChange('CompA')">第一个组件</li>
        <li @click="onCompChange('CompB')">第二个组件</li>
      </ul>
    </div>
    asdfas
    <component :is="compNameRef"></component>
    ccc
  </div>
</template>

<script lang="ts">
import {defineAsyncComponent, defineComponent, Ref, ref} from "vue";

export default defineComponent({
  setup() {
    const compNameRef = ref<string>('CompA')

    function onCompChange(compName: string) {
      compNameRef.value = compName
    }

    return {compNameRef, onCompChange}
  },
  components: {
    'CompA': defineAsyncComponent(() => import(/* webpackChunkName: "CompA" */ './components/CompA.vue')),
    'CompB': defineAsyncComponent(() => import(/* webpackChunkName: "CompB" */ './components/CompB.vue'))
  }
})
</script>

<style lang="less">

</style>

注意: defineAsyncComponent