Detaillierte Erklärung des Unterschieds zwischen Vue-Lebenszyklus

Lebenszyklusklassifizierung

Jede Komponente von Vue ist unabhängig und jede Komponente hat ihren eigenen Lebenszyklus.

Von der Komponentenerstellung über die Dateninitialisierung , Bereitstellung , Aktualisierung bis hin zur Zerstörung ist dies der sogenannte Lebenszyklus einer Komponente.
Die spezifischen Methoden in der Komponente sind:
vorErstellen
erstellt
vorMount
montiert
vorUpdate
aktualisiert
vorZerstörung
zerstört

vorErstellen

Es wird nach der Initialisierung der Instanz und vor der Datenbeobachtung und Ereigniskonfiguration aufgerufen. Zu diesem Zeitpunkt wurde das Optionsobjekt der Komponente noch nicht erstellt, el und Daten wurden noch nicht initialisiert, sodass auf die Methoden nicht zugegriffen werden kann.
Methoden und Daten zu Daten, berechnet usw.

erstellt

Es wird aufgerufen, nachdem die Instanz erstellt wurde. In diesem Schritt hat die Instanz die folgenden Konfigurationen abgeschlossen: Datenbeobachtung, Eigenschafts- und Methodenberechnungen, Überwachungs-/Ereignis-Rückrufe und abgeschlossene Dateninitialisierung, el jedoch nicht. Die Hängephase hat jedoch noch nicht begonnen und die Eigenschaft $el ist noch nicht sichtbar. Dies ist ein üblicher Lebenszyklus, da Sie Methoden in Methoden aufrufen, die Daten in Daten ändern und die Änderungen über die reaktionsfähige Bindung von Vue auf der Seite wiedergegeben werden können, die berechneten Eigenschaften in berechnet abgerufen werden können usw. Normalerweise können wir die Instanz hier vorverarbeiten

beforeMount (vor dem Mounten)

Es wird aufgerufen, bevor das Hängen beginnt, und die zugehörige Renderfunktion wird zum ersten Mal aufgerufen (virtueller DOM). Die Instanz hat die folgenden Konfigurationen abgeschlossen: Kompilieren der Vorlage, Generieren von HTML aus den Daten in den Daten und der Vorlage und Abschließen der EL- und Dateninitialisierung. Beachten Sie, dass das HTML noch nicht an die Seite angehängt wurde.

montiert

Die Montage ist abgeschlossen, d. h. das HTML in der Vorlage wird auf der HTML-Seite gerendert. Zu diesem Zeitpunkt können Sie im Allgemeinen einige Ajax-Operationen durchführen, und die Montage wird nur einmal ausgeführt.

vorUpdate

Wird aufgerufen, bevor Daten aktualisiert werden, bevor der virtuelle DOM neu gerendert und gepatcht wird. Weitere Änderungen am Status können in diesem Hook vorgenommen werden, ohne einen zusätzlichen Neurendervorgang auszulösen.

aktualisiert

Dieser Hook wird nur aufgerufen, wenn das virtuelle DOM aufgrund von Datenänderungen neu gerendert und gepatcht wird. Beim Aufruf wurde das Komponenten-DOM aktualisiert, sodass Vorgänge, die vom DOM abhängen, ausgeführt werden können. In den meisten Fällen sollte jedoch eine Statusänderung während dieser Zeit vermieden werden, da dies zu einer Endlosschleife von Aktualisierungen führen kann. Dieser Hook wird während des serverseitigen Renderings nicht aufgerufen.

vorZerstörung

Wird aufgerufen, bevor die Instanz zerstört wird. Die Instanz ist noch vollständig nutzbar.
In diesem Schritt können Sie dies auch verwenden, um die Instanz abzurufen.
Im Allgemeinen werden in diesem Schritt einige Reset-Vorgänge ausgeführt, z. B. das Löschen des Timers in der Komponente und das Überwachen des DOM-Ereignisses

zerstört

Wird aufgerufen, nachdem die Instanz zerstört wurde. Nach dem Aufruf werden alle Ereignislistener entfernt und alle untergeordneten Instanzen zerstört. Dieser Hook wird während der serverseitigen Darstellung nicht aufgerufen.
Die Vue-Instanz hat den Ereignislistener und die DOM-Bindung freigegeben, aber die DOM-Struktur ist noch vorhanden

Ausführungsreihenfolge (Diagramm)

Dies ist das Ende dieses Artikels mit der detaillierten Erklärung der Unterschiede im Vue-Lebenszyklus. Weitere relevante Inhalte zum Vue-Lebenszyklus 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!