Einführung in den Vue-Lebenszyklus und detaillierte Erklärung der Hook-Funktionen

Einführung in den Vue-Lebenszyklus und die Hook-Funktion

Die interne Struktur einer Komponente ist in jeder Phase unterschiedlich, daher führen im Allgemeinen bestimmte Hooks bestimmte Aufgaben aus, wie z. B. die Ajax-Datenerfassung in der bereitgestellten Phase. Der gesamte Prozess von der Erstellung der Vue-Instanz bis zur endgültigen Zerstörung der Instanz wird als VUE-Lebenszyklus bezeichnet. Während dieses Lebenszyklus passieren die folgenden Dinge: Beginnend mit der Erstellung der Vue-Instanz wird zuerst die Vue-Instanz erstellt, dann werden die Daten initialisiert, die Vorlage wird kompiliert, das DOM wird gemountet, das DOM wird gerendert, die Objekteigenschaften werden aktualisiert, das DOM wird gerendert und die Bindung wird gelöst und zerstört.

VUE-Lebenszyklus-Hooks

Lebenszyklus-Hooks werden auch Lebenszykluszeit, Lebenszyklusfunktion und Lebenszyklus-Hooks genannt und sind verschiedene Ereignisse, die im Vue-Lebenszyklus ausgelöst werden. Diese Ereignisse werden Lebenszyklus-Hooks genannt. Im Vue-Lebenszyklus sind die meisten von ihnen in vier Phasen unterteilt: Erstellen, Aufhängen, Aktualisieren und Zerstören. Diese vier Phasen entsprechen jeweils zwei Lebenszyklus-Hooks.

1. Der Erstellungsteil (Erstellen) ist, wenn die Vue-Instanz initialisiert wird. Einfach ausgedrückt führen wir diesen Vorgang im Code var app = new Vue () aus und treten dann in die Erstellungsphase des Vue-Lebenszyklus ein. In der Erstellungsphase werden uns zwei Programmierschnittstellen zur Verfügung gestellt, nämlich beforeCreate und created. Beide Schnittstellen werden in der Erstellungsphase ausgelöst, es gibt jedoch einige Unterschiede zwischen den beiden Schnittstellen. beforeCreate wird früher ausgelöst als created, d. h. es wird ausgelöst, nachdem die Vue-Instanz initialisiert wurde und bevor die Daten gelesen werden. Wenn die Daten in data zu diesem Zeitpunkt gelesen werden, wird eine Aufforderung unfined angezeigt. created wird aufgerufen, nachdem die Instanz erstellt wurde. Zu diesem Zeitpunkt wurden die Daten in data geschrieben, aber das DOM wurde noch nicht gemountet, sodass es nicht mit der Seite verknüpft wurde. Jetzt beginnt die Mounting-Phase.

2. Montagephase (Mount): In dieser Phase wird der DOM auf der Seite am instanziierten Vue-Objekt montiert. Einfach ausgedrückt wird el: '#dom' ausgeführt. In dieser Phase müssen wir auch zwei Schnittstellen programmieren, nämlich „beforemount“ und „mounted“. Der Hauptunterschied zwischen diesen beiden Schnittstellen besteht darin, ob das DOM auf dem Instanzobjekt gemountet ist. Beforemount wird vor dem Mounten ausgelöst und nur die Vorlage wird analysiert. Wenn das innerHTML des DOM, das gemountet werden muss, zu diesem Zeitpunkt ausgegeben wird, wird die Vorlage unverändert ausgegeben, ohne die Daten zu rendern. Nach dem Mounten können die Daten auf der Seite gerendert werden. Auf diese Phase folgt die Aktualisierungsphase.

3. Aktualisierungsphase: In dieser Phase werden die Daten der Seite nach dem ersten Laden noch einmal aktualisiert. Es entspricht auch zwei Schnittstellen: beforeupdate und update. Der Hauptunterschied zwischen diesen beiden Schnittstellen besteht darin, ob das Seiten-DOM gerendert wird. Wenn wir die Daten in Daten ändern und nach Abschluss der Änderung ein „beforeupdate“ auslösen, wurde der Attributwert in Daten geändert, aber das DOM der Seite wurde nicht gerendert. Das Update dient zum Rendern der Daten auf der Seite. Zu diesem Zeitpunkt hat der Lebenszyklus von Vue die Aktualisierungsphase erreicht. Bei normaler Verwendung befinden wir uns häufig viele Male in der Aktualisierungsphase und nehmen verschiedene Änderungen an den Daten auf der Seite vor. Um jedoch unnötige Ereignisse zu schließen und Speicher freizugeben, ist eine Vernichtungsphase erforderlich.
Viertens die Zerstörungsphase (Destory). Nachdem eine Instanz zerstört wurde, werden alle an die Instanz gebundenen Ereignisse ungültig und die Listener werden entfernt. Diese Phase entspricht zwei Schnittstellen: beforeDestroy und destroy. deforeDestory wird aufgerufen, bevor die Instanz zerstört werden muss, wurde aber noch nicht aufgerufen. Zu diesem Zeitpunkt sind noch verschiedene an die Instanz gebundene Ereignisse und Listener verfügbar. destroy wird aufgerufen, nachdem die Instanz zerstört wurde. Zu diesem Zeitpunkt kann nichts in der Instanz verwendet werden, aber die Daten auf der Seite enthalten immer noch die Daten der letzten Darstellung der Seite.

Einführung in den Vue-Lebenszyklus

Die oben beschriebenen Phasen

Verwenden der Hook-Funktion zur Codebeobachtung

