Vue 组件渲染

<div id="app">
  {{ name }}
  <my-button></my-button>
  <aa></aa>
</div>
Vue.components('my-button', {
  template: `<button>my button</button>`
});
Vue.components('aa', {
  template: `<button>global aa</button>`
});
const vm = new Vue({
  el: '#app',
  components: {
    aa: {
      template: `<button>scoped aa</button>`
    },
    bb: {
      template: `<button>bb</button>`
    }
  },
  data () {
    return {
      name: 'ss'
    };
  }
});

export function initGlobalApi (Vue) {
  Vue.options = {};
  // 最终会合并到实例上，可以通过vm.$options._base直接使用
  Vue.options._base = Vue;
  // 定义全局组件
  Vue.options.components = {};
  initExtend(Vue);
  Vue.mixin = function (mixin) {
    this.options = mergeOptions(this.options, mixin);
  };
  // 通过Vue.components来注册全局组件
  Vue.components = function (id, definition) {
    const name = definition.name = definition.name || id;
    // 通过Vue.extend来创建Vue的子类
    definition = this.options._base.extend(definition);
    // 将Vue子类添加到Vue.options.components对象中，key为name
    this.options.components[name] = definition;
  };
}

Vue.extend = function (extendOptions) {
  const Super = this;
  const Sub = function VueComponent () {
    // 会根据原型链进行查找，找到Super.prototype.init方法
    this._init();
  };
  Sub.cid = cid++;
  // Object.create将Sub.prototype的原型指向了Super.prototype
  Sub.prototype = Object.create(Super.prototype);
  // 此时prototype为一个对象，会失去原来的值
  Sub.prototype.constructor = Sub;
  Sub.options = mergeOptions(Super.options, extendOptions);
  Sub.component = Super.component;
  return Sub;
};

const Super = Vue
const Sub = function VueComponent () {
  // some code ...
};
// Object.create将Sub.prototype的原型指向了Super.prototype
Sub.prototype = Object.create(Super.prototype);
// 此时prototype为一个对象，会失去原来的值
Sub.prototype.constructor = Sub;

function initMixin (Vue) {
  Vue.prototype._init = function (options = {}) {
    const vm = this;
    // 组件选项和Vue.options或者 Sub.options进行合并
    vm.$options = mergeOptions(vm.constructor.options, options);
    // ...
  };
  // ...
}

strategies.components = function (parentVal, childVal) {
  const result = Object.create(parentVal); // 合并后的原型链为parentVal
  for (const key in childVal) { // childVal中的值都设置为自身私有属性，会优先获取
    if (childVal.hasOwnProperty(key)) {
      result[key] = childVal[key];
    }
  }
  return result;
};

function createVComponent (vm, tag, props, key, children) {
  const baseCtor = vm.$options._base;
  // 在生成父虚拟节点的过程中，遇到了子组件的自定义标签。它的定义放到了父组件的components中，所有通过父组件的$options来进行获取
  // 这里包括全局组件和自定义组件，内部通过原型链进行了合并
  let Ctor = vm.$options.components[tag];
  // 全局组件：Vue子类构造函数，局部组件：对象，合并后的components中既有对象又有构造函数，这里要利用Vue.extend统一处理为构造函数
  if (typeof Ctor === 'object') {
    Ctor = baseCtor.extend(Ctor);
  }
  props.hook = { // 在渲染真实节点时会调用init钩子函数
    init (vNode) {
      const child = vNode.componentInstance = new Ctor();
      child.$mount();
    }
  };
  return vNode(`vue-component-${Ctor.id}-${tag}`, props, key, undefined, undefined, { Ctor, children });
}

function createVElement (tag, props = {}, ...children) {
  const vm = this;
  const { key } = props;
  delete props.key;
  if (isReservedTag(tag)) { // 是否为html的原生标签
    return vNode(tag, props, key, children);
  } else {
    // 创建组件虚拟节点
    return createVComponent(vm, tag, props, key, children);
  }
}

// 处理组件虚拟节点
function createComponent (vNode) {
  let init = vNode.props?.hook?.init;
  init?.(vNode);
  if (vNode.componentInstance) {
    return true;
  }
}

// 将虚拟节点处理为真实节点
function createElement (vNode) {
  if (typeof vNode.tag === 'string') {
    if (createComponent(vNode)) {
      return vNode.componentInstance.$el;
    }
    vNode.el = document.createElement(vNode.tag);
    updateProperties(vNode);
    for (let i = 0; i < vNode.children.length; i++) {
      const child = vNode.children[i];
      vNode.el.appendChild(createElement(child));
    }
  } else {
    vNode.el = document.createTextNode(vNode.text);
  }
  return vNode.el;
}

props.hook = { // 在渲染真实节点时会调用init钩子函数
  init (vNode) {
    const child = vNode.componentInstance = new Ctor();
    child.$mount();
  }
};

<div id="app">
  {{ name }}
  <aa></aa>
</div>
<script>
  const vm = new Vue({
    el: '#app',
    components: {
      aa: {
        template: `<button>aa</button>`,
        beforeCreate () {
          console.log('child beforeCreate');
        },
        created () {
          console.log('child created');
        },
        beforeMount () {
          console.log('child beforeMount');
        },
        mounted () {
          console.log('child mounted');
        }
      },
    },
    data () {
      return {
        name: 'ss'
      };
    },
    beforeCreate () {
      console.log('parent beforeCreate');
    },
    created () {
      console.log('parent created');
    },
    beforeMount () {
      console.log('parent beforeMount');
    },
    mounted () {
      console.log('parent mounted');
    }
  });
</script>