Eine kurze Diskussion über den gesamten Prozess des ersten Renderings von Vue

Gestern fragte mich ein Freund, was Vue beim ersten Laden der Seite macht. Diese Frage scheint vielen Freunden unklar zu sein. Werfen wir heute einen detaillierten Blick auf den ersten Rendering-Prozess von Vue.

Um den gesamten Prozess des ersten Renderings von Vue zu verstehen, wo sollten wir beginnen? Offensichtlich sollten wir mit der Einstiegsdatei beginnen, also main.js

1. Vue-Initialisierung

Schauen wir uns zunächst main.js an. Als Erstes und Wichtigstes müssen wir Vue vorstellen.

vue von „vue“ importieren

Tatsächlich gibt es nach dem Verpacken von Vue mehrere Versionen im Dist-Ordner, nämlich
Universelle Version (UMD) : Vollversion vue.js und Laufzeitversion vue.runtime.js in
CommonJs-Version : Vollversion in vue.common.js und Laufzeitversion in vue.runtime.common.js
ES-Modulversionen: Vollversion in vue.esm.js und Laufzeitversion in vue.runtime.esm.js
Im Allgemeinen verwenden die Projekte, die wir nach Vue 2.6 mit Vue/CLI erstellen, die Laufzeitversion von vue.runtime.esm.js, d. h. bei der Einführung von Vue wird die Version von vue.esm.js eingeführt.

Wird also nach der Einführung von Vue der relevante Code in Vue ausgeführt? Welcher Code im Vue-Quellcode wird also zuletzt ausgeführt (der eingeführte Vue ist der gepackte Vue im Vue-Quellcode), wir müssen zunächst wissen, wo sich die Eintragsdatei befindet

Vue-Eintragsdatei

Die Einstiegsdatei von Vue befindet sich hauptsächlich unter src/platforms/web der Vue-Quellcodestruktur

Beim Verpacken von Vue können Sie unterschiedliche Vue-Eintragsdateien zum Verpacken auswählen. Unterschiedliche Eintragsdateien verpacken unterschiedliche Vue-Versionen.
Hier sprechen wir hauptsächlich über die vollständige Version von entry-runtime-with-compiler.js
Lassen Sie uns zunächst den Unterschied zwischen der Vollversion und der Runtime-Version verstehen

Unterschiede zwischen Vollversion und Runtime-Version

Die Vollversion ist eine Kombination aus Laufzeitversion + Compiler. Die Laufzeitversion hat keinen Compiler, d. h. sie hat keine Funktion zur Vorlagenkompilierung. Sie wird hauptsächlich zum Erstellen von Vue-Instanzen und zum Rendern von virtuellem DOM verwendet. Kleiner und leichter (der Compiler hat mehr als 3.000 Codezeilen)
Was bedeutet das?

<Text>
	<div id="app">
		<p>Ich bin der Inhalt in index.html</p>
	</div>
</body>

neuer Vue({
	Vorlage: '<div>Ich bin der von der Vorlage gerenderte Inhalt</div>'
}).$mount('#app')

Die obige Situation,
Wenn es sich um die Vollversion von Vue handelt, gibt es einen Compiler-Compiler, der die bei neuem Vue übergebene Vorlage in eine Renderfunktion kompiliert und sie dem Renderattribut der Optionen zuweist. Nach $mount wird die Renderfunktion dann in ein virtuelles Dom gerendert und das virtuelle Dom anschließend in ein reales Dom konvertiert, sodass auf der letzten Seite der Satz „ Ich bin der von der Vorlage gerenderte Inhalt “ angezeigt wird. Der Originalsatz wird überschrieben.

Wenn es sich um eine Laufzeitversion handelt, gibt es keinen Compiler und der Inhalt in der Vorlage wird nicht kompiliert, sodass die Seite nur das ursprüngliche DOM hat

