Vue3动态加载组件，警告：Vue received a Component than was made a reactive object

场景

2个按钮，点击之后，下面加载不同的组件。

现象

分析

实际动态加载的组件，不是深层响应式的，推荐使用 shallowReactive 或 shallowRef，即浅层作用形式，仅最外层是响应式，以此来提升性能。

上代码

动态渲染组件的时候需要用defineAsyncComponent

const currentCom = shallowRef();const componentList = {comA: defineAsyncComponent(()=> import('@/page/comA.vue')),comB: defineAsyncComponent(()=> import('@/page/comB.vue'))
}

<Component :is="currentCom ">

完美解决！