Analysis von $mount in Vue

Dieser Artikel führt Sie durch die Analyse von $mount.

Die Arbeit von $mount gliedert sich im Großen und Ganzen in3Schritt:

1. Wenn option keine render-Funktion enthält, wird die HTML-Vorlage durch compileToFunctions in eine Render-Funktion kompiliert, die VNodes generieren kann.

2. Erzeugt eine Watcher-Instanz und löst die updateComponent-Methode aus.

3. Erzeugt einen VNode, aktualisiert ihn durch patch und aktualisiert ihn auf das DOM. Da der Umfang begrenzt ist, werde ich hier die ersten beiden Schritte erörtern und den dritten Schritt in einem anderen Artikel besprechen. Gut, jetzt werde ich spezifisch darüber sprechen. Zunächst kommen wir zur $mount-Funktion, wie im folgenden Bild zu sehen ist:

　

Man kann sehen, dass der Code zunächst überprüft, ob option eine render-Funktion enthält. Wenn nicht, wird weiter überprüft, ob template existiert. Wenn nicht, wird das outerHTML des DOM-Elements verwendet. Was passiert mit dem erhaltenen template? Wie im folgenden Bild zu sehen ist.

　　

Man kann sehen, dass compileToFunctions verwendet wird, um die template in die render-Funktion umzuwandeln. Dies sind zwei Prozesse:

• Die template wird in das AST (Abstract Syntax Tree) Grammatik umgewandelt.
• Die render-Funktion wird durch das AST (Abstract Syntax Tree) generiert.

Die spezifische Analyse der template in die AST (Abstract Syntax Tree) Grammatik im Text wird hier nicht erörtert, aber ich werde einen separaten Abschnitt dazu erstellen. Gut, jetzt haben wir die render-Funktion erhalten, was machen wir als nächstes? Richtig, wir beginnen mit mountComponent. Wie im folgenden Bild zu sehen ist:

　　

Man kann aus dem obigen Bild sehen, dass das Programm eine updateComponent-Methode deklariert hat, die von der Watcher-Instanz aufgerufen wird, um den Komponenten zu aktualisieren. Wenn wir später über den Watcher sprechen, werden wir sehen, warum es eine Bedingung gibt, um die updateComponent-Methode zu deklarieren. Tatsächlich zeigt die Leistung, dass eine Methode zur Testung der Render- und Update-Leistung verwendet wird. Also, wir sind endlich beim Watcher angekommen, sehen wir uns zunächst diesen Code an:

// wir setzen dies in vm._watcher im Konstruktor des Watchers
// da die Initialisierung des Watchers möglicherweise $forceUpdate aufruft (z.B. innen im Kind)
// Der mounted Hook des Komponenten, der darauf angewiesen ist, dass vm._watcher bereits definiert ist
new Watcher(vm, updateComponent, noop, null, true) /* isRenderWatcher */);

Lassen Sie uns zunächst analysieren, was das _watcher in den Kommentaren ist. Tatsächlich kann man es durch den forceupdate-Code sehen:

Vue.prototype.$forceUpdate = function () {
 var vm = this;
 if (vm._watcher) {
  vm._watcher.update();
 }
 };

dieser Aufruf des update-Methode von vm._watcher. Es wird verwendet, um eine erzwingende Aktualisierung durchzuführen. Warum wird es erzwingende Aktualisierung genannt? Vue hat eine Überprüfung, wenn der neue Wert == alter Wert, dann wird der watcher nicht aktualisiert, um das View zu ändern. Daher muss man unbedingt eine Aktualisierung durchführen, indem forceupdate aufgerufen wird, um eine erzwingende Aktualisierung durchzuführen. Lassen Sie uns einmal die übergebenen Parameter betrachten:

• vm: das aktuelle vm-Instanz
• updateComponent ist sehr wichtig, um später den vnode auf das DOM zu aktualisieren.
• noop eine bedeutungslose Funktion
• null option-Option, wenn keine übergeben wird, ist sie null
• true wird hauptsächlich verwendet, um zu bestimmen, um welche watcher es sich handelt. Da sowohl computed-Berechnungsattribute als auch Watcher, die Sie in den options konfiguriert haben, ebenfalls new Watcher verwenden, wird diese hier verwendet, um diese drei zu unterscheiden. Gut, lassen Sie uns sehen, was new Watcher macht, wie im folgenden Bild gezeigt.
  

　

Zunächst sehen wir eine dieser Bedingungen im Code

if (isRenderWatcher) {
 vm._watcher = this;
}

Man kann sehen, dass this zugewiesen wird, wenn der Kontext des watchers für die Renderansicht ist, das heißt, wenn new Watcher hier in mountComponent aufgerufen wird. Dann wird der watcher in _watchers gepusht, um sicherzustellen, dass der watcher ebenfalls gelöscht wird, wenn das Komponenten gelöscht wird. Danach werden die Mitglieder des watchers initialisiert, wie folgt:

this.deep = this.user = this.lazy = this.sync = false;<br />

Also, es geht darum, einen Getter zuzuweisen, this.getter = expOrFn. Erinnern Sie sich an die updateComponent-Funktion, die wir soeben übergeben haben? Richtig, das ist die Zuweisung, die ich dem Getter vorgenommen habe. Dann sind wir bei:

this.value = this.lazy
 ? undefined
 : this.get();

Wir betreten die get-Methode und sehen, was darin passiert. Das get-Code sieht wie folgt aus:

　

Wir können sehen, dass es zunächst pushTarget(this) ausführt, und der Code von pushTarget(this) sieht folgendermaßen aus:

function pushTarget (_target) {
 if (Dep.target) { targetStack.push(Dep.target); }
 Dep.target = _target;
}

Das bedeutet, wenn es einen Dep.target gibt, dann wird der target in den targetStack gelegt. Wenn nicht, dann wird er auf den aktuellen target gesetzt, das ist der watcher. Dann wird der getter-Property ausgeführt, das ist der updateComponent, den wir in Schritt 3 erwähnt haben.

Zusammenfassung

Zusammenfassung: Der Autor hat Ihnen in diesem Artikel die Funktion $mount in Vue vorgestellt. Wir hoffen, dass dies hilfreich war. Wenn Sie Fragen haben, hinterlassen Sie bitte einen Kommentar, und der Autor wird umgehend antworten. Vielen Dank auch für die Unterstützung der呐喊教程网站!

Erklärung: Dieser Artikel wurde aus dem Internet entnommen und gehört dem Urheberrechtsinhaber. Der Inhalt wurde von Internetbenutzern selbstständig beigesteuert und hochgeladen. Diese Website besitzt keine Eigentumsrechte und hat den Inhalt nicht von Hand bearbeitet. Sollten Sie Inhalte finden, die möglicherweise gegen das Urheberrecht verstoßen, senden Sie bitte eine E-Mail an: notice#w, um eine Beschwerde einzureichen.3Erklärung: Der Inhalt dieses Artikels wurde aus dem Internet entnommen und gehört dem Urheberrechtsinhaber. Der Inhalt wurde von Internetbenutzern selbstständig beigesteuert und hochgeladen. Diese Website besitzt keine Eigentumsrechte und hat den Inhalt nicht von Hand bearbeitet. Sollten Sie Inhalte finden, die möglicherweise gegen das Urheberrecht verstoßen, senden Sie bitte eine E-Mail an: notice#w, um eine Beschwerde einzureichen. Bitte fügen Sie relevante Beweise bei. Sobald nachgewiesen wird, dass eine Verletzung vorliegt, wird diese Website den betreffenden Inhalten sofort entziehen.