Schauen wir nun weiter nach unten und finden die Eintragsdatei. Sehen wir uns an, was ausgeführt wird

Es ist ersichtlich, dass die Eingabedatei zuerst Vue importiert, dann einige Verarbeitungen durchläuft und schließlich Vue exportiert
Wir finden zunächst Schritt für Schritt heraus, wo der Vue-Konstruktor erstellt wird, indem wir den Pfad von Vue importieren. Wie oben gezeigt, wird vue aus runtime/index importiert, also gehen wir zu runtime/index

Diese Datei ist dieselbe. Sie importiert Vue, führt einige Verarbeitungsvorgänge durch und exportiert Vue dann. Gehen wir nach oben und suchen nach core/index

Dasselbe gilt für diese Datei. Lassen Sie uns weiter nach oben suchen und finden Sie ./instance/index

Hier finden wir die Erstellung unseres Vue-Konstruktors, der sich in der Datei src/core/instance/index.js des Quellcodes befindet.

Aus der oben stehenden Referenzbeziehung können wir dann erkennen, dass nach der Einführung von Vue in das Projekt die Reihenfolge der zuerst ausgeführten Dateien lautet:

src/core/instace/index.js ===> 1
src/core/index.js ===> 2
src/plattformen/web/laufzeit/index.js ===> 3
src/plattformen/web/entry-runtime-with-compiler.js 4

Sehen wir uns also an, was jede Datei ausführt.
Zuerst src/core/instace/index.js

1.1, src/core/instace/index.js

Zunächst definiert diese Datei den Vue-Konstruktor und initialisiert einige Vue-Instanzeigenschaften und -Instanzmethoden, d. h. verschiedene Methoden und Eigenschaften werden unter dem Prototyp vue.prototype hinzugefügt.

Als nächstes schauen wir uns genauer an, welche Instanzeigenschaften oder Methoden von Vue von jeder Methode initialisiert werden.

1.1.1, initMixin (Vue)

1.1.2, StateMixin (Vue)

1.1.3. EreignisseMixin (Vue)

1.1.4, Lebenszyklus-Mixin (Vue)

1.1.5, RenderMixin (Vue)

Nachdem src/core/instace/index.js ausgeführt wurde, wird die nächste Datei ausgeführt

Exportfunktion initGlobalAPI (Vue: GlobalAPI) {
  // Konfiguration
  const configDef = {}
  configDef.get = () => Konfiguration
  wenn (Prozess.Umgebung.NODE_ENV !== 'Produktion') {
    configDef.set = () => {
      warnen(
        „Ersetzen Sie nicht das Vue.config-Objekt, sondern legen Sie einzelne Felder fest.“
      )
    }
  }
  // Eine neue Konfigurationseigenschaft hinzugefügt Object.defineProperty(Vue, 'config', configDef)

  // Ein neues statisches Member-Dienstprogramm wurde hinzugefügt
  Vue.util = {
    warnen,
    verlängern,
    MergeOptions,
    definierenReaktiv
  }

  // 3 statische Mitglieder hinzugefügt, set delete nextTick
  Vue.set = setzen
  Vue.delete = del
  Vue.nextTick = nächsterTick

  // Ein neues statisches Member-Observable hinzugefügt
  Vue.observable = <T>(obj: T): T => {
    beobachten(Objekt)
    Rückgabeobjekt
  }

  //Optionen initialisieren. Optionen ist ein leeres Objekt.</T>
  Vue.options = Objekt.erstellen(null)
  ASSET_TYPES.forEach(Typ => {
    Vue.options[Typ + ‚s‘] = Objekt.erstellen(null)
  })

  Vue.options._base = Vue

  //Registriere eine globale Komponente „Keep-Alive BuiltInComponents“, in der sich die Keep-Alive-Komponente „Export Extend(Vue.options.components, BuiltInComponents)“ befindet.

  // Folgendes wird initialisiert Vue.use() Vue.mixin() Vue.extend() 
  initUse(Vue)
  In diesem Artikel wird die Vue-API beschrieben, die Sie in der folgenden Tabelle finden:
  In diesem Artikel wird erläutert, wie Sie Vue initExtend verwenden.
  // Initialisiere Vue.directive(), Vue.component(), vue.filter()
  InitAssetRegisters(Vue)
}

