In welchem ​​Lebenszyklus befindet sich Ajax in Vue im Allgemeinen?

Ajax-Anfragen in Vue werden im Allgemeinen im „Erstellt“-Zyklus platziert. Vorteile: 1. Es kann Serverdaten schneller abrufen und die Seitenladezeit verkürzen. 2. Es trägt zur Konsistenz bei, da SSR die Funktion „beforeMount“ und „mounted Hooks“ nicht unterstützt.

Die Betriebsumgebung dieses Tutorials: Windows 7-System, Vue-Version 2.9.6, DELL G3-Computer.

Vue-Lebenszyklus

• beforeCreate (vor der Erstellung): Bevor Datenbeobachtungs- und Initialisierungsereignisse gestartet wurden, sind Daten, Beobachter und Methoden noch nicht vorhanden, aber $route ist bereits vorhanden und kann weitergeleitet werden Laut Angaben wird umgeleitet usw.

• erstellt (nach der Erstellung): Wird nach der Erstellung der Instanz aufgerufen. In dieser Phase kann mit Watcher, Ereignissen, Methoden, d. h. Datenbeobachtung (Datenbeobachter) und Ereignis/Watcher, auf Daten zugegriffen werden Die Ereigniskonfiguration ist abgeschlossen. Aber der Dom ist noch nicht montiert. In dieser Phase können HTTP-Anforderungsvorgänge ausgeführt werden.

• beforeMount (vor dem Mounten): Analysieren Sie HTML, um AST-Knoten zu generieren, und generieren Sie dann dynamisch Rendering-Funktionen basierend auf den AST-Knoten. Die entsprechende Renderfunktion wird zum ersten Mal aufgerufen (Hervorhebung hinzugefügt).

• montiert (nach der Montage): Wird nach Abschluss der Montage aufgerufen, führt die Renderfunktion aus, um einen virtuellen Dom zu generieren, erstellt einen echten Dom, um den virtuellen Dom zu ersetzen, und mountet ihn in der Instanz. Sie können Dom betreiben, beispielsweise die Ereignisüberwachung

• beforeUpdate: Wird aufgerufen, nachdem vm.data aktualisiert wurde und bevor der virtuelle Dom erneut gerendert wird. Dieser Hook kann aufgerufen werden, nachdem das vm.data-Update geändert wurde, aber bevor das virtuelle DOM erneut gerendert wird. Dieser Hook kann aufgerufen werden, nachdem das vm.data-Update geändert wurde, aber bevor das virtuelle DOM erneut gerendert wird. In diesem Hook kann vm.data geändert werden und es wird kein zusätzlicher Puffer- und Rendering-Prozess ausgelöst.

• updated: Wird aufgerufen, nachdem der virtuelle Dom erneut gerendert wurde, bevor „forUpdate“ und „updated“ erneut ausgelöst werden und eine Endlosschleife beginnt.

• beforeDestroy: Wird aufgerufen, bevor die Instanz zerstört wird, was bedeutet, dass die Instanz zu diesem Zeitpunkt noch aufgerufen werden kann.

• zerstört: Wird aufgerufen, nachdem die Instanz zerstört wurde, alle Ereignis-Listener entfernt wurden und die untergeordnete Instanz zerstört wurde

In welchem ​​Lebenszyklus von Vue befindet sich Ajax?

Im Allgemeinen können Datenanfragen erstellt und bereitgestellt werden. In den meisten Fällen werden Anfragen jedoch erstellt gesendet.

Nutzungsszenario von Erstellt: Wenn die Seite zum ersten Mal gerendert wird, stammt sie aus den Back-End-Daten. Denn zu diesem Zeitpunkt wurden die Daten auf der Vue-Instanz bereitgestellt.

In erstellt (wenn Sie möchten, dass die ersten ausgewählten Daten vom Backend kommen, senden Sie hier eine Anfrage) (es werden nur asynchrone Anfragen gesendet, das Rendern wird durchgeführt, nachdem das Backend geantwortet hat), beforeMount, gemountet (senden Sie die gemountete Anfrage zweimal gerendert) und diese drei Hook-Funktionen aufgerufen.

Da in diesen drei Hook-Funktionen Daten erstellt wurden, können die vom Server zurückgegebenen Daten zugeordnet werden. Am häufigsten werden jedoch asynchrone Anforderungen in der erstellten Hook-Funktion aufgerufen, da asynchrone Anforderungen in der erstellten Hook-Funktion aufgerufen werden.

Vorteile:

Erster Punkt: Serverdaten können schneller abgerufen und die Ladezeit der Seite verkürzt werden ;

Zweiter Punkt: Das Einfügen in „created“ trägt zur Konsistenz bei, da ssr die Funktionen „beforeMount“ und „mounted Hook“ nicht unterstützt.

【Verwandte Empfehlungen: vue.js Tutorial】

Das obige ist der detaillierte Inhalt vonIn welchem ​​Lebenszyklus befindet sich Ajax in Vue im Allgemeinen?. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!