Detaillierte Erklärung des Vue-Lebenszyklus

Warum den Lebenszyklus verstehen?

Die Verwendung des Vue-Frameworks und die Kenntnis seines Lebenszyklus können den Entwicklungsverlauf verbessern.

Wenn Sie nur die einfache Syntax in Vue kennen, können Sie einige entsprechende Projekte und Ideen umsetzen. Wenn jedoch ein Problem auftritt, müssen wir den Lebenszyklus verwenden, um das Problem zu finden. Selbst wenn einige Anforderungen vorhanden sind, können Sie den Lebenszyklus auch verwenden, um zu bestimmen, wo wir dieses Ding schreiben sollten. Daher ist es notwendig, den Lebenszyklus von Vue zu verstehen.

Was ist der Lebenszyklus?

Der Prozess von der Erstellung bis zur Zerstörung einer Vue-Instanz ist der Lebenszyklus. Im Einzelnen handelt es sich um eine Reihe von Prozessen aus der Erstellung, Initialisierung der Daten, Kompilierung der Vorlagen, Mounten von Dom, Rendern → Aktualisieren → Rendern, Deinstallation usw.

Darüber hinaus ist die Vue-Instanz der Einstiegspunkt des Vue-Frameworks und kann als Front-End-ViewModel verstanden werden. Sie enthält die Geschäftslogikverarbeitung und das Datenmodell auf der Seite. Sie verfügt außerdem über eine eigene Reihe von Lebenszyklus-Funktions-Hooks, die uns dabei unterstützen, die JS-Kontrolle über den gesamten Prozess der Generierung, Kompilierung, Aufhängung und Zerstörung der Vue-Instanz durchzuführen.
Das auf der offiziellen Website bereitgestellte Lebenszyklusdiagramm (ins Chinesische übersetzt) ​​lautet wie folgt:

Lebenszyklus-Hook-Funktionen

Der Lifecycle-Hook ist nur ein Alias ​​für ein Lifecycle-Ereignis. Lifecycle-Hook = Lifecycle-Funktion = Lifecycle-Ereignis

Die wichtigsten Funktionskategorien des Lebenszyklus sind:

Lebenszyklusfunktionen während der Erstellung:
beforeCreate: Die Instanz wurde gerade im Speicher erstellt. Zu diesem Zeitpunkt wurden die Daten- und Methodenattribute noch nicht initialisiert.
erstellt: Die Instanz wurde im Speicher erstellt. Die Daten und Methoden wurden erstellt. Die Vorlage wurde noch nicht kompiliert.
beforeMount: Die Vorlage wurde kompiliert, aber noch nicht auf der Seite montiert
Mounted: An diesem Punkt wurde die kompilierte Vorlage in den von der Seite angegebenen Container zur Anzeige gemountet.

Lebenszyklusfunktionen während der Laufzeit:
beforeUpdate: Diese Funktion wird ausgeführt, bevor der Status aktualisiert wird. Zu diesem Zeitpunkt ist der Statuswert in den Daten der neueste, aber die auf der Schnittstelle angezeigten Daten sind noch alt, da der DOM-Knoten noch nicht neu gerendert wurde.
aktualisiert: Diese Funktion wird aufgerufen, nachdem die Instanz aktualisiert wurde. Zu diesem Zeitpunkt wurden der Statuswert in den Daten und die auf der Schnittstelle angezeigten Daten aktualisiert und die Schnittstelle wurde neu gerendert!

Lebenszyklusfunktionen während der Zerstörung:
beforeDestroy: wird aufgerufen, bevor die Instanz zerstört wird. In diesem Schritt ist die Instanz noch vollständig nutzbar.
zerstört: wird aufgerufen, nachdem die Vue-Instanz zerstört wurde. Nach dem Aufruf wird die Bindung von allem, worauf die Vue-Instanz zeigt, aufgehoben, alle Ereignis-Listener werden entfernt und alle untergeordneten Instanzen werden zerstört.

erstellt und montiert

Unter den Lebenszyklus-Hook-Funktionen werden wahrscheinlich die am häufigsten verwendeten erstellt und gemountet.

erstellt: Wird aufgerufen, bevor die Vorlage in HTML gerendert wird, wodurch normalerweise bestimmte Attributwerte initialisiert und dann in eine Ansicht gerendert werden. Hauptanwendungen: Daten aufrufen, Methoden aufrufen, asynchrone Funktionen aufrufen
Mounted: Wird aufgerufen, nachdem die Vorlage in HTML gerendert wurde, normalerweise nachdem die Seite initialisiert wurde. Anschließend werden einige erforderliche Vorgänge am HTML-DOM-Knoten ausgeführt.

Beim Erstellen wird das HTML in der Ansicht nicht gerendert. Wenn Sie also zu diesem Zeitpunkt den DOM-Knoten des HTML direkt bedienen, werden Sie die relevanten Elemente definitiv nicht finden. Da HTML zu diesem Zeitpunkt bereits gerendert wurde, können Sie beim Mounten den DOM-Knoten direkt bedienen.

Tatsächlich sind die beiden relativ einfach zu verstehen. Normalerweise wird „create“ häufiger verwendet, während „mounted“ normalerweise bei der Verwendung einiger Plug-Ins oder Komponenten ausgeführt wird. Wenn Sie beispielsweise das Plug-In chart.js verwenden: var ctx = document.getElementById(ID); gibt es normalerweise diesen Schritt. Wenn Sie es in eine Komponente schreiben, werden Sie feststellen, dass Sie in „create“ keine Initialisierungskonfiguration für das Diagramm durchführen können. Sie müssen warten, bis das HTML gerendert ist, bevor Sie fortfahren können. In diesem Fall ist „mounted“ die einzige Wahl.