1.2, src/core/index.js

Es ist ersichtlich, dass diese Datei hauptsächlich viele statische Instanzmethoden und Eigenschaften zu Vue hinzufügt. Welche werden konkret hinzugefügt?
Schauen wir uns weiterhin die Methode initGlobalAPI(Vue) an, die ausgeführt wird

1.2.1 initGlobalAPI(Vue)

Exportfunktion initGlobalAPI (Vue: GlobalAPI) {
  // Konfiguration
  const configDef = {}
  configDef.get = () => Konfiguration
  wenn (Prozess.Umgebung.NODE_ENV !== 'Produktion') {
    configDef.set = () => {
      warnen(
        „Ersetzen Sie nicht das Vue.config-Objekt, sondern legen Sie einzelne Felder fest.“
      )
    }
  }
  // Eine neue Konfigurationseigenschaft hinzugefügt Object.defineProperty(Vue, 'config', configDef)

  // Ein neues statisches Member-Dienstprogramm wurde hinzugefügt
  Vue.util = {
    warnen,
    verlängern,
    MergeOptions,
    definierenReaktiv
  }

  // 3 statische Mitglieder hinzugefügt, set delete nextTick
  Vue.set = setzen
  Vue.delete = del
  Vue.nextTick = nächsterTick

  // Ein neues statisches Member-Observable hinzugefügt
  Vue.observable = <T>(obj: T): T => {
    beobachten(Objekt)
    Rückgabeobjekt
  }

  //Optionen initialisieren. Optionen ist ein leeres Objekt.</T>
  Vue.options = Objekt.erstellen(null)
  ASSET_TYPES.forEach(Typ => {
    Vue.options[Typ + ‚s‘] = Objekt.erstellen(null)
  })

  Vue.options._base = Vue

  //Registriere eine globale Komponente „Keep-Alive BuiltInComponents“, in der sich die Keep-Alive-Komponente „Export Extend(Vue.options.components, BuiltInComponents)“ befindet.

  // Folgendes wird initialisiert Vue.use() Vue.mixin() Vue.extend() 
  initUse(Vue)
  In diesem Artikel wird die Vue-API beschrieben, die Sie in der folgenden Tabelle finden:
  In diesem Artikel wird erläutert, wie Sie Vue initExtend verwenden.
  // Initialisiere Vue.directive(), Vue.component(), vue.filter()
  InitAssetRegisters(Vue)
}

1.3, src/platforms/web/runtime/index.js

1.4, src/platforms/web/entry-runtime-with-compiler.js

Die Hauptfunktion dieser Datei besteht darin, die $mount-Methode unter dem Vue-Prototyp neu zu schreiben. Wir werden später darüber sprechen, was in der $mount-Methode gemacht wird.

1.5. Zusammenfassung der Vue-Initialisierung

Der gesamte oben beschriebene Prozess wird sofort ausgeführt, nachdem der Benutzer die Vue-Datei importiert hat, wenn er Vue verwendet

Führen sie nach der Ausführung weiterhin die Datei main.js in unserem Projekt aus?
Dies führt

neuer Vue({
  Router,
  speichern,
  rendern: h => h(App)
}).$mount('#app')

Zu diesem Zeitpunkt wird unser Vue-Konstruktor aufgerufen

2. Ausführung des Vue-Konstruktors

An diesem Punkt wird zuerst der Vue-Konstruktor ausgeführt.

Es ist ersichtlich, dass hauptsächlich die _init-Methode ausgeführt wird. Von hier aus beginnt der Lebenszyklus von Vue mit der Ausführung

