Vue3动态组件无法渲染？基于Vue2示例的适配问题求助

我来帮你梳理下代码里的问题，你的Vue2代码能正常运行，但迁移到Vue3时几个细节没处理对，导致组件不显示：

• 错误1：computed 嵌套在 reactive 对象中
  Vue3的computed返回的是独立的响应式ref对象，不能直接塞进reactive里。正确做法是单独定义计算属性，而非嵌套在state对象中。

• 错误2：ref值未正确访问
  isShow是用ref声明的响应式变量，在computed回调里必须通过isShow.value访问实际值，直接写isShow拿到的是ref包装对象，会导致判断逻辑失效。

• 错误3：空字符串作为组件占位值
  当isShow为false时返回空字符串''，Vue3会尝试把空字符串当作组件名查找，找不到就不会渲染任何内容。应该返回null表示“不渲染组件”，这更符合Vue3的规范。

以下是修正后的完整代码：

<template>
  <div>
    <h1>O_o</h1>
    <component :is="name"/>
    <button @click="onClick">Click me !</button>
  </div>
</template>

<script>
import { ref, computed } from 'vue'
export default {
  setup() {
    const isShow = ref(false);
    
    // 单独定义computed，正确访问isShow.value
    const name = computed(() => isShow.value ? import('./DynamicComponent.vue') : null);
    
    const onClick = () => {
      isShow.value = true;
    }

    return { name, onClick }
  }
}
</script>

补充说明：
动态组件使用import()是异步组件的写法，Vue3完全支持这种方式。修正后点击按钮切换isShow为true时，就会正确加载并渲染DynamicComponent了。

内容的提问来源于stack exchange，提问作者progervova