Einige praktische Anwendungen von Hooks

1. Asynchrone Funktionen

Hier verwenden wir einen Timer, um asynchrone Funktionen auszuführen

<div id="app">
    <ul>
        <li v-for="(Element,Index) der Liste" key="index">{{Element}}</li>
    </ul>
</div>

<Skripttyp="text/javascript">
    var app = new Vue({
        el:'#app',
        Daten:{
            Liste:['aaaaaaaa','bbbbbb','ccccccc']
        },
        erstellt:Funktion(){
            consoloe.log('asynchron erstellt: aaaaa');
            //Asynchrone Datenerfassung // Da es asynchron ist, ist es dasselbe wie unsere Ajax-Datenerfassung setTimeout(()=>{
                diese.Liste=['111','222','333','444'],
                console.log('asynchron erstellt:', document.getElementsByTagName('li').length);
            },0)
        },
        gemountet: Funktion () {
            console.log('mountet:',document.getElementsByTagName('li').Länge);
        },
        aktualisiert: Funktion () {
            console.log('aktualisiert:',document.getElementsByTagName('li').Länge)
        },
    })
</Skript>

Das Ergebnis ist:

erstellen: aaaaaaaa
montiert: 3
Erstellte asynchrone Funktion: 3
aktualisiert: 4

erklären:

Sie können sehen, dass die Ausführungsreihenfolge der Funktion wie folgt lautet, weil die asynchrone Funktion zum erstellten Hook hinzugefügt wird:

erstellter Hook, montierter Hook, asynchrone Funktion, aktualisierter Hook (gemäß dem Ereigniswarteschlangenprinzip wird li erst nach der Aktualisierung wirklich als 4 DOM gerendert, sodass die Anzahl der in der asynchronen Funktion erhaltenen li mit der Anzahl der nicht geänderten li übereinstimmt).

Da „Mounted“ das DOM durch Festlegen des Anfangswerts in den Vue-Daten rendert und wir die Listendaten in der asynchronen Funktion ändern, beträgt die von „Mounted“ erhaltene Anzahl von „li“ 3.

Die Aktualisierungsfunktion wird ausgelöst, solange sich die an den Datenwert gebundenen Daten ändern. Daher wird sie zuletzt ausgeführt, also 4

Bedeutet dies, dass wir direkt in der Update-Funktion arbeiten können? Eigentlich nicht wirklich, denn die Update-Funktion ist für alle Datenänderungen in Vue zuständig und wir können auch andere Datenänderungen haben.

Beispielsweise das folgende Beispiel:

// Wir verwenden die asynchrone Funktion, um die Liste zweimal zu ändern, und wir werden feststellen, dass die Aktualisierung zweimal ausgelöst wird. erstellt: function() {
        //Asynchrone Datenerfassung // Da es asynchron ist, ist es dasselbe wie unsere Ajax-Datenerfassung setTimeout(()=>{
             diese.Liste=['111','222','333','444'],
             console.log('asynchron erstellt:', document.getElementsByTagName('li').length);
        },0)
        setzeTimeout(()=>{
             this.list=['Happy Camp', 'Bodenständig', '300033', 'Täglicher Fortschritt', 'Lerne fleißig'],
             console.log('asynchron erstellt:', document.getElementsByTagName('li').length);
        },1000)
},
gemountet: Funktion () {
        console.log('mountet:',document.getElementsByTagName('li').Länge);
},
aktualisiert: Funktion () {
        console.log('aktualisiert:',document.getElementsByTagName('li').Länge)
},

Das Ergebnis ist:

2. Vue.nextTick bearbeitet die Ergebnisse asynchroner Funktionen

Wenn wir die Daten ändern möchten, löst jeder seine eigene Methode aus

erstellt:Funktion(){
//Asynchrone Datenerfassung // Da es asynchron ist, ist es dasselbe wie unsere Ajax-Datenerfassung // Um ​​zu warten, bis Vue nach der Datenänderung die Aktualisierung des DOM abgeschlossen hat, können Sie Vue.nextTick(callback) unmittelbar nach der Datenänderung verwenden. Auf diese Weise wird die Rückruffunktion aufgerufen, nachdem die DOM-Aktualisierung abgeschlossen ist.
    setzeTimeout(()=>{
        diese.Liste=['111','222','333','444'],
        console.log('asynchron erstellt:', document.getElementsByTagName('li').length);
        dies.$nextTick(Funktion(){
            console.log("erstellt$nextTick:",document.getElementsByTagName('li').Länge)
        });
    },0)
    setzeTimeout(()=>{
        this.list=['Happy Camp', 'Bodenständig', '300033', 'Täglicher Fortschritt', 'Lerne fleißig'],
        console.log('asynchron erstellt:', document.getElementsByTagName('li').length);
        dies.$nextTick(Funktion(){
            console.log("erstellt$nextTick:",document.getElementsByTagName('li').Länge)
        });
    },1000)
},
montiert: Funktion () {
    console.log('mountet:',document.getElementsByTagName('li').Länge);
},
aktualisiert: Funktion () {
  console.log('aktualisiert:',document.getElementsByTagName('li').Länge)
},

Das Ergebnis ist:

Wir können sehen, dass wir durch $nextTick unsere eigenen Operationen auf den Ergebnissen asynchroner Funktionen durchführen können

Zusammenfassen

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!