Wie werden Vue-Komponenten analysiert und gerendert?

<div id="app">
  <meine-Schaltfläche></meine-Schaltfläche>
</div>
<Skript>
 Vue.component("mein-Button", {
    Vorlage: "<button>Schaltflächenkomponente</button>",
   });
lass vm = neues Vue({
	el:'#app'
});
</Skript>

Vue.options._base = Vue; //Sie können Vue über \_base finden
Vue.options.components = {}; 

Vue.component = Funktion (ID, Definition) {
  //Jede Komponente generiert eine neue Klasse, um die Vaterdefinition zu erben = this.options._base.extend(definition);

  console.log("1. Erstellen Sie einen Konstruktor für die Komponente, basierend auf Vue", Definition);

  diese.Optionen.Komponenten[id] = Definition;
 };

importiere {mergeOptions} von '../util/index'
Vue.extend = Funktion (Definition) {
  const Vue = dies;
  const Sub = Funktion VueComponent(Optionen) {
   this._init(Optionen);
  };
  Sub.prototype = Objekt.erstellen(Vue.prototype);
  Sub.prototype.constructor = Sub;
  Untergeordnete Optionen = mergeOptions(Vue.Optionen, Definition); 
  Sub zurückgeben;
 };

strats.components = Funktion (Elternwert, Kindwert) {
 let Optionen = Objekt.erstellen(parentVal);
 wenn (Kindwert) {
  für (let key in childVal) {
   Optionen[Schlüssel] = ChildVal[Schlüssel];
  }
 }
 Rückgabemöglichkeiten;
};

 Vue.prototype._init = Funktion (Optionen) {
  const vm = dies;
 ++ vm.$options = mergeOptions(vm.constructor.options, options); 
  //...
  : Der initState(vm);
  wenn (vm.$options.el) {
   //Daten auf dieser Vorlage mounten vm.$mount(vm.$options.el);
  }
 };

Exportfunktion isReservedTag(str) {
 let reservedTag = "a,div,span,p,img,button,ul,li";
 gibt reserviertesTag.includes(str) zurück;
}

Exportfunktion createElement(vm, tag, data = {}, ...children) {
  // Wenn das Tag eine Komponente ist, sollte es den Vnode einer Komponente rendern
  if (isReservedTag(tag)) {
    returniere vnode(vm, Tag, Daten, Daten.Schlüssel, untergeordnete Elemente, undefiniert);
  } anders {
    const Ctor = vm.$options.components[tag]
    returniere createComponent(vm, tag, data, data.key, children, Ctor);
  }
}
//Erstelle einen virtuellen Knoten für die Komponente, um zwischen Komponenten und Elementen zu unterscheiden data.hook 
Funktion createComponent(vm, tag, data, key, children, Ctor) {
  // Komponentenkonstruktor if (isObject (Ctor)) {
    Ctor = vm.$options._base.extend(Ctor); // Vue.extend 
  }
  data.hook = { // Diese Initialisierungsmethode muss beim Rendern der Komponente aufgerufen werden init(vnode){
      let vm = vnode.componentInstance = new Ctor({_isComponent:true}); // new Sub verwendet diese Option und Komponentenkonfiguration zum Zusammenführen von vm.$mount(); // Nachdem die Komponente gemountet wurde, befindet sie sich in vnode.componentInstance.$el 
    }
  }
  returniere vnode(vm, `vue-component-${tag}`, Daten, Schlüssel, undefiniert, undefiniert, {Ctor, untergeordnete Elemente})
}

Exportfunktion Patch (alter V-Knoten, V-Knoten) {
  // 1. Bestimmen Sie, ob aktualisiert oder gerendert werden soll, if(!oldVnode){
    gibt createElm(vnode) zurück;
  }anders{
    // ...
  }
}

Funktion createElm(vnode) {
 let { tag, daten, untergeordnete Elemente, Text, vm } = vnode;
 wenn (Typ des Tags === "Zeichenfolge") {
  wenn (createComponent(vnode)) {
   //Gibt den realen Knoten zurück, der der Komponente entspricht return vnode.componentInstance.$el;
  }
  vnode.el = document.createElement(tag); // Der virtuelle Knoten hat ein el-Attribut, das dem realen Knoten entspricht children.forEach((child) => {
   vnode.el.appendChild(createElm(Kind));
  });
 } anders {
  vnode.el = document.createTextNode(text);
 }
 vnode.el zurückgeben;
}

Funktion Komponente erstellen(vnode) {
  sei i = vnode.data;
  wenn((i = i.hook) && (i = i.init)){
    i(v-Knoten);
  }
  wenn(vnode.componentInstance){
    gibt true zurück;
  }
}

Daten.hook = {
  init(vnode){
    let child = vnode.componentInstance = neuer Ctor({});
    child.$mount(); // Komponentenmontage}
}