Vue动态组件自更新异常求助：切换后实例崩溃

问题现象 #

开发动态切换组件的功能时，首次切换组件可正常工作，但切换后Vue实例崩溃，第二个组件无法正常交互。代码中通过子组件emit传递组件对象给父组件，实现<component :is>的动态切换，但存在Component1与Component2互相导入的循环引用情况。

根本原因 #

子组件间的循环导入+直接传递组件对象，会导致Vue组件实例初始化和响应式追踪逻辑异常。循环引用会打乱组件模块的加载状态，传递未被正确处理的组件对象时，Vue内部的实例管理机制会出现错误，最终引发实例崩溃。

解决方案：统一管理组件，避免循环导入与直接传递组件对象 #

最稳妥的方式是在主组件中集中管理所有待切换组件，子组件仅传递组件标识（如字符串），由主组件根据标识映射到对应组件。这种方式彻底规避循环导入问题，也不会出现组件对象传递引发的异常。

修改后的代码示例 #

主组件

<script setup>
import { ref } from 'vue'
import Component1 from './Component1.vue';
import Component2 from './Component2.vue';

// 维护组件映射表
const componentMap = {
  component1: Component1,
  component2: Component2
}
const currentComponent = ref('component1')

const updateComponent = (componentKey) => {
  currentComponent.value = componentKey
}
</script>

<template>
  <component :is="componentMap[currentComponent]" @updateComponent="updateComponent"></component>
</template>

Component1

<script setup>
const emit = defineEmits(["updateComponent"])
</script>

<template>
  <div>Hello, I'm component 1</div>
  <button @click="emit('updateComponent', 'component2')">
    click here to change component
  </button>
</template>

Component2

<script setup>
const emit = defineEmits(["updateComponent"])
</script>

<template>
  <div>Hello, I'm component 2</div>
  <button @click="emit('updateComponent', 'component1')">
    click here to change component
  </button>
</template>

为何之前的尝试无效？ #

• 使用ref/shallowRef：仅处理响应式容器，但循环导入导致的组件模块加载问题未解决，组件对象本身的引用异常依然存在。
• 使用markRaw：虽能避免组件对象被转为响应式，但循环引用的根本问题未消除，组件初始化时的依赖链仍处于混乱状态。
• 主组件导入所有组件：但子组件间依然互相导入，循环引用问题未解决，传递组件对象时仍会触发内部逻辑异常。

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