Überblick über die Lifecycle-Phasen
Erstellung, Mounting, Aktualisierung, Unmounting — was in jeder Phase geschieht.
Überblick über die Lifecycle-Phasen ist eine kostenlose Vue Academy-Lektion auf CoddyKit. Dies ist Lektion 1 von 4. Du kannst die komplette Lektion unten kostenlos lesen – dann übst du sie direkt im Browser mit einem integrierten Code-Editor und einem KI-Tutor rund um die Uhr. Sie ist Teil des Vue Academy-Lernpfads, und dein Fortschritt wird über Web und CoddyKit-App synchronisiert. Der Vue Academy-Kurs umfasst insgesamt 4 Lektionen.
Eine Komponente durchläuft einen Lebenszyklus
Jede Vue-Komponente durchläuft einen vorhersehbaren Ablauf: Sie wird erstellt, in die Seite eingebunden, bei Datenänderungen aktualisiert und schließlich entfernt. Das sind die Lebenszyklusphasen, und Vue ermöglicht es Ihnen, sich in jede davon einzuklinken.
Die vier Phasen
- Erstellung — setup wird ausgeführt, die Reaktivität wird initialisiert.
- Mounten — das DOM wird erstellt und eingefügt.
- Aktualisierung — reaktive Änderungen lösen erneute Render-Vorgänge aus.
- Unmounten — die Komponente wird entfernt und bereinigt.
Phase 1: Erstellung
Zuerst wird die Komponenteninstanz erstellt und die Reaktivität eingerichtet. In der Composition API wird <script setup> (oder setup()) an dieser Stelle ausgeführt. Das DOM existiert noch nicht, daher können Sie zu diesem Zeitpunkt keine Elemente auslesen.
Was Sie während der Erstellung tun können
Die Erstellung ist ein guter Zeitpunkt, um reaktiven Zustand zu deklarieren und Arbeiten ohne DOM zu starten, etwa einen Datenabruf anzustoßen. Denken Sie daran, dass das Template noch nicht gerendert wurde und Template-Refs daher noch leer sind.
<script setup>
import { ref } from 'vue'
const user = ref(null)
// fetch can start here
</script>Phase 2: Mounten
Als Nächstes erstellt Vue aus Ihrem Template die tatsächlichen DOM-Knoten und fügt sie in die Seite ein. Nach dem Mounten verweisen Template-Refs auf echte Elemente, und Sie können das DOM vermessen oder bearbeiten.
Der Mounting-Hook
Der onMounted-Hook wird einmal ausgeführt, direkt nachdem die Komponente eingefügt wurde. Hier ist der richtige Ort für DOM-abhängige Initialisierung, etwa zum Initialisieren eines Diagramms oder Fokussieren eines Input-Felds.
<script setup>
import { onMounted } from 'vue'
onMounted(() => {
console.log('in the DOM now')
})
</script>Phase 3: Aktualisierung
Wenn sich reaktive Daten ändern, von denen eine Komponente abhängt, rendert Vue sie neu und passt das DOM effizient an — nur die geänderten Teile. Dieser Aktualisierungszyklus kann während der Lebensdauer einer Komponente oft stattfinden.
Die Update-Hooks
onBeforeUpdate wird direkt vor dem Patchen des DOM ausgeführt, und onUpdated direkt danach. Sie werden bei jeder reaktiven Änderung ausgelöst, die das Rendern beeinflusst.
<script setup>
import { onUpdated } from 'vue'
onUpdated(() => {
console.log('DOM patched')
})
</script>Phase 4: Unmounten
Wenn eine Komponente entfernt wird — etwa durch v-if, einen Routenwechsel oder das Entfernen aus einer Liste — baut Vue sie ab. Das ist Ihre Gelegenheit, Timer, Listener und Subscriptions aufzuräumen, um Memory-Leaks zu vermeiden.
Der Unmount-Hook
onUnmounted wird ausgeführt, nachdem die Komponente verschwunden ist. Brechen Sie hier Intervalle ab, entfernen Sie globale Listener und brechen Sie laufende Requests ab.
<script setup>
import { onMounted, onUnmounted } from 'vue'
let id
onMounted(() => { id = setInterval(tick, 1000) })
onUnmounted(() => clearInterval(id))
</script>Die vollständige Reihenfolge
Die Hooks werden im Laufe des Lebens einer Komponente in dieser Reihenfolge ausgeführt: setup, onBeforeMount, onMounted, anschließend wiederholte Paare aus onBeforeUpdate/onUpdated und schließlich onBeforeUnmount/onUnmounted.
Kurzer Test
Überprüfen Sie, ob Sie den Lebenszyklus verstanden haben.
Zusammenfassung
Sie haben jetzt das Gesamtbild vor Augen:
- Erstellung: setup wird ausgeführt, die Reaktivität ist bereit, kein DOM.
- Mounting: Das DOM wird erstellt und eingefügt; Refs werden nutzbar.
- Aktualisierung: Eine reaktive Änderung löst einen effizienten Patch aus.
- Unmounting: Die Komponente wird entfernt; hier führen Sie die Bereinigung durch.
Lerne HTML mit einem KI-Tutor — kostenlos
Schreibe und führe echten Code in deinem Browser aus, bekomme sofortige Hilfe von einem 24/7 KI-Tutor und setze dein Lernen im Web oder in der App fort.
- Kurse
- 42
- Lektionen
- 156
Häufig gestellte Fragen
Ist die Lektion „Überblick über die Lifecycle-Phasen“ kostenlos?
Ja — der vollständige Text von „Überblick über die Lifecycle-Phasen“ ist hier im Web kostenlos zu lesen. Um sie interaktiv zu üben (integrierter Code-Editor und 24/7 KI-Tutor) und den Rest des Vue Academy-Kurses freizuschalten, upgrade auf CoddyKit PRO. Der Vue Academy-Kurs umfasst insgesamt 4 Lektionen.
Was lerne ich in „Überblick über die Lifecycle-Phasen“?
Erstellung, Mounting, Aktualisierung, Unmounting — was in jeder Phase geschieht. Du übst Vue Academy mit praktischem Code, den du direkt im Browser ausführst, und ein 24/7 KI-Tutor beantwortet deine Fragen während du die Lektion bearbeitest.
Brauche ich Erfahrung, um Vue Academy zu starten?
Keine Vorkenntnisse erforderlich. Vue Academy auf CoddyKit ist für Anfänger bis fortgeschrittene Lernende strukturiert, sodass du hier starten oder von Anfang an beginnen und in deinem eigenen Tempo voranschreiten kannst. Dies ist Lektion 1 von 4.
Wie lange dauert die Lektion „Überblick über die Lifecycle-Phasen“?
Die meisten CoddyKit-Lektionen dauern etwa 5–10 Minuten. Jede ist kompakt und interaktiv, sodass du stetig Fortschritte machst und genau dort weitermachst, wo du aufgehört hast – im Web und in der App.
Kann ich in dieser Vue Academy-Lektion Code schreiben und ausführen?
Ja. Jede Vue Academy-Lektion enthält einen integrierten Code-Editor, sodass du echten Code direkt in deinem Browser schreibst und ausführst und sofort KI-Feedback erhältst — ohne lokale Einrichtung erforderlich.
Alle Lektionen in diesem Kurs
- Überblick über die Lifecycle-Phasen
- onMounted und onBeforeMount
- onUpdated und onBeforeUpdate
- onUnmounted und Cleanup-Muster