<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來創(chuàng)建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 () {
    // 會根據(jù)原型鏈進(jìn)行查找，找到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進(jìn)行合并
    vm.$options = mergeOptions(vm.constructor.options, options);
    // ...
  };
  // ...
}

strategies.components = function (parentVal, childVal) {
  const result = Object.create(parentVal); // 合并后的原型鏈為parentVal
  for (const key in childVal) { // childVal中的值都設(shè)置為自身私有屬性，會優(yōu)先獲取
    if (childVal.hasOwnProperty(key)) {
      result[key] = childVal[key];
    }
  }
  return result;
};

function createVComponent (vm, tag, props, key, children) {
  const baseCtor = vm.$options._base;
  // 在生成父虛擬節(jié)點的過程中，遇到了子組件的自定義標(biāo)簽。它的定義放到了父組件的components中，所有通過父組件的$options來進(jìn)行獲取
  // 這里包括全局組件和自定義組件，內(nèi)部通過原型鏈進(jìn)行了合并
  let Ctor = vm.$options.components[tag];
  // 全局組件：Vue子類構(gòu)造函數(shù)，局部組件：對象，合并后的components中既有對象又有構(gòu)造函數(shù)，這里要利用Vue.extend統(tǒng)一處理為構(gòu)造函數(shù)
  if (typeof Ctor === 'object') {
    Ctor = baseCtor.extend(Ctor);
  }
  props.hook = { // 在渲染真實節(jié)點時會調(diào)用init鉤子函數(shù)
    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的原生標(biāo)簽
    return vNode(tag, props, key, children);
  } else {
    // 創(chuàng)建組件虛擬節(jié)點
    return createVComponent(vm, tag, props, key, children);
  }
}

// 處理組件虛擬節(jié)點
function createComponent (vNode) {
  let init = vNode.props?.hook?.init;
  init?.(vNode);
  if (vNode.componentInstance) {
    return true;
  }
}

// 將虛擬節(jié)點處理為真實節(jié)點
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 = { // 在渲染真實節(jié)點時會調(diào)用init鉤子函數(shù)
  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>