Vue3动态组件使用例子，解决Vue received a Component which was made a reactive object.

使用vue3动态组件的时候，需要使用shallowRef进行包裹组件id，用于动态切换组件，不然会报错误：App.vue:12 [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`. 

先创建三个小组件，然后在父组件里面引入，三个小组件的代码如下

First组件：

<template>
  <div style="height: 300px; width:500px">欢迎来到动态组件First
  </div>
</template>
 
<script setup lang="ts">
 
</script>
 
<style scoped></style>复制

Second组件：

<template>
  <div style="height: 300px; width:500px">你知道西游记是哪一年的吗Seond</div>
</template>
 
<script setup lang="ts">
 
</script>
 
<style scoped></style>复制

Three组件：

<template>
  <div style="height: 300px; width:500px">你知道英雄联盟吗Three</div>
</template>
 
<script setup lang="ts">
</script>
 
<style scoped></style>复制

父组件：

<template>
  <div>
    <div style="margin: 10px;">动态组件使用例子</div>
    <button
      v-for="(item, index) in componentData"
      @click="switchComp(item.comp)"
      :key="index"
      style="margin-right: 10px; border: 1px solid black; padding: 5px"
    >
      {{ item.name }}
    </button>
    <component :is="compId"></component>
  </div>
</template>
 
<script setup lang="ts">
import { ref, shallowRef } from 'vue'
import FirstVue from './components/FirstVue.vue'
import SecondVue from './components/SecondVue.vue'
import ThreeVue from './components/ThreeVue.vue'
 
let compId = shallowRef(FirstVue)
// let compId = ref(FirstVue)
 
const componentData = [
  {
    name: 'first',
    comp: FirstVue
  },
  {
    name: 'second',
    comp: SecondVue
  },
  {
    name: 'three',
    comp: ThreeVue
  }
]
 
const switchComp = (comp)=>{
  compId.value = comp
}
 
</script>
 
<style scoped></style>复制

效果：