Mehrere Phasen des Vue-Lebenszyklus

Es gibt 4 Hauptphasen: 1. Initialisierungsphase, einschließlich zwei kleiner Phasen vor dem Erstellen (vor der Erstellung) und erstellt (nach der Erstellung); 2. Montagephase, einschließlich vor dem Mounten (vor dem Laden) und der Bereitstellung (nach dem Laden). 3. Aktualisierungsphase, einschließlich zwei kleiner Phasen vor dem Update (vor dem Update) und aktualisiert (nach dem Update); 4. Zerstörungsphase, zwei kleine Phasen vor der Zerstörung (vor der Zerstörung) und zerstört (nach der Zerstörung);

Die Betriebsumgebung dieses Tutorials: Windows7-System, Vue3-Version, DELL G3-Computer.

Lebenszyklus ist der gesamte Prozess von der Entstehung bis zur Zerstörung einer Komponente. Das heißt, eine Reihe von Prozessen vom Erstellen, Initialisieren von Daten, Kompilieren von Vorlagen, Mounten von Dom → Rendern, Aktualisieren → Rendern, Deinstallieren usw. Wir nennen dies den Lebenszyklus von Vue

Die Lebenszyklus-Hook-Funktion befindet sich im Lebenszyklus Eine Funktion, die zu einem bestimmten Zeitpunkt automatisch ausgelöst wird, dient dazu, bestimmte Vorgänge zu einem bestimmten Zeitpunkt auszuführen.

Es gibt insgesamt 11 Vue-Lebenszyklen. Er ist im Allgemeinen in zwei Teile unterteilt: häufig verwendete und ungewöhnliche Phasen.

Kommen Sie zunächst zum offiziellen Bild des Städtebaus:

Was wir üblicherweise verwenden, kann in 4 Hauptphasen und 8 Methoden unterteilt werden

1. Initialisierungsphase

1. beforeCreate (before Schöpfung) )

                                                                                                                                                                                                                  Vor der Veranstaltung/ Die Konfiguration des Watcher-Ereignisses wird aufgerufen. （Zu diesem Zeitpunkt wird das Vue-Objekt (Komponente) erstellt, aber die Attribute des VUE-Objekts sind noch nicht gebunden. Beispielsweise ist das Datenattribut nicht an das berechnete Attribut gebunden, das heißt, es gibt keinen Wert.

2.

erstellt

(nach der Erstellung) Es wird automatisch ausgelöst, wenn die Komponenteninstanz Werte hat, aber das DOM wurde noch nicht generiert und das

$el

Attribut existiert noch nicht. Zu diesem Zeitpunkt sind Daten vorhanden, und die Daten werden normalerweise in dieser Hook-Funktion abgerufen. Die Dom-Struktur wurde jedoch zu diesem Zeitpunkt noch nicht analysiert, sodass der Dom nicht bedient werden kann.

2. Montagephase

3.

vor dem Laden Die entsprechende Renderfunktion wird zum ersten Mal aufgerufen Anruf. Zu diesem Zeitpunkt werden sowohl $el als auch die Daten der Vue-Instanz initialisiert. Zu diesem Zeitpunkt hat this.$el einen Wert, aber es ist immer noch auf dem vorherigen virtuellen Dom-Knoten gemountet, data.message wurde nicht ersetzt. Die Daten wurden noch nicht bereitgestellt und noch nicht auf die Seite geladen. 4. montiert (nach dem Laden)

In der montierten -Stufe wird die Vue-Instanz gemountet und data.message erfolgreich gerendert. Das heißt: Die Datenbasis wurde zu diesem Zeitpunkt auf der Seite bereitgestellt, sodass die korrekten Daten auf der Seite angezeigt werden können.

Im Allgemeinen senden wir hier asynchrone Anfragen (Ajax, Fetch, Axios usw.), um Daten auf dem Server abzurufen und im DOM anzuzeigen.

3. Update-Phase

5. beforeUpdate (vor dem Update)

Wird aufgerufen, wenn die Daten aktualisiert werden, das interne (innerHTML) im Dom, das dem vue-Objekt (Komponente) entspricht hat sich noch nicht geändert. Dies eignet sich für den Zugriff auf das vorhandene DOM vor der Aktualisierung, z. B. um hinzugefügte Ereignis-Listener manuell zu entfernen. Dieser Hook wird beim serverseitigen Rendern nicht aufgerufen, da nur das anfängliche Rendern auf der Serverseite erfolgt. 6.

aktualisiert

(Aktualisiert)                                                                                           Dieser Hook wird aufgerufen, nachdem das virtuelle DOM aufgrund von Datenänderungen neu gerendert und gepatcht wurde.

Vier. Zerstörungsphase

7.

beforeDestroy

(vor der Zerstörung)

Wird aufgerufen, bevor die Instanz zerstört wird. Zu diesem Zeitpunkt ist die Instanz noch vollständig verfügbar. Dieser Hook wird serverseitig gerendert

Während

nicht angerufen.

8. zerstört (nach der Zerstörung)

     Wird aufgerufen, nachdem die Vue-Instanz zerstört wurde. Nach dem Aufruf wird alles, auf das die Vue-Instanz verweist, entbunden, alle

Ereignis-Listener werden entfernt und alle untergeordneten Instanzen werden zerstört. Dieser Hook

wird beim serverseitigen Rendern nicht aufgerufen.

5. Die verbleibenden Hook-Funktionen, die nicht häufig verwendet werden

Die verbleibenden drei Hook-Funktionen werden selten verwendet, also verstehen Sie sie einfach. T9.

Aktiviert

(bei Aktivierung der Komponente)

Keep-Alive-Komponente wird aufgerufen, wenn sie aktiviert ist. Dieser Hook wird beim serverseitigen Rendern nicht aufgerufen. E10. Dieser Hook wird beim serverseitigen Rendern nicht aufgerufen.

11. errorCaptured (neu in 2.5.0+) (wenn ein Fehler erfasst wird)

Wird aufgerufen, wenn ein Fehler von einer Nachkommenkomponente erfasst wird. Dieser Hook empfängt drei Parameter: das Fehlerobjekt, die Komponenteninstanz, in der der Fehler aufgetreten ist, und eine Zeichenfolge mit Informationen über die Fehlerquelle. Dieser Hook kann false zurückgeben, um zu verhindern, dass sich der Fehler weiter nach oben ausbreitet.

【Verwandte Empfehlungen: vuejs-Video-Tutorial, Web-Front-End-Entwicklung】

Das obige ist der detaillierte Inhalt vonMehrere Phasen des Vue-Lebenszyklus. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!