这一节,我们的示例代码如下
根据之前分析组件注册的逻辑,我们将代码定位到initAssetRegisters函数
根据上一次分析,当我们传递的是一个对象的时候,走的是如下逻辑
这一次,我们传递的是一个函数,故不会再进入条件并构建组件构造器,故直接将函数定义挂载至options的components上
如此,组件的初始化工作已经基本完成,向下执行new vue,并依次调用init-mount-render方法,由于异步组件也是组件注册,因此和上一节一样也会执行到如下代码
同样的在resolveAsset中会查找到我们向components挂载的指向的组件对象或函数返回。接着调用createComponent,我们知道,render(h){return h(App)}中,这里将调用
在Vue.component('App',{}),将在initAssetRegisters中通过this.options._base调用extend
而在当前示例中,到目前为止,还未调用extend方法去创建构造器,因此在下边的逻辑中必定会通过某种形式去extend!代码向下
由于在经过extend后会向实例挂载cid,故这里是没有的,故进入判断调用resolveAsyncComponent并传递组件的function和Vue
判断一是"处理加载状态"时提供的,参数二在同步执行过程中不存在,故跳过
owner保存的是当前的组件实例,它在render的过程中被缓存
factory.owners不存在在同步过程中不存在,跳过
factory.loading是"处理加载状态"时提供的,跳过
代码向下进入判断
首先向factory上挂载owners,以便在真正执行resolve异步加载时跳过后续代码
定义forceRender,该函数调用$forceUpdate
代码向下
代码向下,定义reject函数,这将在组件渲染遇错时触发
代码向下,调用factory,实际上调用的就是我们在注册组件时传递的第二个函数参数,返回undefined
同时将定义的resolve函数传递给factory函数,该函数将在同步代码执行完毕后被webpack调用
代码向下
将async置为false
并返回undefined
返回createComponent函数,满足条件
将创建一个空的vnode,空vnode将会被渲染为一个占位节点(注释节点)
当同步代码执行后,webpack将自动帮我们调用resolve函数,在该函数中将帮我们创建组件构造器
然后手动update,此时将执行组件渲染,将再一次走到这里
此时再次进入resolveAsyncComponent方法,resolved有值,因此直接返回构造器
再次回到createComponent函数,和之前通过baseCtor.extend一样,拿到组件构造器后render为vnode,最终通过update走patch为dom