导言
在Vue2中可以使用 component :is="xxx" 进行动态渲染，在Vue3的选项式API中也可以直接执行动态渲染，在Vue3的组合式API中，却无法直接使用，如何解决呢？
探索
<script steup lang="ts">
import {onMounted} from 'vue';
import listPage from './views/listPage/index.vue';
let pageName = ref<string>(null);
const changePageName = (name) => {
pageName.value = name;
};
onMounted(()=>{
changePageName('listPage');
});
</script>
<template>
<component :is="pageName">
</template>问题
在上述的代码中，是无法直接进行渲染的，如果不是走组合式API的方法，也是可以直接进行渲染的。
解决方式 - 亲测可用
<script steup lang="ts">
import {onMounted,shallowReactive} from 'vue';
import listPage from './views/listPage/index.vue';
let pageName = ref<string>(null);
// 通过shallowReactive进行定义
shallowReactive({
listPage
});
const changePageName = (name) => {
pageName.value = name;
};
onMounted(()=>{
changePageName('listPage');
});
</script>
<template>
<component :is="pageName">
</template>根因分析
为何用shallowReactive可以进行渲染，而不使用无法直接进行渲染呢？