Das Obige ist nur der wichtigste Teil des Codes in der Methode _init() (es gibt zu viel Code, deshalb werde ich nicht von allem Screenshots machen. Sie können sich den Quellcode selbst ansehen). Man kann Folgendes erkennen:

2.1. beforeCreate-Hook

Vor dem Lebenszyklus-Hook „beforeCreate“ besteht die Hauptaufgabe von Vue darin, dem Vue-Prototyp verschiedene Eigenschaften und Methoden, Vue verschiedene statische Eigenschaften und Methoden und der VM-Instanz verschiedene Eigenschaften und Methoden hinzuzufügen.

2.2, Haken erstellt

Wie aus der obigen Abbildung ersichtlich ist, werden nach der Ausführung des beforeCreate-Hooks hauptsächlich drei Methoden ausgeführt: initInjections, initState, initProvide

// In die VM-Instanz einfügen callHook(vm, 'beforeCreate')

// In die VM-Instanz injizieren initInjections(vm)

// Initialisiere $props, $methods, $data, computed, watch der VM
initState(vm)

// Provide in VM-Instanz einfügen initProvide(vm)

//Führen Sie den erstellten Lebenszyklus aus callHook(vm, 'created')

Tatsächlich liegt der Fokus auf der Methode initState(vm), in der die $props, $data, $methods, computed, watch usw. der VM-Instanz initialisiert werden. Gleichzeitig wird darin eine initData()-Methode aufgerufen, die die observer()-Methode aufruft, um alle Daten in data in responsive Daten umzuwandeln. Das heißt, fügen Sie einen Datenabfangjäger hinzu.

Man kann also erkennen, dass vor dem Erstellungslebenszyklus die Eigenschaften $props, $data, $methods, computed und watch der VM initialisiert werden.
Aus diesem Grund können wir in „Erstellen“ verschiedene Daten in unseren Daten aufrufen und verschiedene Methoden wie „Props“ oder „Methoden“ aufrufen.

Nachdem der erstellte Lebenszyklus abgeschlossen ist, schauen Sie weiter nach unten

Es ist ersichtlich, dass hier beurteilt wird, ob vm.$options.el existiert und was vm.$options.el ist.
Wenn new Vue ({}) aufgerufen wird, werden alle Eigenschaften des übergebenen Objekts unter Optionen bereitgestellt.

neuer Vue({
  el: '#app'
  Router,
  speichern,
  rendern: h => h(App)
})

Daher ist vm.$options.el das oben übergebene el.
Hier prüfen wir, ob el existiert. Wenn ja, fahren wir mit der Ausführung von $mount fort.

Dann darf jeder neugierig sein, wenn es das nicht gibt, dann bleibt es stecken und kann nicht weiterkommen. Ja, wenn nicht, geht es nicht weiter. Wenn Sie möchten, dass der Code fortgesetzt wird, müssen Sie die Methode $mount ausführen.
Schauen wir uns an dieser Stelle die allgemeine Verwendung von Vue an.

neuer Vue({
  Router,
  speichern,
  rendern: h => h(App)
}).$mount('#app')

Hier wird kein el übergeben, daher der Quellcode

Ich werde definitiv nicht gehen. Beim Erstellen eines neuen Vue können Benutzer jedoch die neu erstellte Vue-Instanz verwenden, um $mount aufzurufen. Auf diese Weise können Sie das Lebenszyklusdiagramm auf unserer offiziellen Website möglicherweise leichter verstehen.

Okay, lass uns weitermachen. Der nächste Schritt ist die Ausführung von $mount. Schauen wir uns die $mount-Methode an

2.3, $mount-Funktion

Denken Sie daran, dass wir $mount überschrieben haben, als wir es zuvor initialisiert haben? Wenn wir also jetzt $mount ausführen, führen wir das überschriebene Mount aus.

