Kapitel 42: Vue 3 FAQ & Interviewfragen

📙 Lernziel: Vue 3 Grundlagen für Interviews meistern!

---

42.1 Was ist der Unterschied zwischen Vue 2 und Vue 3?

Wichtige Änderungen:

Merkmal	Vue 2	Vue 3
Reaktivität	Object.defineProperty	Proxy (besser)
API	Options API	Options + Composition API
TypeScript	Schwer	Einfach
v-model	1 pro Komponente	Mehrere möglich
Performance	Gut	Besser

Vorteile Vue 3:

• ✅ Bessere Performance (virtueller DOM)
• ✅ TypeScript-Unterstützung
• ✅ Composition API (Logik-Wiederverwendung)
• ✅ Bessere TypeScript-Integration

---

42.2 Was ist der Unterschied zwischen ref() und reactive()?

ref(): Für primitive Werte (number, string, boolean).

import { ref } from 'vue'

const count = ref(0)
console.log(count.value)  // Zugriff mit .value
count.value++              // Änderung mit .value

reactive(): Für Objekte/Arrays.

import { reactive } from 'vue'

const state = reactive({ count: 0 })
console.log(state.count)  // Direkter Zugriff
state.count++              // Direkte Änderung

Faustregel:

• ✅ Primitive Werte → ref()
• ✅ Objekte/Arrays → reactive()
• ✅ Konsistenz → Immer ref() (einfacher)

---

42.3 Was ist der Unterschied zwischen computed() und watch()?

computed(): Berechnete Eigenschaft (read-only, caching).

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

const count = ref(0)
const doubleCount = computed(() => count.value * 2)
</script>

<template>
  <p>{{ doubleCount }}</p>  <!-- Read-only! -->
</template>

watch(): Überwacht Änderungen (Seiteneffekte).

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

const count = ref(0)

watch(count, (newValue, oldValue) => {
  console.log(`Count geändert: ${oldValue} → ${newValue}`)
})
</script>

Unterschied:

Merkmal	computed()	watch()
Rückgabewert	✅ Ja (read-only)	❌ Nein
Caching	✅ Ja	❌ Nein
Seiteneffekte	❌ Nein	✅ Ja

---

42.4 Was ist der Unterschied zwischen watch() und watchEffect()?

watch(): Explizite Quelle.

watch(count, (newValue) => {
  console.log(`Count: ${newValue}`)
})

watchEffect(): Automatische Quellen-Erkennung.

watchEffect(() => {
  console.log(`Count: ${count.value}, Message: ${message.value}`)
})

Unterschied:

Merkmal	watch()	watchEffect()
Explizite Quelle	✅ Ja	❌ Nein
immediate	Konfigurierbar	✅ Immer sofort
Zugriff auf oldValue	✅ Ja	❌ Nein

---

42.5 Wie funktioniert die Vue 3 Reaktivität?

Vue 2 (alt): Object.defineProperty().

// Vue 2 (vereinfacht)
function defineReactive(obj, key, value) {
  Object.defineProperty(obj, key, {
    get() {
      return value
    },
    set(newValue) {
      value = newValue
      // UI aktualisieren...
    }
  })
}

Vue 3 (neu): Proxy.

// Vue 3 (vereinfacht)
function reactive(obj) {
  return new Proxy(obj, {
    get(target, key) {
      return target[key]
    },
    set(target, key, value) {
      target[key] = value
      // UI aktualisieren...
      return true
    }
  })
}

Vorteile von Proxy:

• ✅ Komplette Objekte überwachen (nicht nur existierende Eigenschaften)
• ✅ Bessere Performance
• ✅ Unterstützung für Map, Set, etc.

---

42.6 Was ist nextTick() und wann verwendet man es?

nextTick(): Wartet, bis das nächste DOM-Update abgeschlossen ist.

Beispiel:

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

const message = ref('Alt')
const updateMessage = async () => {
  message.value = 'Neu'
  console.log(document.getElementById('msg').textContent)  // 'Alt' (noch nicht aktualisiert!)
  
  await nextTick()
  console.log(document.getElementById('msg').textContent)  // 'Neu' (jetzt aktualisiert!)
}
</script>

