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' }, }
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 verwendetbeforeCreate() {
console.group("---创建前beforeCreate---")
console.log('%c%s', 'color: red', 'el:' + this.$el)
console.log('%c%s', 'color: red', 'data:' + this.$data)
},
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) },
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) },
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) },
Wird aufgerufen, wenn die Antwortdaten aktualisiert werden.
beforeUpdate() { console.group("---更新之前beforeUpdate---") console.log('%c%s', 'color: red', 'el:' + this.$el, this.$el.innerHTML) },
updated() { console.group("---更新之后updated---") console.log('%c%s', 'color: red', 'el:' + this.$el, this.$el.innerHTML) },
7. Bevor die Instanz zerstört wird – beforeDestroy()
beforeDestroy() { console.group("---销毁之前beforeDestroy---") console.log('%c%s', 'color: red', 'el:' + this.$el, this.$el.innerHTML)},
destroyed() { console.group("---销毁之后destroyed---") console.log('%c%s', 'color: red', 'el:' + this.$el, this.$el.innerHTML)},
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:
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!