Kapitel 24: Composition API (Teil 4) - Lebenszyklus-Hooks

📙 Lernziel: Vue 3 Lebenszyklus-Hooks in <script setup> meistern!

---

24.1 Was sind Lebenszyklus-Hooks?

Lebenszyklus-Hooks sind Funktionen, die zu bestimmten Zeitpunkten in der Lebensdauer einer Komponente ausgeführt werden.

Wichtige Lebenszyklus-Phasen:

1. Erstellung - Komponente wird initialisiert
2. Mounting - Komponente wird in DOM eingefügt
3. Aktualisierung - Reaktive Daten ändern sich
4. Unmounting - Komponente wird aus DOM entfernt

---

24.2 onBeforeMount() & onMounted()

onBeforeMount() - Wird ausgeführt, bevor Komponente in DOM eingefügt wird.

onMounted() - Wird ausgeführt, nachdem Komponente in DOM eingefügt wurde.

Beispiel:

<script setup>
import { ref, onBeforeMount, onMounted } from 'vue'

const data = ref(null)
const isLoading = ref(true)

// Wird vor DOM-Einfügung ausgeführt
onBeforeMount(() => {
  console.log('Vor dem Mounten')
})

// Wird nach DOM-Einfügung ausgeführt (API-Aufrufe hier!)
onMounted(async () => {
  console.log('Nach dem Mounten - DOM ist bereit!')
  try {
    const response = await fetch('https://jsonplaceholder.typicode.com/posts/1')
    data.value = await response.json()
  } catch (error) {
    console.error('Fehler:', error)
  } finally {
    isLoading.value = false
  }
})
</script>

<template>
  <div>
    <h2>Lebenszyklus Demo</h2>
    <div v-if="isLoading">Lädt...</div>
    <div v-else-if="data">
      <h3>{{ data.title }}</h3>
      <p>{{ data.body }}</p>
    </div>
    <div v-else>Keine Daten gefunden.</div>
  </div>
</template>

Wichtig:

• ✅ onMounted() ist der beste Ort für API-Aufrufe
• ✅ DOM-Elemente sind in onMounted() verfügbar

---

24.3 onBeforeUpdate() & onUpdated()

onBeforeUpdate() - Wird ausgeführt, bevor reaktive Daten aktualisiert werden.

onUpdated() - Wird ausgeführt, nachdem reaktive Daten aktualisiert wurden.

Beispiel:

<script setup>
import { ref, onBeforeUpdate, onUpdated } from 'vue'

const count = ref(0)

// Wird vor DOM-Aktualisierung ausgeführt
onBeforeUpdate(() => {
  console.log('Vor der Aktualisierung:', count.value)
})

// Wird nach DOM-Aktualisierung ausgeführt
onUpdated(() => {
  console.log('Nach der Aktualisierung:', count.value)
  // Achtung: Unendliche Schleife möglich!
  // Nicht direkt reaktive Daten hier ändern!
})
</script>

<template>
  <div>
    <p>Zähler: {{ count }}</p>
    <button @click="count++">Erhöhen</button>
  </div>
</template>

Warnung:

• ⚠️ Vermeide es, in onUpdated() reaktive Daten zu ändern (kann zu unendlicher Schleife führen)!

---

24.4 onBeforeUnmount() & onUnmounted()

onBeforeUnmount() - Wird ausgeführt, bevor Komponente aus DOM entfernt wird.

onUnmounted() - Wird ausgeführt, nachdem Komponente aus DOM entfernt wurde.

Beispiel:

<script setup>
import { onBeforeUnmount, onUnmounted } from 'vue'

// Timer-ID für Bereinigung
let timerId = null

// Starte Timer
timerId = setInterval(() => {
  console.log('Timer läuft...')
}, 1000)

// Wird vor Entfernung aus DOM ausgeführt
onBeforeUnmount(() => {
  console.log('Vor dem Unmounting - Bereinigung...')
  // Timer bereinigen
  if (timerId) {
    clearInterval(timerId)
    timerId = null
  }
})

// Wird nach Entfernung aus DOM ausgeführt
onUnmounted(() => {
  console.log('Nach dem Unmounting - Komponente entfernt!')
})
</script>

