Artikelverzeichnis
1. Schnelles Wissenskonzept:
Wir nennen den Prozess eines Objekts von der Entstehung (neu) bis zur Zerstörung (zerstören), den Lebenszyklus. Die Lebenszyklusfunktion ist eine Funktion, die zu einem bestimmten Zeitpunkt automatisch ausgeführt wird.
Laut offiziellen Worten durchläuft jede Vue-Instanz bei ihrer Erstellung eine Reihe von Initialisierungsprozessen – zum Beispiel muss sie die Datenüberwachung einrichten, Vorlagen kompilieren, die Instanz in das DOM einhängen und das DOM aktualisieren, wenn sich die Daten ändern. etc. Gleichzeitig werden während dieses Prozesses auch einige Funktionen ausgeführt, die als Lebenszyklus-Hooks bezeichnet werden, was den Benutzern die Möglichkeit gibt, ihren eigenen Code in verschiedenen Phasen hinzuzufügen.
Einfach ausgedrückt, jede Vue-Instanz durchläuft bei ihrer Erstellung eine Reihe von Initialisierungsprozessen: Erstellen der Instanz, Laden der Vorlage, Rendern der Vorlage usw. Vue hat Hook-Funktionen (Listener-Funktionen) für jeden Zustand im Lebenszyklus. Immer wenn sich die Vue-Instanz in einem anderen Lebenszyklus befindet, wird der Aufruf der entsprechenden Funktion ausgelöst.
2. Acht Lifecycle-Hook-Funktionen:
| Funktion | Zeit für Anrufe |
|---|---|
| vorErstellen | Wird aufgerufen, bevor die vue-Instanz initialisiert wird |
| erstellt | Wird aufgerufen, nachdem die vue-Instanz initialisiert wurde |
| vorMount | Wird vor dem Einhängen in den DOM-Baum aufgerufen |
| montiert | Wird nach dem Einhängen in den DOM-Baum aufgerufen |
| vorUpdate | Aufruf vor Datenaktualisierung |
| Aktualisiert | Aufruf nach Datenaktualisierung |
| vorZerstören | Wird aufgerufen, bevor die vue-Instanz zerstört wird |
| zerstört | Wird aufgerufen, nachdem die vue-Instanz zerstört wurde |
3. Lernen
Basiscode
Betrachten wir zunächst den grundlegenden Code des Falls wie folgt und verwenden Sie dann die folgenden Codeschritte, um die Lebenszyklusfunktion zu demonstrieren, die von einem Objekt in jeder Phase des Prozesses von der Generierung bis zur Zerstörung ausgeführt wird. Beachten Sie, was die Show-Funktion tut.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<script src="https://unpkg.com/vue/dist/vue.js"></script>
</head>
<body>
<div id="app">
{
{
information}}
</div>
<script type="text/javascript">
//创建vue实例
var vm = new Vue({
el: '#app',
data: {
information: '北极光之夜。'
}
})
// 各个生命周期函数通过调用下面这个函数了解其所处的生命阶段
function show(inf,obj){
console.log(inf);
console.log("------------------------------------------");
console.log('获取vue实例data里的数据:');
console.log(obj.information);
console.log("------------------------------------------");
console.log('挂载的对象，就是DOM：');
console.log(obj.$el);
console.log("------------------------------------------");
console.log('页面上已经挂载的DOM：');
console.log(document.getElementById('app').innerHTML);
}
</script>
1. vor Erstellen:
Zu diesem Zeitpunkt wurde die vue-Instanz gerade im Speicher erstellt, und Daten und Methoden werden zu diesem Zeitpunkt noch nicht initialisiert.
Fügen Sie die Hook-Funktion beforeCreate in dem Fall hinzu:
var vm = new Vue({
el: '#app',
data: {
information: '北极光之夜。'
},
beforeCreate: function(){
// 传入该阶段简介与this，this就是该阶段的vue实例
show('vue实例初始化之前',this);
}
})
2. erstellt:
Zu diesem Zeitpunkt wurde die vue-Instanz im Speicher erstellt, Daten und Methoden können ebenfalls abgerufen werden, aber die Vorlage wurde noch nicht kompiliert.
Fügen Sie die erstellte Hook-Funktion zum Fall hinzu:
var vm = new Vue({
el: '#app',
data: {
information: '北极光之夜。'
},
created: function(){
show('vue实例初始化之后',this);
}
})
3. vor dem Mount:
Diese Phase schließt die Kompilierung der Vorlage ab, sie wurde jedoch noch nicht auf der Seite bereitgestellt.
Fügen Sie dem Fall die Hook-Funktion hinzu:
var vm = new Vue({
el: '#app',
data: {
information: '北极光之夜。'
},
beforeMount: function(){
show('挂载之前',this);
}
})
4.montiert:
In diesem Stadium wird die Vorlage kompiliert und auf der Seite bereitgestellt, und die Seite kann angezeigt werden.
Fügen Sie dem Fall die Hook-Funktion hinzu:
var vm = new Vue({
el: '#app',
data: {
information: '北极光之夜。'
},
mounted: function(){
show('挂载之后',this);
}
})
5. vor Update:
Führen Sie diese Funktion vor der Zustandsübergangsaktualisierung aus. Zu diesem Zeitpunkt wurde der Zustandswert der Daten in den Daten auf den neuesten Stand gebracht, aber die auf der Seite angezeigten Daten sind immer noch die originellsten, und das Rendering des DOM-Baums hat nicht neu gestartet.
Ändern Sie zuerst die Daten in data:
vm.information = '南极光之夜';
Fügen Sie dem Fall die Hook-Funktion hinzu:
var vm = new Vue({
el: '#app',
data: {
information: '北极光之夜。'
},
beforeUpdate: function(){
show('更新之前',this);
}
})
6. aktualisiert:
In diesem Stadium wird diese Funktion ausgeführt, nachdem die Übergangsaktualisierung abgeschlossen ist.Zu diesem Zeitpunkt ist der Statuswert der Daten in den Daten der neueste, und dieauf der Seite angezeigten Daten sind auch die neuesten, und der DOM-Knoten war es neu gerendert.
Fügen Sie dem Fall die Hook-Funktion hinzu:
var vm = new Vue({
el: '#app',
data: {
information: '北极光之夜。'
},
updated: function(){
show('更新之后',this);
}
})
7. vor dem Zerstören:
Die beforeDestroy-Phase ist, bevor die vue-Instanz zerstört wird.Natürlich kann die vue-Instanz in dieser Phase noch verwendet werden.
Zerstöre die Vue-Instanz:
vm.$destroy();
```
在案例中添加钩子函数：
```javascript
var vm = new Vue({
el: '#app',
data: {
information: '北极光之夜。'
},
beforeDestroy: function() {
show('销毁之前',this);
}
})
8. zerstört:
Diese Phase wird aufgerufen, nachdem die vue-Instanz zerstört wurde. An diesem Punkt wird alles, was von allen Instanzen angegeben wird, ungebunden, Ereignis-Listener werden entfernt und untergeordnete Instanzen werden zerstört.
Fügen Sie dem Fall die Hook-Funktion hinzu:
var vm = new Vue({
el: '#app',
data: {
information: '北极光之夜。'
},
destroyed: function() {
show('销毁之后',this);
}
})