目录导航

这一节，我们的示例代码如下

根据之前分析组件注册的逻辑，我们将代码定位到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

（可以看出，当进行异步加载时，实际上是手动调用了update进行渲染dom）

        代码向下

（将在factory调用时被执行，并注册resolved标记，值为组件构造器，once方法利用闭包机制确保函数只被调用一次）

        代码向下，定义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