vue异步组件defineAsyncComponent的使用

在一些场景中，可能需要根据用户的选择，决定去加载一些组件，比如地图下钻、模版切换等，这些场景中，虽然一次性将所有可能用到的组件都加载也可以运行，但对性能会是很大的伤害，因此，在这些场景中，我们需要根据用户的选择去异步加载所需要用到的组件。

vue官方为我们提供了defineAsyncComponent组件，但是好像大部分人都没有用到，遇到问题时，网上也很难找到相关答案。

学习defineAsyncComponent异步组件之前，我们需要了解两个基本知识点，1、defineAsyncComponent接收一个返回Promise对象的加载函数作为参数，2、ES的加载模块返回结果为Promise。因此，我们可以直接将ES的加载模块作为defineAsyncComponent的参数来使用。

很多人在运行官方的例子时，没有问题，但自己一写就错了。

仔细查看官方给出的例子：

import { defineAsyncComponent } from 'vue'

const AsyncComp = defineAsyncComponent(() =>
  import('./components/MyComponent.vue')
)

怎么说呢，这个例子还是有一定的误导性，粗心的人大概率会没注意到这里使用到了箭头函数的简写形式。确实在实际编码过程中，我们如果使用箭头函数的简写形式，一般都会写在一行，这种换行的写法还是见的比较少的，如下：

const fun = ()=> 
    console.log('abc')

所以，当我们自己写时，如果需要写成完整形式，则在函数体内，一定要记得return，如下：

const AsyncComp = defineAsyncComponent(() =>{
    return import('./components/MyComponent.vue')
})

事实上，很多的问题，都是源于我们粗心大意。