<!DOCTYPE html>
<html>
<Kopf>
    <Titel></Titel>
    <script type="text/javascript" src="https://cdn.jsdelivr.net/vue/2.1.3/vue.js"></script>
</Kopf>
<Text>
 <div id="app">
     <p>{{ Nachricht }}</p>
</div>
 <Skripttyp="text/javascript">
   var app = new Vue({
      el: '#app',
      Daten: {
          Nachricht: „xuxiao ist ein Junge“ 
      },
       vorErstellen: Funktion () {
                console.group('beforeCreate Status vor der Erstellung ================》');
               console.log("%c%s", "Farbe:rot", "el: " + this.$el); //undefiniert
               console.log("%c%s", "Farbe:rot","Daten : " + this.$data); //undefiniert 
               console.log("%c%s", "Farbe:rot", "Nachricht: " + diese.Nachricht)  
        },
        erstellt: Funktion () {
            console.group('erstellt. Erstellung abgeschlossen. Status ================》');
            console.log("%c%s", "Farbe:rot","el : " + this.$el); //undefiniert
               console.log("%c%s", "color:red","data : " + this.$data); //wurde initialisiertconsole.log("%c%s", "color:red","message: " + this.message); //wurde initialisiert},
        vorMount: Funktion () {
            console.group('beforeMount Status vor dem Mounten ================》');
            console.log("%c%s", "Farbe:rot","el : " + (this.$el)); //Initialisiert console.log(this.$el);
               console.log("%c%s", "color:red","data : " + this.$data); //wurde initialisiertconsole.log("%c%s", "color:red","message: " + this.message); //wurde initialisiert},
        montiert: Funktion () {
            console.group('montiert. Montage-Endstatus ================》');
            console.log("%c%s", "Farbe:rot","el : " + this.$el); //Initialisiert console.log(this.$el);    
               console.log("%c%s", "color:red","data : " + this.$data); //wurde initialisiertconsole.log("%c%s", "color:red","message: " + this.message); //wurde initialisiert},
        vorUpdate: Funktion () {
            console.group('beforeUpdate Status vor dem Update ================》');
            console.log("%c%s", "Farbe: rot","el : " + this.$el);
            konsole.log(dies.$el);   
               console.log("%c%s", "Farbe: rot", "Daten: " + diese.$Daten); 
               console.log("%c%s", "Farbe: rot","Nachricht: " + diese.Nachricht); 
        },
        aktualisiert: Funktion () {
            console.group('aktualisiert. Status „Update abgeschlossen“ ================》');
            console.log("%c%s", "Farbe: rot","el : " + this.$el);
            konsole.log(dies.$el); 
               console.log("%c%s", "Farbe: rot", "Daten: " + diese.$Daten); 
               console.log("%c%s", "Farbe: rot","Nachricht: " + diese.Nachricht); 
        },
        beforeDestroy: Funktion () {
            console.group('beforeDestroy-Zustand vor der Zerstörung ================》');
            console.log("%c%s", "Farbe: rot","el : " + this.$el);
            konsole.log(dies.$el);    
               console.log("%c%s", "Farbe: rot", "Daten: " + diese.$Daten); 
               console.log("%c%s", "Farbe: rot","Nachricht: " + diese.Nachricht); 
        },
        zerstört: Funktion () {
            console.group('zerstört. Status der Zerstörung abgeschlossen ================》');
            console.log("%c%s", "Farbe: rot","el : " + this.$el);
            konsole.log(dies.$el);  
               console.log("%c%s", "Farbe: rot", "Daten: " + diese.$Daten); 
               console.log("%c%s", "Farbe:rot", "Nachricht: " + diese.Nachricht)
        }
    })
</Skript>
</body>
</html>

erstellen und montiert verwandte

beforecreated： el und data werden nicht initialisiert

created: Die Initialisierung der Daten ist abgeschlossen, el hat keine

beforeMount： El- und Dateninitialisierung abgeschlossen

mounted ： Montage abgeschlossen

Darüber hinaus können wir im roten Bereich feststellen, dass el immer noch {{message}} ist. Hier wird die Virtual DOM-Technologie (virtual Dom) angewendet, die zuerst die Grube einnimmt. Der Wert wird beim späteren Mounten gerendert.

Update bezogen

zerstören

Was die Zerstörung betrifft, ist die Lage noch nicht ganz klar. Wir führen den Befehl in der Konsole aus, um die Vue-Instanz zu zerstören. Nachdem die Zerstörung abgeschlossen ist, ändern wir den Nachrichtenwert erneut und Vue reagiert nicht mehr auf diese Aktion. Die ursprünglich generierten DOM-Elemente sind jedoch weiterhin vorhanden. Es ist verständlich, dass sie nach der Ausführung des Zerstörungsvorgangs nicht mehr von Vue gesteuert werden.

Zusammenfassen

beforecreate : Hier können Sie beispielsweise ein Ladeereignis hinzufügen

created ： Hier endet der Ladevorgang und es werden einige Initialisierungsvorgänge durchgeführt, um die Funktion selbstausführend zu machen

mounted ： hier eine Backend-Anfrage initiieren, Daten abrufen und etwas mit dem Routing-Hook tun

beforeDestory： Möchten Sie XX wirklich löschen? destoried: Die aktuelle Komponente wurde gelöscht und der zugehörige Inhalt wurde gelöscht

Dieser Artikel endet hier. Ich hoffe, er kann Ihnen helfen. Ich hoffe auch, dass Sie mehr Inhalten auf 123WORDPRESS.COM mehr Aufmerksamkeit schenken können!