Ein Überblick über die Verantwortlichkeiten jedes Lebenszyklus von Vue-Komponenten!

Der Lebenszyklus von Komponenten in Vue, was macht jeder Lebenszyklus und was sollte in diesem Lebenszyklus getan werden?

【Verwandte Empfehlung: vue.js Video-Tutorial】

Um zu wissen, wann jeder Lebenszyklus aufgerufen wird

• 1.beforeCreate wird aufgerufen, nachdem die Instanz initialisiert wurde, aber vor dem Datenbeobachter.

• 2.created wird aufgerufen, nachdem die Instanz erstellt wurde. In diesem Schritt hat die Instanz die folgende Konfiguration abgeschlossen: Datenbeobachter, Vorgänge für Eigenschaften und Methoden sowie Rückrufe von Überwachungs-/Ereignisereignissen. Hier gibt es kein $el

• 3.beforeMount wird aufgerufen, bevor der Mount startet: Die entsprechende Renderfunktion wird zum ersten Mal aufgerufen.

• 4.mounted el wird durch das neu erstellte vm.$el ersetzt und vor dem Aufruf dieses Hooks in die Instanz gemountet.

• 5.beforeUpdate wird aufgerufen, wenn die Daten aktualisiert werden, was geschieht, bevor das virtuelle DOM neu gerendert und gepatcht wird.

• 6.aktualisiert Dieser Hook wird nach dem erneuten Rendern und Patchen des virtuellen DOM aufgrund von Datenänderungen aufgerufen.

• 7.beforeDestroy wird aufgerufen, bevor die Instanz zerstört wird. Zu diesem Zeitpunkt ist die Instanz noch vollständig verfügbar.

• 8.destroyed Wird aufgerufen, nachdem die Vue-Instanz zerstört wurde. Nach diesem Aufruf wird alles, auf das die Vue-Instanz verweist, ungebunden, alle Ereignis-Listener werden entfernt und alle untergeordneten Instanzen werden zerstört. Dieser Hook wird beim serverseitigen Rendern nicht aufgerufen

Um zu verstehen, was in jedem Lebenszyklus getan werden kann

• 1.Es wurde eine Instanz erstellt, da dies der früheste Auslösergrund für die Ausführung einiger Daten ist , Ressourcenanforderung.

• 2.montiert Die Instanz wurde gemountet und einige DOM-Vorgänge können ausgeführt werden

• 3.beforeUpdate Sie können den Status in diesem Hook weiter ändern, wodurch kein zusätzlicher Neurendervorgang ausgelöst wird.

• 4.updated kann Vorgänge ausführen, die vom DOM abhängen. In den meisten Fällen sollten Sie es jedoch vermeiden, den Status in diesem Zeitraum zu ändern, da dies zu einer Endlosschleife von Aktualisierungen führen kann. Dieser Hook wird beim serverseitigen Rendern nicht aufgerufen.

• 5.destroyed kann einige Optimierungsvorgänge durchführen, Timer löschen und Ereignisse entbinden

Das obige ist der detaillierte Inhalt vonEin Überblick über die Verantwortlichkeiten jedes Lebenszyklus von Vue-Komponenten!. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!