场景
2个按钮,点击之后,下面加载不同的组件。
现象
分析
实际动态加载的组件,不是深层响应式的,推荐使用 shallowReactive 或 shallowRef,即浅层作用形式,仅最外层是响应式,以此来提升性能。
上代码
动态渲染组件的时候需要用defineAsyncComponent
const currentCom = shallowRef();
const componentList = {
comA: defineAsyncComponent(()=> import('@/page/comA.vue')),
comB: defineAsyncComponent(()=> import('@/page/comB.vue'))
}
<Component :is="currentCom ">
完美解决!