vue使用异步组件的原因有哪些

components:{
VideoPlay:(resolve)=>import("../components/VideoPlay")
}

components:{
VideoPlay(resolve){
require(["../components/VideoPlay"],resolve)
}
}

或者使用回调函数

exportfunctioncreateComponent(
Ctor:Class|Function|Object|void,
data:?VNodeData,
context:Component,
children:?Array,
tag?:string
):VNode|Array|void{
letasyncFactory
if(isUndef(Ctor.cid)){//看组件是否是一个函数
asyncFactory=Ctor//异步组件一定是一个函数新版本提供了对象的写法
Ctor=resolveAsyncComponent(asyncFactory,baseCtor)//默认调用此函数时返回undefiend
//第二次渲染时Ctor不为undefined
if(Ctor===undefined){
//返回async组件的占位符节点
//作为注释节点，但保留该节点的所有原始信息
//该信息将用于异步服务器渲染和水合。
returncreateAsyncPlaceholder(
asyncFactory,
data,
context,
children,
tag
)
}
}
}

exportfunctionresolveAsyncComponent(
factory:Function,
baseCtor:Class
):Class|void{
//如果有错误就返回错误结果
if(isTrue(factory.error)&&isDef(factory.errorComp)){
returnfactory.errorComp
}
//再次渲染时可以拿到获取的最新组件
//如果有成功的结果，就直接返回去
if(isDef(factory.resolved)){
returnfactory.resolved
}

if(owner&&!isDef(factory.owners)){
//forceRender强制刷新渲染
constforceRender=(renderCompleted:boolean)=>{
for(leti=0,l=owners.length;i)=>{
factory.resolved=ensureCtor(res,baseCtor)
if(!sync){
forceRender(true)//执行强制更新视图重新渲染方法
}else{
owners.length=0
}
})
//失败
constreject=once(reason=>{
if(isDef(factory.errorComp)){
factory.error=true
forceRender(true)
}
})

//执行factory将resolve方法和reject方法传入
constres=factory(resolve,reject)

sync=false
returnfactory.loading?factory.loadingComp:factory.resolved//返回结果
}
}

//创建一个异步组件的占位，空虚拟节点也就是一个注释
exportfunctioncreateAsyncPlaceholder(
factory:Function,
data:?VNodeData,
context:Component,
children:?Array,
tag:?string
):VNode{
constnode=createEmptyVNode()
node.asyncFactory=factory
node.asyncMeta={data,context,children,tag}
returnnode
}