Detaillierte Erläuterung des VueJS-Lebenszyklus und der Hook-Funktionsanwendung

In diesem Artikel geht es um den Lebenszyklusvon VueJS und die Anwendung der Hook-Funktion Wenn Sie den Lebenszyklus von VueJS und die Anwendung der Hook-Funktion nicht verstehen , dann stehen wir auf und lesen diesen Artikel. Okay, genug Unsinn und kommen wir zur Sache

Hallo Freunde! Glücklicherweise kann mein Artikel von Ihnen gelesen werden. Daher sollten Sie zu diesem Zeitpunkt ein umfassenderes Verständnis des Lebenszyklus von Vuejs erlangen und die Anwendungsszenarien einiger Hook-Funktionen in der tatsächlichen Entwicklung kennenlernen Stellen Sie es sich direkt unten vor.

1. Der Lebenszyklus von Vue

Einfach ausgedrückt ist der Lebenszyklus der Zeitprozess von der Entstehung bis zum Verschwinden von Dingen. Dann ist der Lebenszyklus von Vue der Prozess von seiner Erstellung bis zu seiner Zerstörung, der den Beginn der Erstellung, die Initialisierung von Daten, das Kompilieren von Vorlagen, das Mounten von Dom (Rendering), Rendering->Update->Rendering, Zerstörung (Deinstallation) usw. umfasst Verfahren.

Dann sind die Hook-Funktionen für ihre eigenen Verantwortlichkeiten verantwortlich. Die am häufigsten verwendeten sind die erstellten und bereitgestellten Funktionen.

2. Hook-Funktion

vorErstellen

Nach der Instanzinitialisierung werden Datenbeobachtung und Ereignisse vor der Konfiguration der Lebenszyklusinitialisierung aufgerufen.

created

wird aufgerufen, nachdem die Instanz erstellt wurde. In diesem Schritt hat die Instanz die folgende Konfiguration abgeschlossen: Datenbeobachtung, Eigenschaften und Methoden Operationen und Ereignisrückrufe. Allerdings hat die Montagephase noch nicht begonnen und das $el-Attribut ist derzeit unsichtbar.

beforeMount

wird aufgerufen, bevor der Mount startet: Die zugehörige Renderfunktion wird zum ersten Mal aufgerufen, An dieser Stelle gibt es ein virtuelles DOM.

mounted

el wird durch das neu erstellte vm.$el ersetzt und aufgerufen, nachdem es gemountet wurde Die Instanz. Dieser Hook rendert in echtes DOM .

beforeUpdate

wird aufgerufen, bevor die Daten aktualisiert werden, was geschieht, bevor das virtuelle DOM erneut gerendert wird und gepatcht. Sie können den Status in diesem Hook weiter ändern, wodurch kein zusätzlicher Neurendervorgang ausgelöst wird.

aktualisiert

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

Wenn dieser Hook aufgerufen wird, wurde das Komponenten-DOM aktualisiert, sodass Sie jetzt Vorgänge ausführen können, die vom DOM abhängen. In den meisten Fällen sollten Sie es jedoch vermeiden, den Status während dieser Zeit zu ändern, da dies zu einer Endlosschleife von Aktualisierungen führen kann.

Hinweis: Dieser Hook wird beim serverseitigen Rendern nicht aufgerufen.

beforeDestroy

Wird aufgerufen, bevor die Instanz zerstört wird. Zu diesem Zeitpunkt ist die Instanz noch verfügbar.

zerstört

Wird aufgerufen, nachdem die Vue-Instanz zerstört wurde. Nach dem Aufruf wird alles, was von der Vue-Instanz angezeigt wird, ungebunden, alle Ereignis-Listener werden deinstalliert und entfernt und alle untergeordneten Instanzen werden zerstört.

Es ist erwähnenswert: Dieser Hook wird beim serverseitigen Rendern nicht aufgerufen.

Verwandte Empfehlungen:

Detailliertes Beispiel der Suchabgleichsfunktion von Vuejs

Das obige ist der detaillierte Inhalt vonDetaillierte Erläuterung des VueJS-Lebenszyklus und der Hook-Funktionsanwendung. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!