Vue中的组件从初始化到挂载经历了什么

new Vue({
  el: "#app",
  render: h => h(AppSon)
});

const AppSon = {
  name: "app-son",
  data() {
    return {
      msg: 123
    };
  },
  render(h) {
    return h("span", [this.msg]);
  }
};

vm.$createElement = function(a, b, c, d) {
  return createElement(vm, a, b, c, d, true);
};

function createElement (
  // 上一步传进来的vm实例，在哪个组件的render里调用，context就是哪个组件的实例。
  context,
  // 在例子中，就是AppSon这个对象
  tag,
  // 可以传入props等交给子组件的选项
  data,
  // 子组件中间的内容
  children,
  ...
)

if (typeof tag === "string") {
  // html标签流程
} else {
  // 组件化流程
  vnode = createComponent(tag, data, context, children);
}

function createComponent(
  // 还是上文中的tag，本文中是AppSon对象
  Ctor,
  // 下面的都一致
  data,
  context,
  children
) {
  if (isObject(Ctor)) {
    Ctor = baseCtor.extend(Ctor);
  }

  // 给vnode安装一些生命周期函数（注意这里是vnode的生命周期，而不是created那些组件声明周期）
  installComponentHooks(data);

  var vnode = new VNode(
    "vue-component-" + Ctor.cid + (name ? "-" + name : ""),
    data,
    undefined,
    undefined,
    undefined,
    context,
    {
      Ctor: Ctor,
      propsData: propsData,
      listeners: listeners,
      tag: tag,
      children: children
    },
    asyncFactory
  );

  return vnode;
}

if (isObject(Ctor)) {
  Ctor = baseCtor.extend(Ctor);
}

Vue.extend = function(extendOptions) {
  extendOptions = extendOptions || {};
  // this在这个例子其实就是Vue。
  var Super = this;

  // Appson这个组件的构造函数
  var Sub = function VueComponent(options) {
    // 这个_init就是调用的Vue.prototype._init
    this._init(options);
  };

  // 把Vue.prototype生成一个
  // { __proto__: Vue.prototype }这样的对象，
  // 直接赋值给子组件构造函数的prototype
  // 此时子组件构造函数的原型链上就可以拿到Vue的原型链的属性了
  Sub.prototype = Object.create(Super.prototype);
  Sub.prototype.constructor = Sub;

  // 合并Vue.option上的一些全局配置
  Sub.options = mergeOptions(Super.options, extendOptions);
  Sub["super"] = Super;

  // 拷贝静态函数
  Sub.extend = Super.extend;
  Sub.mixin = Super.mixin;
  Sub.use = Super.use;

  // 返回子组件的构造函数
  return Sub;
};

if (isDef((i = i.hook)) && isDef((i = i.init))) {
  i(vnode);
}

const child = (vnode.componentInstance = createComponentInstanceForVnode(
  vnode,
  activeInstance
));
child.$mount(vnode.elm);

createComponentInstanceForVnode (
  vnode: any,
  parent: any,
): Component {
  const options: InternalComponentOptions = {
    // 标记这是一个组件节点
    _isComponent: true,
    // Appson组件的vnode
    _parentVnode: vnode,
    // 当前正在活跃的父组件实例，在本例中就是根Vue实例
    // new Vue({
    //   el: "#app",
    //   render: h => h(AppSon)
    // });
    parent
  }

  return new vnode.componentOptions.Ctor(options)
}

{
  data() {

  },
  props: {

  },
  methods() {

  }
}

{
    _isComponent: true,
    _parentVnode: vnode,
    parent,
  }

var opts = (vm.$options = Object.create(vm.constructor.options));