Lassen Sie uns ausführlich über den Vue-Lebenszyklus sprechen

Vorwort

Heutzutage lernen immer mehr Menschen Vue. Das Erlernen des Vue-Frameworks oder des React-Frameworks ist auch für Front-End-Entwickler zu einer notwendigen Fähigkeit geworden. Heute werden wir über die Lebenszyklusfunktionen in Vue sprechen. Der Referenzwert der Lebenszyklusfunktionen in Vue ist sehr hoch. Lassen Sie es uns gemeinsam kennenlernen ~

1. Lebenszyklus in Vue2

Lebenszyklus der Instanz

Bevor wir den Lebenszyklus vorstellen, müssen wir wissen, dass beim Rendern eines Seiteninhalts in Vue die folgenden Prozesse ablaufen:

1. Durch das Parsen der Grammatik wird ein AST generiert.
2. Schließen Sie die Dateninitialisierung entsprechend dem AST-Ergebnis ab.
3. Generieren Sie einen virtuellen DOM basierend auf dem AST-Ergebnis und der Datenbindung.
4. Der virtuelle DOM generiert den realen DOM und fügt ihn in die Seite ein. Anschließend wird die Seite gerendert.

Wenn die gebundenen Daten aktualisiert werden, finden die folgenden Prozesse statt:

1. Das Framework empfängt Datenänderungsereignisse und generiert basierend auf den Daten einen neuen virtuellen DOM-Baum. Vergleichen Sie die alten und neuen virtuellen DOM-Bäume und erkennen Sie den Unterschied.
2. Wenden Sie die Unterschiede auf den realen DOM-Baum an, d. h. aktualisieren Sie den Seiteninhalt entsprechend den Unterschieden.

Wenn wir den Seiteninhalt löschen, gibt es außerdem:

1. Melden Sie sich von der Instanz ab, löschen Sie den Seiteninhalt, entfernen Sie gebundene Ereignisse, Listener usw.

Vue bietet insgesamt 8 Lebenszyklusfunktionen für Instanzen:

1. beforeCreate(): Vor dem Initialisieren der Instanz können keine Daten, Methoden usw. abgerufen werden - nach 1, vor 2
2. erstellt (): Die Initialisierung der Instanziierung ist abgeschlossen. Zu diesem Zeitpunkt können Sie die Daten in Daten- und Methodenereignissen abrufen - nach 2 und vor 3
3. beforeMount(): Der virtuelle DOM wird erstellt, aber nicht auf der Seite gemountet. vm.$el kann die nicht gemountete Vorlage abrufen - nach 3 und vor 4
4. mounted(): Die Datenbindung ist abgeschlossen, der echte DOM wurde auf der Seite gemountet, vm.$el kann den echten DOM abrufen ——Nach 4
5. beforeUpdate(): Daten aktualisiert, DOM Diff erhält den Unterschied, nicht auf der Seite aktualisiert - nach 5, vor 6
6. updated(): Die Daten werden aktualisiert und die Seite wird ebenfalls aktualisiert - nach 6
7. beforeDestroy(): vor der Instanzzerstörung - vor 7
8. destroyed(): Instanzzerstörung abgeschlossen - nach 7

Informationen zum Lebenszyklus einer Instanz finden Sie auch in der offiziellen Abbildung

Andere Lebenszyklus-Hooks

Andere Lebenszyklusfunktionen umfassen activated(), deactivated(), errorCaptured()

Die einzigartigen Lebenszyklen von Keep-Alive werden aktiviert und deaktiviert.

Mit Keep-Alive umschlossene Komponenten werden beim Umschalten nicht zerstört, sondern im Speicher zwischengespeichert und führen die deaktivierte Hook-Funktion aus. Nach Erreichen des Cache-Renderings wird die aktivierte Hook-Funktion ausgeführt.

Der Hook errorCaptured() wird aufgerufen, wenn ein Fehler in einer untergeordneten Komponente erfasst wird.

2. Lebenszyklus in Vue3

Der Lebenszyklus in Vue3 ist bei Verwendung der Options API und der Composition API unterschiedlich.

Options-API-Lebenszyklus

• beforeDestroy wurde in beforeUnmount geändert
• zerstört bis demontiert

Auf die Frage, warum er es so geändert habe, antwortete You Dada, dass dies hauptsächlich einer besseren Namenskonvention diente. Das entsprechende chinesische Wort lautet genau „Deinstallationskomponente“, was ziemlich konsistent mit der vorherigen Mount-Komponente ist.

• Andere Lebenszyklen folgen Vue2

Lebenszyklus der Composition API

Um die Hook-Funktion in der Composition API zu verwenden, müssen wir nur „on“ vor der Hook-Funktion hinzufügen und innerhalb der Setup-Funktion sieht es so aus 👇

Wir müssen nur diese Hook-Funktionen einführen, um sie verwenden zu können

Die Hook-Funktionen von Vue3 sind wie folgt:

1. beiVoreinbindung()
2. onMounted()
3. beiVorUpdate()
4. beiAktualisiert()
5. beiVorUnmount()
6. beiUnmountet()
7. beiAktiviert()
8. beiDeaktiviert()
9. beiFehlerErfasst()

Wenn Sie genau hinschauen, werden Sie feststellen, dass zwei Lebenszyklusmethoden verschwunden sind. BeforeCreate() und created() erscheinen nicht in der Composition API. Wir haben nur die Methode setup(). Die Methode setup() erscheint zwischen beforeCreate() und created().

Zwei neue Vue3-Lebenszyklusfunktionen

• onRenderTracked(): Diese Funktion wird aufgerufen, wenn zum ersten Mal in einer Renderfunktion auf eine reaktive Abhängigkeit zugegriffen wird. Dieser Hook ist nützlich, wenn wir sehen möchten, welche Abhängigkeiten verfolgt werden. Er ist zum Debuggen nützlich.
• onRenderTriggered(): Dies wird aufgerufen, wenn ein neues Rendering ausgelöst wird. Dadurch kann überprüft werden, welche Abhängigkeit das erneute Rendering der Komponente ausgelöst hat.

endlich

⚽Dieser Artikel stellt hauptsächlich die Lebenszyklusfunktionen in Vue vor. Ich glaube, Sie werden etwas gewinnen ~

Dies ist das Ende dieses Artikels über den Vue-Lebenszyklus. Weitere relevante Inhalte zum Vue-Lebenszyklus finden Sie in den vorherigen Artikeln von 123WORDPRESS.COM oder in den folgenden verwandten Artikeln. Ich hoffe, dass jeder 123WORDPRESS.COM in Zukunft unterstützen wird!