调试组件注册过程

模板html

<div id="app"></div>
<script src="../../dist/vue.js"></script>
<script>
    // 创建全局组件，返回了组件的构造函数
    const comp = Vue.component('comp', {
      template: '<div>I am a comp</div>'
    })
    const vm = new Vue({
      el: '#app',
      // 给h函数传递的组件的构造函数，通过h函数创建组件对应的vnode
      render (h) {
        return h(comp)
      }
    })
</script>

断点

在core/global-api/assets.js中设置断点，按F5执行到这里

开始调试

1. 可以看到此时的type就是component，id就是comp，definition就是传入的选项对象

2. 下面就是判断有没有传definition选项，判断名称是否合法，然后就调用了Vue.extend构造函数

3. 按F11进入这个方法

4. 可以看到继承之后，组件的原型中也有了Vue构造函数原型的方法

5. cid变成了1

6. 合并options选项，之前用户自己传的只有name，template和_Ctor，合并之后可以看到多了Vue的选项

7. 然后就是各种继承到最后，可以进行了组件的缓存，下图是没有缓存前的样子

然后执行完缓存之后看选项中将这个组件添加到了缓存中

8.最后回到component中，将这个组件定义到options.components里面

组件注册的过程就调试完毕了