Detaillierte Erläuterung des Lebenszyklus von Vue-Instanzen von der Erstellung bis zur Zerstörung

Dieser Artikel bringt Ihnen relevantes Wissen über vue, das hauptsächlich den gesamten Prozess des Lebenszyklus von Vue-Instanzen von der Erstellung bis zur Zerstörung vorstellt. Der Lebenszyklus durchläuft bei der Erstellung einen Prozess Schauen Sie sich den Initialisierungsprozess der Serie an. Ich hoffe, er wird für alle hilfreich sein. 🔜 Der Lebenszyklus bestimmt, ob das von Ihnen geschriebene Programm gut ist, und dieser Aspekt war schon immer ein wichtiger Testpunkt für den Vue-Teil des Interviews.

Erste Einführung in New Vue

Über New Vue Jeder sollte wissen, dass das Schlüsselwort new ein Objekt in js instanziiert. Was hat das neue Vue also gemacht?

Tatsächlich erstellt die neue Vue-Instanz eine Klasse, die den Konstruktor der Vue-Klasse ausführt.

let vm = new Vue({
   el: "#app",
   data: {
       name: 'beiyu'
   },
}

Also zu dieser Instanz, von der Initialisierung bis zur Zerstörung , was ist passiert? Schauen wir uns Folgendes an: Vue-Instanz von der Erstellung bis zur Zerstörung

Der Prozess der Instanz von der Erstellung bis zur Zerstörung wird als Lebenszyklus bezeichnet.

Das Grundkonzept des Lebenszyklus:

Wenn jede Vue-Instanz erstellt wird müssen eine Reihe von Initialisierungsprozessen durchlaufen.

Zum Beispiel: Sie müssen die Datenüberwachung einrichten, Vorlagen kompilieren, Instanzen im DOM bereitstellen und DOM aktualisieren, wenn sich Daten ändern usw. Gleichzeitig werden während dieses Prozesses auch einige Funktionen ausgeführt, die als Lebenszyklus-Hooks bezeichnet werden und Benutzern die Möglichkeit geben, in verschiedenen Phasen ihren eigenen Code hinzuzufügen.

1. Vor der Erstellung – beforeCreate()

Bevor das Vue-Instanzobjekt erstellt wird

el-Attribut und Datenattribut sind beide leer und werden häufig zum Initialisieren nicht reagierender Variablen verwendet

beforeCreate() {
    console.group("---创建前beforeCreate---")
    console.log('%c%s', 'color: red', 'el:' + this.$el)
    console.log('%c%s', 'color: red', 'data:' + this.$data)
},

2. )

Nachdem das Vue-Instanzobjekt erstellt wurde, ist das Datenattribut vorhanden, das el-Attribut ist leer und der Inhalt des ref-Attributs ist ein leeres Array. Es wird häufig für Axios-Anfragen, Seiteninitialisierung usw. verwendet. Stellen Sie hier jedoch nicht zu viele Anfragen, da sonst ein langer weißer Bildschirm erscheint.

created() {
    console.group("---创建之后created---")
    console.log('%c%s', 'color: red', 'el:' + this.$el)
    console.log('%c%s', 'color: red', 'data:' + this.$data, this.$data.name)
},

3. Bevor das Instanzobjekt und das Dokument gemountet werden – beforeMount()

Bevor das Vue-Instanzobjekt und das Dokument gemountet werden, wird die entsprechende Vorlage gefunden

beforeMount() {
    // 这个时候$el属性是绑定之前的值
    console.group("---挂载之前beforeMount---")
    console.log('%c%s', 'color: red', 'el:' + this.$el, this.$el.innerHTML)
    console.log('%c%s', 'color: red', 'data:' + this.$data, this.$data.name)
},

4 —mounted ()

Nachdem das Vue-Instanzobjekt und der Dokumentknoten gemountet sind

ist das el-Attribut vorhanden und auf das ref-Attribut kann zugegriffen werden

mounted() {
    console.group("---挂载之后mounted---")
    console.log('%c%s', 'color: red', 'el:' + this.$el, this.$el.innerHTML)
    console.log('%c%s', 'color: red', 'data:' + this.$data, this.$data.name)
},

5 Bevor die Ansicht aktualisiert wird – beforeUpdate()

View vor dem Die Ansicht wird aktualisiert

Wird aufgerufen, wenn die Antwortdaten aktualisiert werden.

beforeUpdate() {
    console.group("---更新之前beforeUpdate---")
    console.log('%c%s', 'color: red', 'el:' + this.$el, this.$el.innerHTML)
},

6. Nachdem die Ansicht aktualisiert wurde eine Endlosschleife

updated() {
    console.group("---更新之后updated---")
    console.log('%c%s', 'color: red', 'el:' + this.$el, this.$el.innerHTML)
},

7. Bevor die Instanz zerstört wird – beforeDestroy()

Bevor das Vue-Instanzobjekt zerstört wird | In diesem Schritt werden globale Ereignisse ausgeführt und Plug-in-Objekte zerstört.

beforeDestroy() {
    console.group("---销毁之前beforeDestroy---")
    console.log('%c%s', 'color: red', 'el:' + this.$el, this.$el.innerHTML)},

8. Nachdem die Instanz zerstört wurde – destroyed()

Nachdem das Vue-Instanzobjekt zerstört wurde|

destroyed() {
    console.group("---销毁之后destroyed---")
    console.log('%c%s', 'color: red', 'el:' + this.$el, this.$el.innerHTML)},

Zusammenfassung

vue2-Lebenszyklus ist der obige 8-Prozess Die Ergebnisse oben. :

Vom Öffnen der Seite bis zum Abschluss wurden insgesamt vier Lebenszyklen durchlaufen. Da auf der Seite keine anderen Vorgänge vorhanden sind, werden die verbleibenden vier Lebenszyklen nicht entsprechend angezeigt Empfehlungen:

Javascript-Video-Tutorial

, vue.js-Tutorial】

Das obige ist der detaillierte Inhalt vonDetaillierte Erläuterung des Lebenszyklus von Vue-Instanzen von der Erstellung bis zur Zerstörung. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!