Lifecycle Hooks

<script setup>
import {
  onBeforeMount,
  onMounted,
  onBeforeUpdate,
  onUpdated,
  onBeforeUnmount,
  onUnmounted
} from 'vue'

// 1. setup() — läuft jetzt, synchron
console.log('setup: Komponente wird initialisiert')

onBeforeMount(() => {
  console.log('onBeforeMount: DOM wird gleich erstellt')
})

onMounted(() => {
  console.log('onMounted: DOM ist verfügbar! 🎉')
})

onBeforeUpdate(() => {
  console.log('onBeforeUpdate: State hat sich geändert, DOM wird gleich aktualisiert')
})

onUpdated(() => {
  console.log('onUpdated: DOM wurde aktualisiert')
})

onBeforeUnmount(() => {
  console.log('onBeforeUnmount: Komponente wird gleich entfernt')
})

onUnmounted(() => {
  console.log('onUnmounted: Komponente entfernt, Tschüss! 👋')
})
</script>

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

const users = ref([])
const loading = ref(true)
const error = ref(null)

onMounted(async () => {
  try {
    const response = await fetch('/api/users')
    users.value = await response.json()
  } catch (err) {
    error.value = 'Benutzer konnten nicht geladen werden'
    console.error(err)
  } finally {
    loading.value = false
  }
})
</script>

<template>
  <div v-if="loading" class="spinner">Lade Benutzer…</div>
  <div v-else-if="error" class="error">{{ error }}</div>
  <ul v-else>
    <li v-for="user in users" :key="user.id">
      {{ user.name }}
    </li>
  </ul>
</template>

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

const messages = ref([])
const chatContainer = ref(null)

// Nach jedem DOM-Update: ans Ende scrollen
onUpdated(() => {
  if (chatContainer.value) {
    chatContainer.value.scrollTop = chatContainer.value.scrollHeight
  }
})

function addMessage(text) {
  messages.value.push({
    id: Date.now(),
    text,
    time: new Date().toLocaleTimeString('de-DE')
  })
}
</script>

<template>
  <div ref="chatContainer" class="chat-container">
    <div v-for="msg in messages" :key="msg.id" class="message">
      <span class="time">{{ msg.time }}</span>
      <p>{{ msg.text }}</p>
    </div>
  </div>
</template>

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

const currentTime = ref('')
let intervalId = null  // kein ref — wird nicht im Template gebraucht

onMounted(() => {
  // Intervall starten: Uhrzeit jede Sekunde aktualisieren
  intervalId = setInterval(() => {
    currentTime.value = new Date().toLocaleTimeString('de-DE')
  }, 1000)

  // Sofort einmal setzen
  currentTime.value = new Date().toLocaleTimeString('de-DE')
})

onUnmounted(() => {
  // Intervall aufräumen — sonst Memory Leak!
  if (intervalId) {
    clearInterval(intervalId)
    intervalId = null
  }
})
</script>

<template>
  <div class="live-clock">
    🕐 {{ currentTime }}
  </div>
</template>

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

const items = ref(['Eintrag 1', 'Eintrag 2'])
const listRef = ref(null)
let previousScrollHeight = 0

// Vor dem Update: aktuellen Scroll-Zustand merken
onBeforeUpdate(() => {
  if (listRef.value) {
    previousScrollHeight = listRef.value.scrollHeight
  }
})

// Nach dem Update: Scroll-Position anpassen
onUpdated(() => {
  if (listRef.value) {
    const newScrollHeight = listRef.value.scrollHeight
    const heightDiff = newScrollHeight - previousScrollHeight
    listRef.value.scrollTop += heightDiff
  }
})

function addItem() {
  items.value.unshift(`Eintrag ${items.value.length + 1}`)
}
</script>

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

// State
const data = ref(null)
const loading = ref(true)
const error = ref(null)

// Daten laden, sobald die Komponente eingehängt ist
onMounted(async () => {
  try {
    const res = await fetch('https://api.example.com/articles')
    if (!res.ok) throw new Error(`HTTP ${res.status}`)
    data.value = await res.json()
  } catch (err) {
    error.value = err.message
  } finally {
    loading.value = false
  }
})
</script>

<template>
  <div v-if="loading">⏳ Wird geladen…</div>
  <div v-else-if="error" class="text-red-500">
    ❌ Fehler: {{ error }}
  </div>
  <article v-else v-for="article in data" :key="article.id">
    <h2>{{ article.title }}</h2>
    <p>{{ article.excerpt }}</p>
  </article>
</template>

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

const windowWidth = ref(window.innerWidth)

function handleResize() {
  windowWidth.value = window.innerWidth
}

onMounted(() => {
  window.addEventListener('resize', handleResize)
})

onUnmounted(() => {
  window.removeEventListener('resize', handleResize)
})
</script>

<template>
  <p>Fensterbreite: {{ windowWidth }}px</p>
</template>

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

const messages = ref([])
const container = ref(null)
let savedScrollTop = 0
let savedScrollHeight = 0

onBeforeUpdate(() => {
  if (container.value) {
    savedScrollTop = container.value.scrollTop
    savedScrollHeight = container.value.scrollHeight
  }
})

onUpdated(() => {
  if (container.value) {
    // Neue Nachrichten oben eingefügt?
    // → Scroll-Position korrigieren, damit der Inhalt nicht springt
    const heightDiff = container.value.scrollHeight - savedScrollHeight
    container.value.scrollTop = savedScrollTop + heightDiff
  }
})
</script>