vue3中动态组件component不解析的问题

1. vue3中遇到一个问题，循环遍历 component 组件，组件解析失败

下面的写法在vue2中是没有问题的，但 vue3 却解析失败。
<template>
    <div v-for="(item,index) in arr" :key="item.id">
    <!-- 这里需要展示的组件是 fooPre 和 barPre ，item.type的值为 foo 或 bar-->
         <component :is="item.type+'Pre'"  />
     </div>
</template>
<script setup>
    import fooPre from './fooPre.vue'
    import barPre from './barPre.vue'
    const arr = [
        {id:1,type:'foo'},
        {id:1,type:'bar'},
    ]
</script>

2.解决问题。官网中有描述，component 中 :is应该等于一个变量,而不是字符串

<template>
    <!-- 确保 :is等于一个变量 这里设置了一个映射关系:  foo=>fooPre bar=>barPre -->
    <div v-for="(item,index) in arr" :key="item.id">
            <component :is="map[item.type]"  />
    </div>
</template>
<script setup>
    import fooPre from './fooPre.vue'
    import barPre from './barPre.vue'
    const arr = [
        {id:1,type:'foo'},
        {id:1,type:'bar'},
    ]
    const map = {
        foo:fooPre,
        bar:barPre
    }
</script>