1壹士、給組件創(chuàng)建個構(gòu)造函數(shù)磷雇，基于Vue。

export default function globalApiMixin(Vue){
    Vue.options = {}
    Vue.mixin = function (options){
        this.options = mergeOptions(this.options,options);//合并options
    }
    Vue.options.components = {};
    Vue.options._base = Vue 
    Vue.component = function (id,definition){
        //保證組件的隔離躏救，每個組件都會產(chǎn)生一個新的類唯笙，去繼承父類
        definition = this.options._base.extend(definition);
        this.options.components[id] = definition;
    }
    //給個對象返回類
    Vue.extend = function (definition){//extend方法就是返回一個繼承于Vue的類
        //并且身上應該有父類的所有功能
        let Super = this;
        let Sub = function VueComponent(options){
            this._init(options);
        }
        //原型繼承
        Sub.prototype = Object.create(Super.prototype);
        Sub.prototype.constructor = Sub;
        Sub.options = mergeOptions(Super.options, definition);//只和vue.options合并
        return Sub
    }
}

2、開始生成虛擬節(jié)點落剪，對組件進行特殊處理 data.hook = {init(){}}

export function createElement(vm, tag, data = {}, ...children) {
  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, undefined, undefined,Ctor);
  }
}
function createComponent(vm, tag, data, key, children, text, Ctor) {
    
    if(isObject(Ctor)){
      Ctor = vm.$options._base.extend(Ctor)
    }
    data.hook = {
      init(vnode){
        let vm = vnode.componentInstance  = new Ctor({_isComponent:true})//new sub 
        debugger
        vm.$mount();
      }
    }
    return vnode(vm,`vue-component-${tag}`,data,key,undefined,undefined,{Ctor,children});
}
export function createTextElement(vm, text) {
  return vnode(vm, undefined, undefined, undefined, undefined, text);
}
function vnode(vm, tag, data, key, children, text,componentOptions) {
  return { vm, tag, data, key, children, text, componentOptions };
}

function isReservedTag(str){ //判斷是否是組件
  let strList = 'a,div,span,p,ul,li';
  return strList.includes(str);
}

3睁本、生成dom元素，如果當前虛擬節(jié)點上有hook.init屬性忠怖，說明是組件

function createComponent(vnode){
    let i = vnode.data; 
    if((i = i.hook) && (i = i.init)){
        i(vnode);//調(diào)用init方法
    }
    if (vnode.componentInstance) {
      //有屬性說明子組件new完畢了呢堰，并且組件的真實dom掛載到了vnode。componentInstance
      return true;
    }
} 
function createElm(vnode){
    debugger
    let {vm,tag,data,children,text} = vnode;
    if(typeof tag === 'string'){
        //判斷是否是組件
        if( createComponent(vnode)){
            //返回組件對應的真實節(jié)點
            console.log(vnode.componentInstance.$el);
            return vnode.componentInstance.$el
        }
        vnode.el = document.createElement(tag);
        if(children.length){
            children.forEach(child=>{
                vnode.el.appendChild(createElm(child));
            })
        }
    }else{
        vnode.el = document.createTextNode(text);
    }
    return vnode.el;
}

4凡泣、對組件進行new 組件().$mount()=>vm.$el; 將組件的$el插入到父容器中 （父組件）

Vue.prototype.$mount = function (el) {
    debugger
    const vm = this;
    const options = vm.$options;
    el = document.querySelector(el);
    vm.$el = el;
    //將模板轉(zhuǎn)化成對應的渲染函數(shù)=》虛擬函數(shù)概念 vnode =》diff算法更新虛擬 dom =》產(chǎn)生真實節(jié)點枉疼，更新
    if (!options.render) {
      //沒有render 用template，目前沒有render
      let template = options.template;
      if (!template && el) {
        //用戶也沒有傳入template鞋拟，就取頁面上的el
        template = el.outerHTML;
      }
      let render = compileToFunction(template);
      //options.render 就是渲染函數(shù)
      options.render = render;
    }
    debugger
    mountComponent(vm, el); //組件的掛載流程
  };