<template>
  <p id="msg">{{ message }}</p>
  <button @click="updateMessage()">Aktualisieren</button>
</template>

Anwendungsfälle:

• ✅ Nach DOM-Update auf Elemente zugreifen
• ✅ Drittanbieter-Bibliotheken initialisieren (nach Update)
• ✅ Fokus setzen (nach Update)

---

42.7 Was sind die Lebenszyklus-Hooks in Vue 3?

Wichtige Lebenszyklus-Hooks:

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

Beispiel (Composition API):

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

onMounted(() => {
  console.log('Komponente gemountet!')
})

onUnmounted(() => {
  console.log('Komponente unmountet!')
})
</script>

---

42.8 Was ist Teleport und wofür verwendet man es?

Teleport: Erlaubt das Rendern von Inhalten in einen anderen DOM-Bereich.

Anwendungsfälle:

• ✅ Modale Dialoge
• ✅ Tooltips
• ✅ Benachrichtigungen (Toasts)

Beispiel:

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

const isModalOpen = ref(false)
</script>

<template>
  <button @click="isModalOpen = true">Modal öffnen</button>

  <Teleport to="body">
    <div v-if="isModalOpen" class="modal">
      <p>Modal-Inhalt</p>
      <button @click="isModalOpen = false">Schließen</button>
    </div>
  </Teleport>
</template>

---

42.9 Was ist Suspense und wofür verwendet man es?

Suspense: Ermöglicht das Anzeigen von Ladezuständen für asynchrone Komponenten.

Beispiel:

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

const AsyncComponent = defineAsyncComponent(() =>
  import('./AsyncComponent.vue')
)
</script>

<template>
  <Suspense>
    <template #default>
      <AsyncComponent />
    </template>
    <template #fallback>
      <div>Lädt...</div>
    </template>
  </Suspense>
</template>

Vorteile:

• ✅ Bessere Benutzererfahrung (Ladezustände)
• ✅ Einfache Handhabung asynchroner Komponenten

---

42.10 Praxis: Interviewfragen beantworten

Aufgabe: Beantworte die häufigsten Vue 3 Interviewfragen.

Lösung:

Frage 1: Was ist der Unterschied zwischen v-if und v-show?

• ✅ v-if: Konditionales Rendern (DOM-Element wird entfernt)
• ✅ v-show: CSS display: none (DOM-Element bleibt)

Frage 2: Was ist key in v-for und warum ist es wichtig?

• ✅ key hilft Vue, Elemente eindeutig zu identifizieren
• ✅ Verbessert die Performance bei Listen-Updates
• ✅ Vermeidet unerwartete Verhalten

Frage 3: Was sind die Vorteile der Composition API?

• ✅ Bessere Logik-Wiederverwendung (Composables)
• ✅ Bessere TypeScript-Unterstützung
• ✅ Bessere Organisation für komplexe Komponenten

Frage 4: Was ist provide/inject?

• ✅ Ermöglicht die Übergabe von Daten von einer Eltern- an eine Kindkomponente (ohne props zu verwenden)
• ✅ Nützlich für tief verschachtelte Komponenten

Frage 5: Was ist der Unterschied zwischen Vuex und Pinia?

• ✅ Vuex: Offizieller State-Manager für Vue 2 (komplex)
• ✅ Pinia: Offizieller State-Manager für Vue 3 (einfacher, TypeScript-freundlich)

---

✅ Zusammenfassung

In diesem Kapitel hast du gelernt:

• ✅ Unterschied Vue 2 vs. Vue 3
• ✅ ref() vs. reactive()
• ✅ computed() vs. watch()
• ✅ Vue 3 Reaktivität (Proxy)
• ✅ Teleport, Suspense
• ✅ Häufige Interviewfragen

🎯 Nächster Schritt: In Kapitel 43 lernst du Fortgeschrittene Themen (Custom Directives, Plugins, etc.)!

---

← Zurück zu Kapitel 41: User Management Projekt