Hier wird die Mount-Methode vor dem Umschreiben vor dem Umschreiben gespeichert und dann am Ende die Mount-Methode vor dem Umschreiben aufgerufen.
Nach dem Umschreiben besteht der kritischste Code darin, festzustellen, ob eine Renderfunktion vorhanden ist

Die Hauptfunktion dieses Schritts besteht darin, festzustellen, ob eine Renderfunktion vorhanden ist.
Wenn ja, führen Sie die Renderfunktion direkt vor der neu geschriebenen $mount-Methode aus.

Wenn nicht, wird zunächst ermittelt, ob eine Vorlage vorhanden ist (ob options.template vorhanden ist, options.template kann ein ID-Selektor oder ein Dom sein). Wenn eine Vorlage vorhanden ist, wird der Inhalt in der Vorlage abgerufen und der Vorlage zugewiesen. Wenn options.template nicht vorhanden ist, wird der von el angegebene Dom als Vorlage verwendet (d. h. #app), der Dom unter el wird abgerufen und der Vorlage zugewiesen

Nachdem die Vorlage das DOM erhalten hat, wird die Vorlage weiterhin in eine Renderfunktion kompiliert und die kompilierte Renderfunktion unter dem Attribut options.render bereitgestellt.

Anschließend wird $mount vor dem Umschreiben weiter ausgeführt. Wenn wir das verstehen, können wir den anderen Teil des Lebenszyklusdiagramms verstehen.

2.4, vor der Montage

Als nächstes schauen wir uns die Ausführung der $mount-Funktion vor dem Umschreiben an

Es ist ersichtlich, dass \$mount hauptsächlich die Funktion mountComponent ausführt. Schauen wir uns die Funktion mountComponent weiter an

Es ist ersichtlich, dass diese Funktion hauptsächlich die folgenden 4 Dinge tut. Schauen wir sie uns nacheinander an.
1. Der beforeMount-Hook wird ausgeführt, daher können wir daraus schließen, dass wir vor beforeMount hauptsächlich die Renderfunktion initialisieren und abrufen. Nach beforeMount wird die Renderfunktion in einen virtuellen DOM gerendert und anschließend der reale DOM aktualisiert.
Es gibt drei Möglichkeiten, die Renderfunktion zu erhalten <br /> Erstens: Der Benutzer übergibt sie an Render

Zweitens: Die .vue-Datei wird in ein Render kompiliert

Auf diese Weise wird eine Renderfunktion übergeben und die Datei App.vue ausgeführt, bevor die h-Funktion in der Funktion verwendet wird.
Die .vue Datei wird abschließend mit Hilfe von vue-loader in eine Renderfunktion umgewandelt.

Drittens: Kompilieren Sie die Vorlage in eine Renderfunktion

2. Definieren Sie eine updateComponent-Funktion, die die Methode vm_update aufruft und die Methode vm._render() ausführt.

Das Ergebnis nach der Operation wird als Parameter an die Methode _update übergeben. Wie bereits erwähnt rendert die Methode _render die Renderfunktion intern in ein virtuelles Dom, sodass der Rückgabewert von _render() ein Vnode ist.

Sehen wir uns zunächst an, wie die Renderfunktion innerhalb der Funktion _render() in einen virtuellen DOM konvertiert wird.

Schauen wir uns dann an, was in der Funktion _update gemacht wird

Es ist ersichtlich, dass in der Funktion _update die Methode __patch__ ausgeführt wird, um die beiden neuen und alten DOMs zu vergleichen, um die Unterschiede herauszufinden und das echte DOM zu aktualisieren. Wenn es das erste Rendering ist, wird der aktuelle Vnode direkt zum Generieren des echten DOM verwendet.

Daher kann der Schluss gezogen werden, dass die Hauptfunktion der gesamten updateComponent-Methode darin besteht, die Renderfunktion zu rendern und das DOM zu aktualisieren.
Der Schlüssel zur Aktualisierung des DOM liegt im Zeitpunkt des Aufrufs der Funktion updateComponent.

3. Erstellen Sie eine neue Watcher-Instanz

Es ist ersichtlich, dass beim Erstellen einer neuen Watcher-Instanz die Funktion updateComponent als Parameter übergeben wird.
Wenn wir uns an diesem Punkt den neuen Watcher ansehen, wird der Watcher-Konstruktor ausgeführt. Sehen wir uns an, was im Watcher-Konstruktor gemacht wird.

Es gibt drei Arten von Watchern: Rendering-Watcher, $watch-Funktions-Watcher und berechnete Watcher. Die Seite, die wir hier rendern, ist der Rendering-Watcher

Oben übergeben wir die Funktion, die wir an den Getter übergeben haben

Weiter unten wird get() aufgerufen

Es ist ersichtlich, dass get () die von uns übergebene Funktion aufruft, und die von uns übergebene Funktion ist die Renderfunktion, die den virtuellen Dom dazu veranlasst, den realen Dom zu aktualisieren. Der zurückgegebene Wert ist der reale Dom nach dem Rendern und wird schließlich this.value zugewiesen, der schließlich zum Aktualisieren des Abhängigen verwendet wird. Unsere aktuelle Wetterinstanz ist der Beobachter der Haupt-Vue-Instanz und kann daher als Beobachter der gesamten Seite verstanden werden. Wenn wir this.$fouceUpdate() aufrufen, rufen wir die Update-Methode dieser Instanz auf, um die gesamte Seite zu aktualisieren.
Wenn also ein neuer Wacher erstellt wird, wird updateComponent automatisch einmal aufgerufen, was unser erstes Rendering ist.

Schauen wir nun weiter nach unten

Intern wird beurteilt, ob vm._isMounted wahr ist (d. h., der Mounted-Hook wurde ausgeführt) und vm._isDestroyed falsch ist (d. h., die aktuelle Komponente wurde nicht zerstört). Wenn an diesem Punkt ein Update erfolgt, bedeutet dies, dass es sich nicht um das erste Rendering handelt. Daher wird der Hook „beforeUpdate“ ausgeführt und das Update wird definitiv später ausgeführt. Über Updates wird hier nicht gesprochen.

Nach dem neuen Watcher geht der Code weiterhin runter

Wenn der aktuelle Vnode null ist, bedeutet dies, dass der virtuelle DOM noch nicht generiert wurde, was bedeutet, dass dies definitiv das erste Rendering ist. Zu diesem Zeitpunkt ist vm._isMounted auf true gesetzt. Und führen Sie die gemountete Hook-Funktion aus. Zu diesem Zeitpunkt ist das erste Rendering abgeschlossen.

2,5, montiert

Es ist ersichtlich, dass die Hauptarbeit im gesamten Prozess von beforeMount bis mounten ist
1. Die Rendering-Renderfunktion wird zum virtuellen Dom-Vnode
2. Führen Sie die Funktion vm._update aus, um den virtuellen Dom in den realen Dom umzuwandeln
Wenn es zwischen den Hooks „beforeUpdate“ und „updated“ liegt, bedeutet dies, dass es nicht das erste Rendering ist. Dann verfügt der virtuelle DOM über zwei alte und zwei neue. Zu diesem Zeitpunkt besteht die Rolle der Funktion vm._update darin, die alten und neuen Vnodes zu vergleichen, die Unterschiede zu ermitteln und zu aktualisieren, was aktualisiert werden muss

Dies ist der gesamte Vorgang des ersten Renderns. Dies ist das Ende dieses Artikels über den gesamten Prozess des ersten Renderings von Vue. Weitere relevante Inhalte zum ersten Rendering von Vue finden Sie in früheren Artikeln auf 123WORDPRESS.COM oder in den folgenden verwandten Artikeln. Ich hoffe, dass jeder 123WORDPRESS.COM in Zukunft unterstützen wird!