<template>
  <div>
    <h2>Timer-Komponente</h2>
    <p>Schau in die Konsole!</p>
  </div>
</template>

Wichtig:

• ✅ Nutze onBeforeUnmount() oder onUnmounted() für Bereinigung (Timer, Event-Listener, etc.)

---

24.5 Weitere Lebenszyklus-Hooks

onErrorCaptured() - Fängt Fehler in Kind-Komponenten ab.

onActivated() & onDeactivated() - Für <keep-alive> Komponenten.

Beispiel:

<script setup>
import { onErrorCaptured } from 'vue'

// Fehler in Kind-Komponenten abfangen
onErrorCaptured((error, instance, info) => {
  console.error('Fehler abgefangen:', error)
  console.log('Komponente:', instance)
  console.log('Infos:', info)
  
  // Returniere `false`, um Fehler weiterzugeben
  return false
})
</script>

<template>
  <div>
    <h2>Fehlerbehandlung</h2>
    <!-- Kind-Komponente, die einen Fehler wirft -->
    <ErrorProneComponent />
  </div>
</template>

---

24.6 Lebenszyklus-Diagramm (Zusammenfassung)

Vue 3 Lebenszyklus (Composition API):

Setup (Composition API)
         ↓
onBeforeMount()
         ↓
onMounted()
         ↓
[Reaktive Daten ändern sich]
         ↓
onBeforeUpdate()
         ↓
onUpdated()
         ↓
[Eltern-Komponente entfernt Kind]
         ↓
onBeforeUnmount()
         ↓
onUnmounted()

Options API vs Composition API:

Options API	Composition API
beforeCreate	(nicht benötigt)
created	(nicht benötigt)
beforeMount	onBeforeMount()
mounted	onMounted()
beforeUpdate	onBeforeUpdate()
updated	onUpdated()
beforeUnmount	onBeforeUnmount()
unmounted	onUnmounted()

---

24.7 Übung: Lebenszyklus-Hooks praktisch

Aufgabe: Erstelle eine Komponente, die eine Uhrzeit anzeigt und alle Fehler abfängt.

Lösung:

<script setup>
import { ref, onMounted, onUnmounted, onErrorCaptured } from 'vue'

const currentTime = ref(new Date().toLocaleTimeString())
let timerId = null

// Starte Uhr when mounted
onMounted(() => {
  console.log('Uhr gestartet!')
  timerId = setInterval(() => {
    currentTime.value = new Date().toLocaleTimeString()
  }, 1000)
})

// Stoppe Uhr when unmounted
onUnmounted(() => {
  console.log('Uhr gestoppt!')
  if (timerId) {
    clearInterval(timerId)
    timerId = null
  }
})

// Fehler abfangen
onErrorCaptured((error) => {
  console.error('Ein Fehler ist aufgetreten:', error)
  return false // Fehler nicht weitergeben
})
</script>

<template>
  <div class="clock">
    <h2>Aktuelle Uhrzeit</h2>
    <p class="time">{{ currentTime }}</p>
    <p>(Schau in die Konsole, wenn Komponente entfernt wird)</p>
  </div>
</template>

<style scoped>
.clock {
  border: 1px solid #42b883;
  border-radius: 8px;
  padding: 20px;
  text-align: center;
  max-width: 400px;
  margin: 0 auto;
}

.time {
  font-size: 2em;
  font-weight: bold;
  color: #42b883;
}
</style>

---

✅ Zusammenfassung

In diesem Kapitel hast du gelernt:

• ✅ Was Lebenszyklus-Hooks sind
• ✅ onMounted() für API-Aufrufe nutzen
• ✅ onUpdated() für DOM-Aktualisierungen
• ✅ onUnmounted() für Bereinigung (Timer, etc.)
• ✅ Weitere Hooks (onErrorCaptured, etc.)
• ✅ Unterschied zwischen Options API und Composition API
• ✅ Praxis: Uhr-Komponente

🎯 Nächster Schritt: In Kapitel 25 lernst du benutzerdefinierte Composables (Logik wiederverwenden)!

---

← Zurück zu Kapitel 23: computed() & watch()Weiter zu Kapitel 25: Benutzerdefinierte Composables →