How are Vue components parsed and rendered?

<div id="app">
  <my-button></my-button>
</div>
<script>
 Vue.component("my-button", {
    template: "<button> Button component</button>",
   });
let vm = new Vue({
	el:'#app'
});
</script>

Vue.options._base = Vue; //You can find vue through \_base
Vue.options.components = {}; 

Vue.component = function (id, definition) {
  //Each component generates a new class to inherit the father definition = this.options._base.extend(definition);

  console.log("1. Create a constructor for the component, based on Vue", definition);

  this.options.components[id] = definition;
 };

import {mergeOptions} from '../util/index'
Vue.extend = function (definition) {
  const Vue = this;
  const Sub = function VueComponent(options) {
   this._init(options);
  };
  Sub.prototype = Object.create(Vue.prototype);
  Sub.prototype.constructor = Sub;
  Sub.options = mergeOptions(Vue.options, definition); 
  return Sub;
 };

strats.components = function (parentVal, childVal) {
 let options = Object.create(parentVal);
 if (childVal) {
  for (let key in childVal) {
   options[key] = childVal[key];
  }
 }
 return options;
};

 Vue.prototype._init = function (options) {
  const vm = this;
 ++ vm.$options = mergeOptions(vm.constructor.options, options); 
  //...
  initState(vm);
  if (vm.$options.el) {
   //Mount the data onto this template vm.$mount(vm.$options.el);
  }
 };

export function isReservedTag(str) {
 let reservedTag = "a,div,span,p,img,button,ul,li";
 return reservedTag.includes(str);
}

export function createElement(vm, tag, data = {}, ...children) {
  // If tag is a component, it should render a component's vnode
  if (isReservedTag(tag)) {
    return vnode(vm, tag, data, data.key, children, undefined);
  } else {
    const Ctor = vm.$options.components[tag]
    return createComponent(vm, tag, data, data.key, children, Ctor);
  }
}
// Create a virtual node for the component, in order to distinguish between components and elements data.hook 
function createComponent(vm, tag, data, key, children, Ctor) {
  // Component constructor if (isObject (Ctor)) {
    Ctor = vm.$options._base.extend(Ctor); // Vue.extend 
  }
  data.hook = { // This initialization method needs to be called when rendering the component init(vnode){
      let vm = vnode.componentInstance = new Ctor({_isComponent:true}); // new Sub will use this option and component configuration to merge vm.$mount(); // After the component is mounted, it will be in vnode.componentInstance.$el 
    }
  }
  return vnode(vm,`vue-component-${tag}`,data,key,undefined,undefined,{Ctor,children})
}

export function patch(oldVnode,vnode){
  // 1. Determine whether to update or render if(!oldVnode){
    return createElm(vnode);
  }else{
    // ...
  }
}

function createElm(vnode) {
 let { tag, data, children, text, vm } = vnode;
 if (typeof tag === "string") {
  if (createComponent(vnode)) {
   //Return the real node corresponding to the component return vnode.componentInstance.$el;
  }
  vnode.el = document.createElement(tag); // The virtual node will have an el attribute corresponding to the real node children.forEach((child) => {
   vnode.el.appendChild(createElm(child));
  });
 } else {
  vnode.el = document.createTextNode(text);
 }
 return vnode.el;
}

function createComponent(vnode) {
  let i = vnode.data;
  if((i = i.hook) && (i = i.init)){
    i(vnode);
  }
  if(vnode.componentInstance){
    return true;
  }
}

data.hook = {
  init(vnode){
    let child = vnode.componentInstance = new Ctor({});
    child.$mount(); // Component mounting}
}