一、问题

1. component使用()=>import(‘xxx.vue’)作为组件渲染时，渲染不出来。控制台有警告：home:6 [Vue warn]: Invalid VNode type: undefined (undefined)
2. 再点击页面其他地方又报错：TypeError: Cannot read properties of undefined (reading ‘__asyncLoader’)
3. 具体错误如下：
4. 代码如下：`

 <component :is="testComponent"></component>
 const testComponent = () => import('@/views/commodity-management/new-approval-record/index.vue')```

二、原因及解决方法

1. 但是为什么我看 RouterView中可以正常渲染呢？

```javascript
`   <RouterView>
        <template #default="{ Component }">
          <component :is="Component"></component>
        </template>
      </RouterView>const testComponent = () => import('@/views/commodity-management/new-approval-record/index.vue') `

２.看了源码是提前用vue.h处理过了

３.因为 ()=>import() 是异步引入组件，所以component内置组件不能解析，使用 defineAsyncComponent就可以正常渲染了

const testComponent = defineAsyncComponent(() => import('@/views/commodity-management/new-approval-record/index.vue'))

三、总结

1.对于 ()=>import('xxx.vue) 引入的异步组件需要使用 defineAsyncComponent解析后才能在 template中渲染
2. defineAsyncComponent一般用于代码优化：对非首屏、体积大、不常用的组件使用 defineAsyncComponent，能够提升应用加载速度和用户体验
3. 我使用到defineAsyncComponent的场景是：有很多业务上关联性不大的组件，但从抽象层面上都是同类性质的组件，比如各种操作记录(新增商品、批准文号对接、条形码对接、追溯码对接)，ui希望放在一起如下图所示,直接整合在vue中不太合理，所以只是在路由中区分。但是随着放在同一页面的组件越来越多，单个tab已经无法容纳下所有组件。所以只能在tab中嵌套tab,考虑到还会有相似的嵌套，所以必须使用 路由中()=>import()异步引入的的组件来控制渲染。

/*

希望对你有帮助！
如有错误,欢迎指正,谢谢！

*/