Vue 3.x 动态组件（is 属性）

Question

动态组件通过 v-bind 绑定，让多个组件使用同一个挂载点( component 标签)，并动态切换，这就是动态组件

通过 is 切换 A、B 组件：

import A from './A.vue'
import B from './B.vue'

<component :is="A"></component>

使用场景

tab 标签页切换居多

注意事项

在 Vue2 的时候 is 是通过组件名称切换的，在 Vue3 setup 是通过组件实例切换的

如果你把组件实例放到 Reactive Vue 会给你一个警告 runtime-core.esm-bundler.js:38 [Vue warn]: Vue received a Component which was made a reactive object. This can lead to unnecessary performance overhead, and should be avoided by marking the component with markRaw or using shallowRef instead of ref .
Component that was made reactive:

这是因为 reactive 会进行 proxy 代理，而我们组件代理之后毫无用处，节省性能开销推荐我们使用 shallowRef 或者 markRaw 跳过 proxy 代理

<script lang="ts" setup>
import { reactive, markRaw } from 'vue'
import A from './components/a.vue'
import B from './components/b.vue'

type Tabs = {
  name: string
  comName: any
}
const data = reactive<Tabs[]>([
  {
    name: 'a',
    comName: markRaw(A)
  },
  {
    name: 'b',
    comName: markRaw(B)
  }
])
</script>