Vue2-Lebenszykluslernen
1. Der Lebenszyklus von Vue
Der Lebenszyklus in Vue bezieht sich auf eine Reihe von Hook-Funktionen, die während des gesamten Prozesses einer Komponente von der Erstellung bis zur Zerstörung ausgelöst werden.
Zweitens der Lebenszyklus in Vue2
Lifecycle-Hooks in Vue2 sind spezifische Funktionen, die in verschiedenen Phasen einer Komponente ausgeführt werden. Diese Hook-Funktionen ermöglichen es Entwicklern, benutzerdefinierte Logik in verschiedenen Lebenszyklusphasen von Komponenten auszuführen.
Die Lebenszyklus-Hook-Funktion in Vue2 kann in der Reihenfolge ihrer Ausführung in 8 Phasen unterteilt werden:
-
beforeCreate: Wird nach der Instanzinitialisierung und vor der Datenbeobachtung und Ereigniskonfiguration aufgerufen. Zu diesem Zeitpunkt sind die Daten und Methoden der Komponente noch nicht initialisiert und auf die Eigenschaften und Methoden der Komponenteninstanz kann nicht zugegriffen werden.
-
erstellt: Wird aufgerufen, nachdem die Instanz erstellt wurde. Zu diesem Zeitpunkt wurden die Daten und Methoden der Komponente initialisiert und auf die Eigenschaften und Methoden der Komponenteninstanz kann zugegriffen werden. Zu diesem Zeitpunkt wurde die Komponente jedoch noch nicht im DOM gemountet.
-
beforeMount: Wird aufgerufen, bevor die Komponente im DOM bereitgestellt wird. Zu diesem Zeitpunkt hat die Komponente die Kompilierung der Vorlage abgeschlossen, die Vorlage der Komponente wurde jedoch noch nicht in das echte DOM gerendert.
-
mount: Wird aufgerufen, nachdem die Komponente im DOM gemountet wurde. Zu diesem Zeitpunkt wurde die Vorlage der Komponente in das echte DOM gerendert und es kann auf DOM-Operationen und DOM-Elemente zugegriffen werden.
-
beforeUpdate: Wird aufgerufen, bevor die Komponente aktualisiert wird. Zu diesem Zeitpunkt haben sich die Daten der Komponente geändert, das DOM wurde jedoch nicht aktualisiert. In dieser Phase können Datenänderungen und -manipulationen durchgeführt werden.
-
aktualisiert: Wird aufgerufen, nachdem die Komponente aktualisiert wurde. Zu diesem Zeitpunkt wurden die Daten der Komponente aktualisiert und das DOM wurde aktualisiert. Ermöglicht DOM-Manipulation und Zugriff auf DOM-Elemente.
-
beforeDestroy: Wird aufgerufen, bevor die Komponente zerstört wird. Zu diesem Zeitpunkt ist die Komponenteninstanz noch verfügbar und es können einige Aufräumarbeiten durchgeführt werden, z. B. das Löschen von Timern, das Abbestellen von Abonnements usw.
-
zerstört: Wird aufgerufen, nachdem die Komponente zerstört wurde. Zu diesem Zeitpunkt wurde die Komponenteninstanz zerstört und auf die Eigenschaften und Methoden der Komponenteninstanz kann nicht mehr zugegriffen werden.
Zusätzlich zu diesen häufig verwendeten Lebenszyklus-Hook-Funktionen bietet Vue2 auch einige andere Hook-Funktionen, z. B. aktiviert und deaktiviert, die zum Verwalten des Cache-Wechsels und des Aktivierungsstatus von Komponenten in Keep-Alive-Komponenten verwendet werden.
Durch das Schreiben von Logik in diese Lebenszyklus-Hook-Funktionen können Entwickler benutzerdefinierte Vorgänge in verschiedenen Phasen der Komponente ausführen, z. B. Daten initialisieren, Anforderungen senden, Ereignisse abonnieren, DOM bearbeiten usw. Die Verwendung dieser Lifecycle-Hook-Funktionen kann Entwicklern dabei helfen, das Verhalten und die Interaktion von Komponenten besser zu steuern.
1、beforeCreate
In Vue2 ist beforeCreate eine Lifecycle-Hook-Funktion, die beim Erstellen der Instanz aufgerufen wird. Zu diesem Zeitpunkt wurden die Datenbeobachtungs- und Ereignismechanismen der Instanz noch nicht initialisiert, sodass in beforeCreate nicht auf Instanzattribute und -methoden wie Daten, Berechnungen und Methoden zugegriffen werden kann.
Das Folgende ist ein Fall, um die Verwendung von beforeCreate zu veranschaulichen:
<template>
<div>
<h1>{
{
message }}</h1>
</div>
</template>
<script>
export default {
beforeCreate() {
console.log("beforeCreate hook");
this.message = "Hello Vue!";
},
created() {
console.log("created hook");
},
data() {
return {
message: ""
};
}
};
</script>
<style scoped>
h1 {
color: blue;
}
</style>
Im obigen Code definieren wir eine Vue-Komponente, die die Hook-Funktion beforeCreate verwendet. In beforeCreate drucken wir eine Nachricht und weisen der Nachrichteneigenschaft einen Wert zu. Verwenden Sie dann das Nachrichtenattribut in der Vorlage, um den Text anzuzeigen.
Wenn wir diese Komponente ausführen, gibt die Konsole „beforeCreate Hook“ aus und dann wird „Hello Vue!“ auf der Seite angezeigt.
Code erklären:
-
In der Hook-Funktion beforeCreate können wir einige Initialisierungsvorgänge ausführen, aber zu diesem Zeitpunkt wurden die Daten und Methoden der Instanz noch nicht initialisiert, sodass auf Attribute und Methoden wie Daten, Berechnungen und Methoden nicht zugegriffen werden kann.
-
In der erstellten Hook-Funktion wurden die Daten und Methoden der Instanz initialisiert und es kann auf Attribute und Methoden wie Daten, Berechnungen und Methoden zugegriffen werden.
Es ist zu beachten, dass die Hook-Funktion beforeCreate aufgerufen wird, bevor die Instanz erstellt wird, sodass auf die DOM-Elemente der Instanz zu diesem Zeitpunkt nicht zugegriffen werden kann. Wenn Sie DOM-Elemente manipulieren müssen, können Sie dies in der Mount-Hook-Funktion tun.
2. erstellte Funktion
In Vue2 ist „created“ eine Lifecycle-Hook-Funktion, die aufgerufen wird, nachdem die Instanz erstellt wurde. Zu diesem Zeitpunkt wurden die Datenbeobachtungs- und Ereignismechanismen der Instanz initialisiert und es kann auf Instanzattribute und -methoden wie Daten, Berechnungen und Methoden zugegriffen werden.
Das Folgende ist ein Fall, um die Verwendung von erstellt zu veranschaulichen:
<template>
<div>
<h1>{
{
message }}</h1>
</div>
</template>
<script>
export default {
created() {
console.log("created hook");
this.message = "Hello Vue!";
},
data() {
return {
message: ""
};
}
};
</script>
<style scoped>
h1 {
color: blue;
}
</style>
Im obigen Code definieren wir eine Vue-Komponente, die die erstellte Hook-Funktion verwendet. Beim Erstellen drucken wir eine Nachricht aus und weisen der Nachrichteneigenschaft einen Wert zu. Verwenden Sie dann das Nachrichtenattribut in der Vorlage, um den Text anzuzeigen.
Wenn wir diese Komponente ausführen, gibt die Konsole „Hook erstellt“ aus und dann wird „Hallo Vue!“ auf der Seite angezeigt.
Code erklären:
- In der erstellten Hook-Funktion wurden die Daten und Methoden der Instanz initialisiert und es kann auf Attribute und Methoden wie Daten, Berechnungen und Methoden zugegriffen werden.
- In der erstellten Hook-Funktion können wir einige Initialisierungsvorgänge ausführen, z. B. das Senden von Netzwerkanforderungen, das Abonnieren von Ereignissen usw.
- In der erstellten Hook-Funktion können wir die Eigenschaften der Instanz ändern und bedienen, beispielsweise der Nachrichteneigenschaft Werte zuweisen.
Es ist zu beachten, dass die erstellte Hook-Funktion aufgerufen wird, nachdem die Instanz erstellt wurde, sodass in dieser Phase auf die DOM-Elemente der Instanz zugegriffen werden kann. Wenn Sie DOM-Elemente manipulieren müssen, können Sie dies in der Mount-Hook-Funktion tun.
3、beforeMount
In Vue2 ist beforeMount eine Lifecycle-Hook-Funktion, die aufgerufen wird, bevor die Instanz im DOM gemountet wird. Zu diesem Zeitpunkt wurde die Vorlage kompiliert, aber die Instanz wurde noch nicht im DOM gemountet.
Hier ist ein Fall, um die Verwendung von beforeMount zu veranschaulichen:
<template>
<div>
<h1>{
{
message }}</h1>
</div>
</template>
<script>
export default {
beforeMount() {
console.log("beforeMount hook");
this.message = "Hello Vue!";
},
mounted() {
console.log("mounted hook");
},
data() {
return {
message: ""
};
}
};
</script>
<style scoped>
h1 {
color: blue;
}
</style>
Im obigen Code definieren wir eine Vue-Komponente, die die Hook-Funktion beforeMount verwendet. In beforeMount drucken wir eine Nachricht und weisen der Nachrichteneigenschaft einen Wert zu. Verwenden Sie dann das Nachrichtenattribut in der Vorlage, um den Text anzuzeigen.
Wenn wir diese Komponente ausführen, gibt die Konsole „beforeMount Hook“ aus und dann wird „Hello Vue!“ auf der Seite angezeigt.
Code erklären:
- In der Hook-Funktion beforeMount wurde die Vorlage kompiliert, aber die Instanz wurde nicht im DOM gemountet, sodass auf die DOM-Elemente der Instanz nicht zugegriffen werden kann.
- In der Hook-Funktion beforeMount können wir die Eigenschaften der Instanz ändern und bedienen, z. B. der Nachrichteneigenschaft Werte zuweisen.
- In der Mounted-Hook-Funktion wurde die Instanz im DOM gemountet und auf die DOM-Elemente der Instanz kann zugegriffen werden.
Es ist zu beachten, dass die Hook-Funktion beforeMount aufgerufen wird, bevor die Instanz im DOM gemountet wird, sodass auf die DOM-Elemente der Instanz zu diesem Zeitpunkt nicht zugegriffen werden kann. Wenn Sie DOM-Elemente manipulieren müssen, können Sie dies in der Mount-Hook-Funktion tun.
4、montiert
In Vue2 ist mount eine Lebenszyklus-Hook-Funktion, die aufgerufen wird, nachdem die Instanz im DOM gemountet wurde. Zu diesem Zeitpunkt wurde die Instanz im DOM gemountet und auf die DOM-Elemente der Instanz kann zugegriffen werden.
Das Folgende ist ein Fall, um die Verwendung von „mounted“ zu veranschaulichen:
<template>
<div>
<h1>{
{
message }}</h1>
</div>
</template>
<script>
export default {
mounted() {
console.log("mounted hook");
this.message = "Hello Vue!";
},
data() {
return {
message: ""
};
}
};
</script>
<style scoped>
h1 {
color: blue;
}
</style>
Im obigen Code definieren wir eine Vue-Komponente, die die Mount-Hook-Funktion verwendet. Im gemounteten Zustand drucken wir eine Nachricht und weisen der Nachrichteneigenschaft einen Wert zu. Verwenden Sie dann das Nachrichtenattribut in der Vorlage, um den Text anzuzeigen.
Wenn wir diese Komponente ausführen, gibt die Konsole „montierter Hook“ aus und dann wird „Hallo Vue!“ auf der Seite angezeigt.
Code erklären:
- In der Mounted-Hook-Funktion wurde die Instanz im DOM gemountet und auf die DOM-Elemente der Instanz kann zugegriffen werden.
- In der Funktion „Mounted Hook“ können wir einige Vorgänge ausführen, die zum Bearbeiten von DOM-Elementen erforderlich sind, z. B. das Ermitteln der Größe von DOM-Elementen, das Binden von Ereignissen usw.
- In der montierten Hook-Funktion können wir die Eigenschaften der Instanz ändern und bedienen, z. B. der Nachrichteneigenschaft Werte zuweisen.
Es ist zu beachten, dass die Mount-Hook-Funktion aufgerufen wird, nachdem die Instanz im DOM gemountet wurde, sodass in dieser Phase auf die DOM-Elemente der Instanz zugegriffen werden kann. Wenn Sie einige Vorgänge ausführen müssen, bevor die Instanz im DOM bereitgestellt wird, können Sie die Hook-Funktion beforeMount verwenden.
5、vorUpdate
In Vue2 ist beforeUpdate eine Lifecycle-Hook-Funktion, die aufgerufen wird, bevor Daten aktualisiert werden. Zu diesem Zeitpunkt haben sich die Daten der Instanz geändert, das DOM wurde jedoch nicht aktualisiert.
Das Folgende ist ein Fall, um die Verwendung von beforeUpdate zu veranschaulichen:
<template>
<div>
<h1>{
{
message }}</h1>
<button @click="updateMessage">Update Message</button>
</div>
</template>
<script>
export default {
data() {
return {
message: "Hello Vue!"
};
},
beforeUpdate() {
console.log("beforeUpdate hook");
},
methods: {
updateMessage() {
this.message = "Updated Message";
}
}
};
</script>
<style scoped>
h1 {
color: blue;
}
</style>
Im obigen Code definieren wir eine Vue-Komponente, die die Hook-Funktion beforeUpdate verwendet. In beforeUpdate drucken wir eine Nachricht. Wir definieren auch eine Schaltfläche, die den Wert der Nachricht aktualisiert, wenn auf die Schaltfläche geklickt wird.
Wenn wir diese Komponente ausführen und auf die Schaltfläche klicken, gibt die Konsole „beforeUpdate Hook“ aus und dann wird „Updated Message“ auf der Seite angezeigt.
Code erklären:
- In der Hook-Funktion beforeUpdate haben sich die Daten der Instanz geändert, das DOM wurde jedoch nicht aktualisiert.
- In der Hook-Funktion beforeUpdate können wir einige Vorgänge ausführen, die vor der Aktualisierung der Daten ausgeführt werden müssen, z. B. das Senden von Netzwerkanforderungen, das Aktualisieren anderer Daten usw.
Es ist zu beachten, dass die Hook-Funktion beforeUpdate aufgerufen wird, bevor die Daten aktualisiert werden, sodass auf das aktualisierte DOM zu diesem Zeitpunkt nicht zugegriffen werden kann. Wenn Sie nach der Datenaktualisierung einige Vorgänge ausführen müssen, können Sie die aktualisierte Hook-Funktion verwenden.
6、aktualisiert
In Vue2 ist „Updated“ eine Lebenszyklus-Hook-Funktion, die aufgerufen wird, nachdem die Daten aktualisiert wurden. Zu diesem Zeitpunkt haben sich die Daten der Instanz geändert und das DOM wurde aktualisiert.
Hier ist ein Beispiel, um die Verwendung von aktualisiert zu veranschaulichen:
<template>
<div>
<h1>{
{
message }}</h1>
<button @click="updateMessage">Update Message</button>
</div>
</template>
<script>
export default {
data() {
return {
message: "Hello Vue!"
};
},
updated() {
console.log("updated hook");
},
methods: {
updateMessage() {
this.message = "Updated Message";
}
}
};
</script>
<style scoped>
h1 {
color: blue;
}
</style>
Im obigen Code definieren wir eine Vue-Komponente, die die aktualisierte Hook-Funktion verwendet. In aktualisiert drucken wir eine Nachricht. Wir definieren auch eine Schaltfläche, die den Wert der Nachricht aktualisiert, wenn auf die Schaltfläche geklickt wird.
Wenn wir diese Komponente ausführen und auf die Schaltfläche klicken, wird die „Aktualisierte Nachricht“ auf der Seite angezeigt und die Konsole gibt „aktualisierter Hook“ aus.
Code erklären:
- In der aktualisierten Hook-Funktion haben sich die Daten der Instanz geändert und auch das DOM wurde aktualisiert.
- In der aktualisierten Hook-Funktion können wir einige Vorgänge ausführen, die nach der Aktualisierung der Daten ausgeführt werden müssen, z. B. die Bedienung der aktualisierten DOM-Elemente, die Ausführung zusätzlicher Logik usw.
Es ist zu beachten, dass die aktualisierte Hook-Funktion aufgerufen wird, nachdem die Daten aktualisiert wurden, sodass in dieser Phase auf das aktualisierte DOM zugegriffen werden kann. Wenn Sie einige Vorgänge ausführen müssen, bevor die Daten aktualisiert werden, können Sie die Hook-Funktion beforeUpdate verwenden.
7、beforeDestroy
In Vue2 ist beforeDestroy eine Lifecycle-Hook-Funktion, die aufgerufen wird, bevor die Instanz zerstört wird. Zu diesem Zeitpunkt ist die Instanz noch vollständig verfügbar und auf ihre Eigenschaften und Methoden kann zugegriffen werden.
Hier ist ein Fall, um die Verwendung von beforeDestroy zu veranschaulichen:
<template>
<div>
<h1>{
{
message }}</h1>
<button @click="destroyComponent">Destroy Component</button>
</div>
</template>
<script>
export default {
data() {
return {
message: "Hello Vue!"
};
},
beforeDestroy() {
console.log("beforeDestroy hook");
},
methods: {
destroyComponent() {
this.$destroy();
}
}
};
</script>
<style scoped>
h1 {
color: blue;
}
</style>
Im obigen Code definieren wir eine Vue-Komponente, die die Hook-Funktion beforeDestroy verwendet. In beforeDestroy geben wir eine Nachricht aus. Wir definieren auch eine Schaltfläche, die beim Klicken die Komponente zerstört.
Wenn wir diese Komponente ausführen und auf die Schaltfläche klicken, gibt die Konsole „beforeDestroy Hook“ aus und dann wird die Komponente zerstört.
Code erklären:
- In der Hook-Funktion beforeDestroy ist die Instanz weiterhin vollständig verfügbar und auf die Eigenschaften und Methoden der Instanz kann zugegriffen werden.
- In der Hook-Funktion beforeDestroy können wir einige Vorgänge ausführen, die vor der Zerstörung der Instanz ausgeführt werden müssen, z. B. das Löschen des Timers, das Abbestellen usw.
Es ist zu beachten, dass die Hook-Funktion beforeDestroy aufgerufen wird, bevor die Instanz zerstört wird, sodass die Instanz zu diesem Zeitpunkt noch verfügbar ist. Wenn Sie nach der Zerstörung der Instanz einige Vorgänge ausführen müssen, können Sie die Hook-Funktion „Zerstört“ verwenden.
8、zerstört
In Vue2 ist destroy eine Lifecycle-Hook-Funktion, die aufgerufen wird, nachdem die Instanz zerstört wurde. Zu diesem Zeitpunkt ist die Instanz vollständig zerstört und auf die Eigenschaften und Methoden der Instanz kann nicht mehr zugegriffen werden.
Hier ist ein Fall, um die Verwendung von destroy zu veranschaulichen:
<template>
<div>
<h1>{
{
message }}</h1>
<button @click="destroyComponent">Destroy Component</button>
</div>
</template>
<script>
export default {
data() {
return {
message: "Hello Vue!"
};
},
destroyed() {
console.log("destroyed hook");
},
methods: {
destroyComponent() {
this.$destroy();
}
}
};
</script>
<style scoped>
h1 {
color: blue;
}
</style>
Im obigen Code definieren wir eine Vue-Komponente, die die zerstörte Hook-Funktion verwendet. In zerstört drucken wir eine Nachricht. Wir definieren auch eine Schaltfläche, die beim Klicken die Komponente zerstört.
Wenn wir diese Komponente ausführen und auf die Schaltfläche klicken, wird die Komponente zerstört und die Konsole gibt „destroyed Hook“ aus.
Code erklären:
- In der zerstörten Hook-Funktion wurde die Instanz vollständig zerstört und auf die Eigenschaften und Methoden der Instanz kann nicht mehr zugegriffen werden.
- In der zerstörten Hook-Funktion können wir einige Vorgänge ausführen, die nach der Zerstörung der Instanz ausgeführt werden müssen, z. B. das Löschen des globalen Ereignis-Listeners, das Freigeben von Ressourcen usw.
Es ist zu beachten, dass die zerstörte Hook-Funktion aufgerufen wird, nachdem die Instanz zerstört wurde, sodass auf die Eigenschaften und Methoden der Instanz zu diesem Zeitpunkt nicht zugegriffen werden kann. Wenn Sie einige Vorgänge ausführen müssen, bevor die Instanz zerstört wird, können Sie die Hook-Funktion beforeDestroy verwenden.
3. Der Lebenszyklus in vue3
Der Lebenszyklus von Vue 3 hat sich im Vergleich zu Vue 2 geändert, hauptsächlich um die Composition API besser zu unterstützen. Das Folgende ist der Lebenszyklus von Vue 3:
-
setup: Wird aufgerufen, bevor die Komponente instanziiert wird. In dieser Phase kann die Initialisierung von Komponenten durchgeführt werden, einschließlich der Einstellung reaktionsfähiger Daten, der Definition berechneter Eigenschaften, der Definition von Methoden usw.
-
beforeCreate: Wird aufgerufen, bevor die Komponenteninstanz erstellt wird. In dieser Phase können einige Initialisierungsarbeiten durchgeführt werden, auf reaktive Daten und Komponenteninstanzen kann jedoch nicht zugegriffen werden.
-
erstellt: Wird unmittelbar nach der Erstellung der Komponenteninstanz aufgerufen. In dieser Phase können Sie auf reaktionsfähige Daten und Komponenteninstanzen zugreifen und einige Dateninitialisierungsvorgänge durchführen.
-
beforeMount: Wird aufgerufen, bevor die Komponentenmontage beginnt. Zu diesem Zeitpunkt wurde die Vorlage kompiliert, aber noch nicht auf der Seite bereitgestellt.
-
mount: Wird aufgerufen, nachdem die Komponente gemountet wurde. Zu diesem Zeitpunkt wurde die Komponente auf der Seite bereitgestellt und kann DOM-Operationen ausführen.
-
beforeUpdate: Wird aufgerufen, bevor die Komponente aktualisiert wird. In dieser Phase können einige Datenänderungsvorgänge durchgeführt werden.
-
aktualisiert: Wird aufgerufen, nachdem die Komponente aktualisiert wurde. In dieser Phase können DOM-abhängige Vorgänge ausgeführt werden.
-
beforeUnmount: Wird aufgerufen, bevor die Komponente ausgehängt wird. Zu diesem Zeitpunkt sind die Komponenten noch verwendbar und es können einige Aufräumarbeiten durchgeführt werden.
-
unmounted: Wird aufgerufen, nachdem die Bereitstellung der Komponente aufgehoben wurde. Zu diesem Zeitpunkt wurden die Anweisungen und Ereignis-Listener der Komponente entfernt und die Komponenteninstanz wird zerstört.
Durch diese Lifecycle-Hook-Funktionen können wir entsprechende Vorgänge in verschiedenen Phasen ausführen, z. B. die Initialisierung von Komponenten in der Setup-Phase, DOM-Operationen in der gemounteten Phase und die Ressourcenbereinigung in der beforeUnmount-Phase. Gleichzeitig führt Vue 3 auch eine flexiblere Kompositions-API ein, mit der die Komponentenlogik besser organisiert und wiederverwendet werden kann.
1、beforeMount
In Vue3 beforeMounthandelt es sich um eine optionale API-Lebenszyklusfunktion, die vor dem Start der Bereitstellung aufgerufen wird. In beforeMountder Phase ist die Vorlagenkompilierung abgeschlossen, aber die Vorlage wurde noch nicht im DOM gerendert.
Das Folgende ist ein Anwendungsfall beforeMount, beforeMountder zeigt, wie man es durch Ändern des Stils von DOM-Elementen verwendet:
<template>
<div>
<p ref="message">{
{
message }}</p>
</div>
</template>
<script setup>
import {
onBeforeMount, ref } from 'vue';
const message = ref('Hello, Vue3!');
onBeforeMount(() => {
console.log('beforeMount hook');
const messageElement = document.querySelector('#message');
messageElement.style.color = 'red';
});
</script>
<style scoped>
/* 样式 */
</style>
Im obigen Code haben wir zuerst die onBeforeMountSummenfunktion importiert ref. Dann onBeforeMountgeben wir in der Funktion eine Nachricht aus, document.querySelectorerhalten <p>über eine Methode einen Verweis auf das Element und ändern seinen Stil so, dass er rot ist.
Wenn die Komponentenmontage beginnt, beforeMountwird die Funktion aufgerufen, die Konsole gibt „beforeMount Hook“ aus und <p>die Textfarbe des Elements ändert sich in Rot.
Es ist zu beachten, dass beforeMountin der Funktion auf die Daten und Methoden der Komponenteninstanz zugegriffen werden kann, da die Komponenteninstanz zu diesem Zeitpunkt erstellt wurde. Gleichzeitig beforeMountkönnen DOM-Elemente direkt in der Funktion manipuliert werden. Es wird jedoch empfohlen, die reaktionsfähigen Daten von Vue zum Verwalten des DOM-Status zu verwenden, um die Funktionen von Vue besser nutzen zu können.
Zusammenfassung: beforeMountDie Funktion wird aufgerufen, bevor der Mount beginnt, und kann verwendet werden, um einige Vorgänge vor dem DOM-Rendering auszuführen, z. B. das Ändern des Stils von DOM-Elementen, das Hinzufügen von Ereignis-Listenern usw.
2、montiert
In Vue3 mountedhandelt es sich um eine optionale API-Lebenszyklusfunktion, die aufgerufen wird, nachdem die Komponente im DOM gemountet wurde. In mountedder Phase wurde die Komponente in das DOM gerendert, DOM-Manipulation und Zugriff auf DOM-Elemente können durchgeführt werden.
Das Folgende ist ein Anwendungsfall mounted, mountedder zeigt, wie man es durch Hinzufügen eines Ereignis-Listeners verwendet:
<template>
<div>
<button ref="button">Click me</button>
</div>
</template>
<script setup>
import {
onMounted, ref } from 'vue';
onMounted(() => {
console.log('mounted hook');
const buttonElement = document.querySelector('#button');
buttonElement.addEventListener('click', handleClick);
});
function handleClick() {
console.log('Button clicked');
}
</script>
<style scoped>
/* 样式 */
</style>
Im obigen Code verwenden wir onMountedeine Funktion, um eine Rückruffunktion zu registrieren, die aufgerufen wird, nachdem die Komponente im DOM bereitgestellt wurde. In der Rückruffunktion geben wir eine Nachricht aus, document.querySelectorerhalten <button>über die Methode einen Verweis auf das Element und fügen einen Listener für das Klickereignis hinzu.
Wenn die Komponente im DOM gemountet wird, mountedwird die Funktion aufgerufen und die Konsole gibt „montierter Hook“ aus. Gleichzeitig gibt die Konsole beim Klicken auf die Schaltfläche „Schaltfläche angeklickt“ aus.
Es ist zu beachten, dass mountedin der Funktion auf die Daten und Methoden der Komponenteninstanz zugegriffen werden kann, da die Komponente zu diesem Zeitpunkt im DOM gerendert wurde. Gleichzeitig mountedkönnen in der Funktion einige Vorgänge ausgeführt werden, die auf DOM-Elemente zugreifen müssen, z. B. das Hinzufügen von Ereignis-Listenern, das Initialisieren von Bibliotheken von Drittanbietern usw.
Zusammenfassung: mountedDie Funktion wird aufgerufen, nachdem die Komponente im DOM gemountet wurde, und kann zum Ausführen einiger Vorgänge verwendet werden, die Zugriff auf DOM-Elemente erfordern, z. B. das Hinzufügen von Ereignis-Listenern, das Initialisieren von Bibliotheken von Drittanbietern usw.
3. Vor dem Update
In Vue3 beforeUpdatehandelt es sich um eine optionale API-Lebenszyklusfunktion, die aufgerufen wird, bevor die Komponente aktualisiert wird. In beforeUpdateder Phase haben sich die Daten der Komponente geändert, aber das DOM wurde nicht aktualisiert.
Das Folgende ist ein Anwendungsfall beforeUpdate, beforeUpdateder zeigt, wie man es durch Drucken der Daten vor und nach dem Update verwendet:
<template>
<div>
<p>{
{
message }}</p>
<button @click="updateMessage">Update Message</button>
</div>
</template>
<script setup>
import {
onBeforeUpdate, ref } from 'vue';
const message = ref('Hello, Vue3!');
onBeforeUpdate(() => {
console.log('beforeUpdate hook');
console.log('Previous message:', message.value);
});
function updateMessage() {
message.value = 'Updated message';
}
</script>
<style scoped>
/* 样式 */
</style>
Im obigen Code verwenden wir beforeUpdatedie Funktion, um eine Rückruffunktion zu registrieren, die aufgerufen wird, bevor die Komponente aktualisiert wird. In der Callback-Funktion drucken wir eine Nachricht aus und geben messageden Wert vor der Aktualisierung aus.
In der Vorlage zeigen wir den Wert von an und stellen eine Schaltfläche bereit, die eine Funktion messageaufruft, um den Wert zu aktualisieren, wenn auf die Schaltfläche geklickt wird.updateMessagemessage
Wenn Sie auf die Schaltfläche klicken, updateMessagewird die Funktion aufgerufen und messageder Wert von geändert. Anschließend beforeUpdatewird die Funktion aufgerufen und die Konsole gibt „beforeUpdate Hook“ und „Previous message: Hello, Vue3!“ aus, die messageWerte vor dem Update.
Es ist zu beachten, dass beforeUpdatein der Funktion auf die Daten und Methoden der Komponenteninstanz zugegriffen werden kann, da sich die Daten der Komponente zu diesem Zeitpunkt geändert haben. Gleichzeitig beforeUpdatekönnen in der Funktion einige Vorgänge vor der Komponentenaktualisierung ausgeführt werden, z. B. das Abrufen der Daten vor der Aktualisierung, einige vorbereitende Arbeiten usw.
Zusammenfassung: beforeUpdateDie Funktion wird vor der Aktualisierung der Komponente aufgerufen und kann zum Ausführen einiger Vorgänge vor der Aktualisierung der Komponente verwendet werden, z. B. zum Abrufen der Daten vor der Aktualisierung, zur Durchführung einiger Vorbereitungsarbeiten usw.
4、 aktualisiert
In Vue3 updatedhandelt es sich um eine Lebenszyklusfunktion einer optionalen API, die nach Abschluss der Komponentenaktualisierung aufgerufen wird. In der updatedPhase haben sich die Daten der Komponente geändert und das DOM wurde aktualisiert.
Das Folgende ist ein Anwendungsfall updated, updatedder zeigt, wie man es durch Drucken der aktualisierten Daten verwendet:
<template>
<div>
<p>{
{
message }}</p>
<button @click="updateMessage">Update Message</button>
</div>
</template>
<script setup>
import {
onUpdated, ref } from 'vue';
const message = ref('Hello, Vue3!');
onUpdated(() => {
console.log('updated hook');
console.log('Updated message:', message.value);
});
function updateMessage() {
message.value = 'Updated message';
}
</script>
<style scoped>
/* 样式 */
</style>
Im obigen Code verwenden wir onUpdatedeine Funktion, um eine Rückruffunktion zu registrieren, die nach Abschluss der Komponentenaktualisierung aufgerufen wird. In der Callback-Funktion drucken wir eine Nachricht und geben den aktualisierten messageWert aus.
In der Vorlage zeigen wir den Wert von an und stellen eine Schaltfläche bereit, die eine Funktion messageaufruft, um den Wert zu aktualisieren, wenn auf die Schaltfläche geklickt wird.updateMessagemessage
Wenn Sie auf die Schaltfläche klicken, updateMessagewird die Funktion aufgerufen und messageder Wert von geändert. Anschließend onUpdatedwird die Funktion aufgerufen und die Konsole gibt „aktualisierter Hook“ und „Aktualisierte Nachricht: Aktualisierte Nachricht“ aus, bei denen es sich um die aktualisierten messageWerte handelt.
Es ist zu beachten, dass onUpdatedin der Funktion auf die Daten und Methoden der Komponenteninstanz zugegriffen werden kann, da sich die Daten der Komponente zu diesem Zeitpunkt geändert haben und auch das DOM aktualisiert wurde. Gleichzeitig onUpdatedkann die Funktion nach Abschluss der Komponentenaktualisierung einige Vorgänge ausführen, z. B. das Abrufen aktualisierter Daten, das Ausführen zusätzlicher Logik usw.
Zusammenfassung: updatedDie Funktion wird nach Abschluss der Komponentenaktualisierung aufgerufen und kann zum Ausführen einiger Vorgänge nach Abschluss der Komponentenaktualisierung verwendet werden, z. B. zum Abrufen aktualisierter Daten, zum Ausführen zusätzlicher Logik usw.
5 、beforeUnmount
In Vue3 ist beforeUnmount eine optionale API-Lebenszyklusfunktion, die aufgerufen wird, bevor die Komponente ausgehängt wird. In der Phase beforeUnmount wird die Komponente aus dem DOM entfernt.
Hier ist ein beforeUnmountAnwendungsbeispiel, beforeUnmountdas zeigt, wie es durch die Durchführung einiger Bereinigungsvorgänge verwendet werden kann:
<template>
<div>
<p>{
{
message }}</p>
<button @click="unmountComponent">Unmount Component</button>
</div>
</template>
<script setup>
import {
onBeforeUnmount, ref } from 'vue';
const message = ref('Hello, Vue3!');
onBeforeUnmount(() => {
console.log('onBeforeUnmount hook');
// 执行一些清理操作
});
function unmountComponent() {
// 卸载组件
}
</script>
<style scoped>
/* 样式 */
</style>
Im obigen Code verwenden wir onBeforeUnmountdie Funktion, um eine Rückruffunktion zu registrieren, die aufgerufen wird, bevor die Komponente ausgehängt wird. In der Rückruffunktion drucken wir eine Nachricht und können einige Bereinigungsvorgänge durchführen, z. B. Abmelden, Timer löschen usw.
In der Vorlage zeigen wir messageden Wert von an und stellen eine Schaltfläche bereit, die beim Klicken eine Funktion zum Unmounten der Komponente aufruft unmountComponent.
Wenn Sie auf die Schaltfläche klicken, unmountComponentwird die Funktion aufgerufen und die Komponente wird ausgehängt. Anschließend onBeforeUnmountwird die Funktion aufgerufen und die Konsole gibt „onBeforeUnmount Hook“ aus, d. h. die Komponente wird gerade ausgehängt.
Es ist zu beachten, dass onBeforeUnmountin der Funktion auf die Daten und Methoden der Komponenteninstanz zugegriffen werden kann, da die Komponente zu diesem Zeitpunkt gerade entladen wird. Gleichzeitig onBeforeUnmountkönnen in der Funktion einige Reinigungsvorgänge durchgeführt werden, bevor die Komponente deinstalliert wird, z. B. Abmelden, Löschen von Timern usw.
Zusammenfassung: onBeforeUnmountDie Funktion wird aufgerufen, bevor die Komponente ausgehängt wird, und kann verwendet werden, um einige Bereinigungsvorgänge durchzuführen, bevor die Komponente ausgehängt wird, z. B. Abmelden, Löschen von Timern usw.
6、unmontiert
In Vue3 unmountedhandelt es sich um eine Lebenszyklusfunktion einer optionalen API, die nach dem Entladen der Komponente aufgerufen wird. In der unmountedPhase wurde die Komponente aus dem DOM entfernt.
Hier ist ein unmountedAnwendungsbeispiel, unmounteddas zeigt, wie es durch die Durchführung einiger Bereinigungsvorgänge verwendet werden kann:
<template>
<div>
<p>{
{
message }}</p>
<button @click="unmountComponent">Unmount Component</button>
</div>
</template>
<script setup>
import {
onUnmounted, ref } from 'vue';
const message = ref('Hello, Vue3!');
onUnmounted(() => {
console.log('unmounted hook');
// 执行一些清理操作
});
function unmountComponent() {
// 卸载组件
}
</script>
<style scoped>
/* 样式 */
</style>
Im obigen Code verwenden wir onUnmountedeine Funktion, um eine Rückruffunktion zu registrieren, die aufgerufen wird, nachdem die Bereitstellung der Komponente aufgehoben wurde. In der Rückruffunktion drucken wir eine Nachricht und können einige Bereinigungsvorgänge durchführen, z. B. Abmelden, Timer löschen usw.
In der Vorlage zeigen wir messageden Wert von an und stellen eine Schaltfläche bereit, die beim Klicken eine Funktion zum Unmounten der Komponente aufruft unmountComponent.
Wenn Sie auf die Schaltfläche klicken, unmountComponentwird die Funktion aufgerufen und die Komponente wird ausgehängt. Anschließend onUnmountedwird die Funktion aufgerufen und die Konsole gibt „unmontierter Hook“ aus, d. h. die Komponente wurde ausgehängt.
Es ist zu beachten, dass onUnmountedin der Funktion auf die Daten und Methoden der Komponenteninstanz zugegriffen werden kann, da die Komponente zu diesem Zeitpunkt deinstalliert wurde. Gleichzeitig onUnmountedkann die Funktion nach der Deinstallation der Komponente einige Reinigungsvorgänge durchführen, z. B. Abmelden, Löschen von Timern usw.
Zusammenfassung: unmountedDie Funktion wird aufgerufen, nachdem die Komponente deinstalliert wurde, und kann verwendet werden, um einige Reinigungsvorgänge nach der Deinstallation der Komponente durchzuführen, z. B. Abmelden, Löschen von Timern usw.