Detaillierte Erläuterung der Vue-Lebenszyklusfunktionen

Lebenszyklusfunktionen

Lebenszyklusfunktionen werden auch genannt: Lebenszyklus-Callbackfunktionen, Lebenszyklusfunktionen, Lebenszyklus-Hooks

Was ist das: Vue hilft uns, in kritischen Momenten einige Funktionen mit speziellen Namen aufzurufen

Der Name der Lebenszyklusfunktion kann nicht geändert werden, aber der spezifische Inhalt der Funktion wird vom Programmierer entsprechend den Anforderungen geschrieben

Dies bezieht sich in der Lebenszyklusfunktion auf das VM- oder Komponenteninstanziierungsobjekt

Allgemeine Lebenszyklus-Hooks

1. mounted : Ajax-Anfrage senden, Timer starten, benutzerdefinierte Ereignisabonnementnachricht binden und andere Funktionen [Initialisierungsvorgang]

2. beforeDestory : Timer löschen, benutzerdefinierte Ereignisse aufheben, Nachrichten abbestellen usw. [Arbeit beginnen und beenden]

Über die Vue-Destroy-Instanz:

1. Nach der Zerstörung können mit Hilfe der Vue-Entwicklertools keine Informationen mehr angezeigt werden

2. Benutzerdefinierte Ereignisse werden nach der Zerstörung ungültig, native DOM-Ereignisse sind jedoch weiterhin gültig

3. Im Allgemeinen werden Daten in beforeDestory nicht bearbeitet, da der Aktualisierungsprozess auch dann nicht mehr ausgelöst wird, wenn die Daten bearbeitet werden.

 <div id="Wurzel">
        <h2 :style="{opacity}"> Willkommen beim Lernen des Lebenszyklus von Vue</h2>
        <button @click="stop">Klicken Sie hier, um die Änderung abzubrechen</button>

    </div>
    <Skript>
        Vue.config.productionTip = falsch;
        const vm = neuer Vue({
            el: "#Wurzel",
            Daten: {
                Deckkraft: 1,
            },
            Methoden: {
                stoppen() {
                    // Intervall löschen(dieser.Timer)
                    dies.$destroy();
                }
            },
            //Nachdem Vue die Vorlagenanalyse abgeschlossen und das eigentliche anfängliche DOM-Element in die Seite eingefügt hat (die Bereitstellung ist abgeschlossen), rufen Sie „mounted“ auf.
            montiert() {

                dieser.timer = setzeInterval(() => {
                    diese.opacity -= 0,01;
                    wenn (diese.opacity <= 0)
                        diese.opacity = 1;

                }, 16)
            },
            vorZerstören() {
                console.log('VM ist dabei, nach Westen zu reisen');
                Intervall löschen(dieser.Timer)
            }
        })
    </Skript>

Zusammenfassen

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