【Vue】理解Vue源码系列（五）

我们了解了Vue首次加载过程，之前的分析是建立在有template的基础上的，例如

var app = new Vue({
   
    template:"<div>hello</div>",
    el: '#app',
})

但更多情况我们是传入一个组件来完成Vue的初始化，例如

var demo = {
   
    name: 'demo',
    template: '<div>hello</div>',
}
var app = new Vue({
   
    template:"<div>hello</div>",
    el: '#app',
    render: h => h(demo)
})

接下来我们需要去了解组件的渲染过程。

实例化Vue函数，先执行_init函数，再执行$mount方法，在compiler阶段，因为我们传入了render函数，直接拿这个手写的render函数来使用。再接着是在mountComponent阶段执行_render私有方法，在这之前的过程和我们传入template差不多，在_render中有一段关键代码判断传入的tag是否为字符串，因此我们传入组件就到了另一个逻辑中。

if (typeof tag === 'string') {
   
    let Ctor
    ns = (context.$vnode && context.$vnode.ns) || config.getTagNamespace(tag)
    if (config.isReservedTag(tag)) {
   
      // platform built-in elements
      if (process.env.NODE_ENV !== 'production' && isDef(data) && isDef(data.nativeOn)) {
   
        warn(
          `The .native modifier for v-on is only valid on components but it was used on <${
     tag}>.`,
          context
        )
      }
      vnode = new VNode(
        config.parsePlatformTagName(tag), data, children,
        undefined, undefined, context
      )
    } else if ((!data || !data.pre) && isDef(Ctor = resolveAsset(context.$options, 'components', tag))) {
   
      // component
      vnode = createComponent(Ctor, data, context, children, tag)
    } else {