Eine Vue-Instanz hat einen vollständigen Lebenszyklus, das heißt, eine Reihe von Prozessen vom Beginn der Erstellung über die Initialisierung von Daten, die Kompilierung von Vorlagen, das Hängen im DOM, das Rendern-Aktualisieren-Rendering, das Entladen usw. bis zum Ende Im Lebenszyklus der Vue-Instanz befindet sich der Hook in einer bestimmten Phase. In dieser Phase haben Sie die Möglichkeit, einige Verarbeitungsvorgänge durchzuführen.
1. Ableitung des Lebenszyklus
| 1. Name: Lebenszyklus-Rückruffunktion, Lebenszyklusfunktion, Lebenszyklus-Hook. |
| 2. Was ist das: einige Funktionen mit speziellen Namen, die Vue in kritischen Momenten für uns aufruft. |
| 3. Der Name der Lebenszyklusfunktion kann nicht geändert werden, aber der spezifische Inhalt der Funktion wird vom Programmierer entsprechend den Anforderungen geschrieben. |
| 4. Dieser Punkt in der Lebenszyklusfunktion ist die VM oder das Komponenteninstanzobjekt. |
2. Lebenszyklusanalyse
(1) beforeCreate (vor der Erstellung)
Nachdem die Instanz initialisiert wurde und bevor die Datenbeobachtung und die Ereigniskonfiguration aufgerufen werden, wurde das Optionsobjekt der Komponente noch nicht erstellt und el und Daten wurden noch nicht initialisiert, sodass Methoden und Daten auf Methoden, Daten, Berechnungen usw. angewendet werden. kann nicht zugegriffen werden.
(2) erstellt (nach der Erstellung)
Es wird aufgerufen, nachdem die Instanz erstellt wurde. In diesem Schritt hat die Instanz die folgenden Konfigurationen abgeschlossen: Datenbeobachtung, Betrieb von Attributen und Methoden, Rückruf von Überwachungs-/Ereignisereignissen und Initialisierung von Datendaten, el jedoch nicht. Die Hängephase hat jedoch noch nicht begonnen und das Attribut $el ist derzeit unsichtbar. Dies ist ein häufiger Lebenszyklus, da Sie Methoden in Methoden aufrufen, Daten in Daten ändern können und die Änderung durch die Reaktion von Vue widergespiegelt werden kann Bindung Rufen Sie auf der Seite die berechneten Eigenschaften in berechnet usw. ab. Normalerweise können wir die Instanz hier vorverarbeiten, und einige Kinderschuhe senden hier gerne Ajax-Anfragen. Es ist erwähnenswert, dass es in diesem Zyklus keine Möglichkeit gibt, die Instanz zu verarbeiten Der Konvertierungsprozess wird abgefangen. Wenn also einige Daten abgerufen werden müssen, bevor die Seite betreten werden darf, ist es nicht geeignet, eine Anfrage mit dieser Methode zu senden. Es wird empfohlen, sie im Komponenten-Routing-Hook beforeRouteEnter abzuschließen
（3）beforeMount
Der Hang wird vor dem Start aufgerufen und die zugehörige Renderfunktion wird zum ersten Mal aufgerufen (virtuelles DOM). Die Instanz hat die folgende Konfiguration abgeschlossen: Kompilieren Sie die Vorlage, generieren Sie HTML aus den Daten in den Daten und der Vorlage und schließen Sie ab Die Initialisierung von el und data. Beachten Sie, dass im HTML der Seite immer noch nichts hängt.
(4) montiert
Das Aufhängen ist abgeschlossen, das heißt, der HTML-Code in der Vorlage wird auf der HTML-Seite gerendert. Zu diesem Zeitpunkt können im Allgemeinen einige Ajax-Vorgänge ausgeführt werden, und der Mount wird nur einmal ausgeführt.
（5）vorUpdate
Wird aufgerufen, bevor die Daten aktualisiert werden, bevor das virtuelle DOM erneut gerendert und gepatcht wird. Der Status kann in diesem Hook weiter geändert werden und es wird kein zusätzlicher Neu-Rendering-Prozess ausgelöst
(6) aktualisiert (aktualisiert)
Das erneute Rendern und Patchen des virtuellen DOM wird nur aufgrund von Datenänderungen aufgerufen. Beim Aufruf wurde das Komponenten-DOM aktualisiert, sodass vom DOM abhängige Vorgänge ausgeführt werden können. In den meisten Fällen sollten Sie dabei eine Statusänderung vermeiden Da dies zu einer Endlosschleife von Aktualisierungen führen kann, wird der Hook während des serverseitigen Renderns nicht aufgerufen
(7) beforeDestroy (vor der Zerstörung)
Wird aufgerufen, bevor die Instanz zerstört wird, die Instanz ist weiterhin vollständig verfügbar.
- In diesem Schritt können Sie dies auch verwenden, um die Instanz abzurufen.
- Im Allgemeinen werden in diesem Schritt einige Rücksetzvorgänge durchgeführt, z. B. das Löschen des Timers in der Komponente und das Abhören des Dom-Ereignisses
(8) zerstört (nach der Zerstörung)
Wird aufgerufen, nachdem die Instanz zerstört wurde. Nach dem Aufruf werden alle Ereignis-Listener entfernt und alle Unterinstanzen zerstört. Dieser Hook wird während des serverseitigen Renderns nicht aufgerufen
3. Fassen Sie den Lebenszyklus zusammen
| Häufig verwendete Lebenszyklus-Hooks: | |
| 1.montiert: Ajax-Anfrage senden, Timer starten, benutzerdefiniertes Ereignis binden, Nachricht abonnieren usw. [Initialisierungsvorgang]. | |
| 2.beforeDestroy: Timer löschen, benutzerdefinierte Ereignisse entbinden, Nachrichten abbestellen usw. [Abschluss der Arbeit]. | |
| Über die Zerstörung von Vue-Instanzen | |
| 1. Nach der Zerstörung können mit Hilfe der Vue-Entwicklertools keine Informationen mehr eingesehen werden. | |
| 2. Benutzerdefinierte Ereignisse sind nach der Zerstörung ungültig, native DOM-Ereignisse sind jedoch weiterhin gültig. | |
| 3. Im Allgemeinen werden die Daten in beforeDestroy nicht manipuliert, denn selbst wenn die Daten manipuliert werden, wird der Aktualisierungsvorgang nicht erneut ausgelöst. |
Hochwertige Erklärung: Detaillierte Erklärung des Vue-Lebenszyklus – Xiao Wu 3 – 博客园
