vue3 component动态渲染组件

bug：组件不显示  vue2数据中的name是字符串，vue3因为特性原因name不可以是字符串

bug2：vue3中的 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` 解决方案看我下面代码就可以markRaw

<template>
  <div>
    <component
      v-for="compName in listComp"
      :key="compName.name"
      :is="compName.name"
      v-bind="compName"
    >
    </component>
  </div>
</template>

<script setup>

import highwayroute from "./common/highwayRoute";
import crowdindex from "./common/crowdIndex";
import flowtrend from "./common/trend";

import {
  reactive,
  markRaw,
} from "vue";


const state = reactive({
  listComp: [
    {
      id: 1,
      name: highwayroute,
      finedName: "highwayRoute",
      com: markRaw(highwayroute),
    },
    {
      id: 2,
      name: crowdindex,
      finedName: "crowdIndex",
      data: [],
      com: markRaw(crowdindex),
    },
    {
      id: 3,
      name: flowtrend,
      finedName: "flowTrend",
      data: [],
      com: markRaw(flowtrend),
    }
  ]
});
</script>

<style lang="scss" scoped></style>