Das Leben einer Komponente

Bisher war eine Komponente einfach da: App hat sie gezeigt, und sie ist geblieben. Mit v-if kann eine Komponente aber kommen und gehen. Jede Komponente hat einen Lebenszyklus, die Schritte ihres Lebens, und Vue führt sie durch diese Schritte:

1. Erstellt (created): Vue führt das <script setup> der Komponente aus. Ihre Refs und Funktionen gibt es jetzt, aber auf der Seite ist noch nichts.
2. Eingehängt (mounted): Vue erzeugt die Elemente der Vorlage und setzt sie in die Seite.
3. Aktualisiert (updated): Wenn sich der State der Komponente ändert, aktualisiert Vue ihre Elemente. Das kann oft passieren.
4. Ausgehängt (unmounted): Vue entfernt die Komponente aus der Seite, zum Beispiel wenn das v-if, das sie zeigt, falsch wird. Ihre Elemente und ihr State sind dann weg.

Zu diesen Zeitpunkten kannst du eigenen Code ausführen. Vue hat für jeden eine Funktion, einen Lifecycle-Hook: onMounted(), onUpdated() und onUnmounted(). Du importierst sie aus "vue", rufst sie oben im <script setup> auf und gibst ihnen eine Funktion, die Vue zu diesem Zeitpunkt aufruft. Hier ist ein Zähler für Tassen, der in der Konsole sagt, was mit ihm passiert:

<script setup>
import { onMounted, onUnmounted, onUpdated, ref } from "vue";

const tassen = ref(0);
console.log("Erstellt");

onMounted(() => {
    console.log("Eingehängt");
});

onUpdated(() => {
    console.log("Aktualisiert");
});

onUnmounted(() => {
    console.log("Ausgehängt");
});

function tasseHinzufuegen() {
    tassen.value++;
}
</script>

<template>
    <button @click="tasseHinzufuegen">Tassen: {{ tassen }}</button>
</template>

App zeigt ihn mit <Tassenzaehler v-if="sichtbar" />. Zeige ihn, klicke einmal auf seinen Button und blende ihn wieder aus, dann steht in der Konsole:

Erstellt
Eingehängt
Aktualisiert
Ausgehängt

Erstellt kommt zuerst, und zwar ohne Hook: Der Code oben im <script setup> läuft sofort, wenn Vue die Komponente erstellt. Die Funktionen, die du den Hooks gibst, laufen später, jede zu ihrem Zeitpunkt.

Zeigst du den Zähler wieder, erstellt Vue einen neuen: Die Konsole zeigt noch einmal Erstellt und Eingehängt, und die Tassen beginnen bei 0. Eine ausgehängte Komponente kommt nie zurück, und ihr State verschwindet mit ihr. State, der bleiben soll, gehört in eine Komponente, die auf der Seite bleibt, wie App, die ihn in Props nach unten gibt, wie in der Lektion Ereignisse von Komponenten.

onMounted und onUnmounted brauchst du am häufigsten: In den nächsten Übungen lädst du Daten, wenn eine Komponente eingehängt wird, und stoppst einen Timer, wenn sie ausgehängt wird. onUpdated braucht man selten.

Typische Fehler:

• Den Import vergessen: Die Konsole zeigt ReferenceError: onMounted is not defined.
• Dem Hook einen Aufruf statt einer Funktion geben: onMounted(console.log("Eingehängt")) gibt sofort aus, wenn die Komponente erstellt wird, und beim Einhängen meldet Vue TypeError: hook is not a function. Ein Hook braucht eine Funktion, die Vue später aufrufen kann: onMounted(() => { … }).