1️⃣ Options API – Alle verfügbaren Optionen

Data-Optionen

• data: Initialisiert den Zustand der Komponente.
• props: Empfängt Daten von Elternkomponenten.
• propsData: Übergibt Props an die Komponente (nur bei Vue.extend).
• computed: Berechnete Eigenschaften, die auf abhängigen Daten basieren.
• methods: Definiert Funktionen innerhalb der Komponente.
• watch: Überwacht Datenänderungen und reagiert darauf.

---

Template-Optionen

• template: HTML-Template für die Komponente.
• render: Nutzt eine Render-Funktion anstelle eines Templates.
• renderError: Debugging für Render-Fehler.

---

Lifecycle-Hooks

• beforeCreate: Vor der Initialisierung der Instanz.
• created: Nach der Initialisierung der Instanz.
• beforeMount: Vor dem Mounten der Komponente.
• mounted: Nach dem Mounten der Komponente.
• beforeUpdate: Vor einem Daten-Update.
• updated: Nach einem Daten-Update.
• beforeUnmount: Vor dem Entfernen der Komponente.
• unmounted: Nach dem Entfernen der Komponente.

---

Andere Optionen

• el: Gibt das Ziel-HTML-Element an.
• components: Lokale Komponentenregistrierung.
• directives: Lokale benutzerdefinierte Direktiven.
• filters: Definiert lokale Filter.
• provide und inject: Ermöglicht Datenweitergabe in der Komponenten-Hierarchie.
• mixins: Mischen von Code aus mehreren Quellen.
• extends: Vererbung von Basiskomponenten.
• emits: Definiert auslösbare Ereignisse.
• inheritAttrs: Kontrolle über die Vererbung von Attributen.

---

2️⃣ Composition API – Alle Funktionen

Reaktive Datenverwaltung

• ref(): Erstellt reaktive primitive Werte.
• reactive(): Erstellt reaktive Objekte.
• readonly(): Erstellt ein schreibgeschütztes Objekt.
• shallowRef(): Reaktivität nur auf oberster Ebene.
• shallowReactive(): Reaktivität nur auf oberster Ebene.
• toRef(): Wandelt eine Objekteigenschaft in eine Ref um.
• toRefs(): Konvertiert alle Eigenschaften eines Objekts in Refs.

---

Berechnete Eigenschaften

• computed(): Erstellt berechnete Eigenschaften.

---

Beobachtungsfunktionen

• watch(): Überwacht Änderungen an reaktiven Daten oder Refs.
• watchEffect(): Führt einen Effekt automatisch aus, wenn Daten sich ändern.

---

Lifecycle-Hooks

• onBeforeMount()
• onMounted()
• onBeforeUpdate()
• onUpdated()
• onBeforeUnmount()
• onUnmounted()
• onErrorCaptured()
• onRenderTracked()
• onRenderTriggered()

---

Utility-Funktionen

• provide() und inject(): Für Datenweitergabe zwischen Komponenten.
• isRef(), isReactive(), isReadonly(), isProxy(): Prüfen von Objekteigenschaften.
• customRef(): Erstellt benutzerdefinierte Refs.
• triggerRef(): Manuelles Auslösen von Ref-Aktualisierungen.

---

3️⃣ Globale API

App-Erstellung

• createApp(): Startet eine neue Vue-App.
• createSSRApp(): Startet eine App mit Server-Side Rendering.

---

Utilities

• nextTick(): Führt einen Callback nach dem nächsten DOM-Update aus.
• defineComponent(): Erstellt eine neue Komponente.
• h(): Erstellt virtuelle DOM-Knoten.

---

Globale Konfiguration

• app.config.globalProperties: Globale Eigenschaften für die App.
• app.config.performance: Aktiviert Performance-Monitoring.
• app.use(): Verwendet Plugins.

---

4️⃣ Direktiven

Vorgefertigte Direktiven

• v-bind: Bindet Attribute oder Eigenschaften.
• v-model: Bindet Eingabewerte.
• v-for: Iteration über Listen.
• v-if, v-else-if, v-else: Bedingtes Rendering.
• v-show: Zeigt oder verbirgt Elemente.
• v-on: Fügt Ereignis-Listener hinzu.
• v-slot: Definiert Slots in Templates.
• v-html: Fügt HTML direkt ein.
• v-text: Fügt Text direkt ein.

---

5️⃣ Vue Router

Router-Konfiguration

• createRouter(): Erstellt eine neue Router-Instanz.
• createWebHistory(): Aktiviert HTML5-History-Modus.
• createWebHashHistory(): Aktiviert Hash-Modus.

Navigation

• router.push(): Navigiert zu einer neuen Route.
• router.replace(): Ersetzt die aktuelle Route.
• router.beforeEach(): Globaler Guard vor der Navigation.

---

6️⃣ Pinia (State Management)

Pinia-Funktionen

• defineStore(): Erstellt einen Store.
• storeToRefs(): Konvertiert State und Getter in Refs.
• mapStores(): Verbindet mehrere Stores mit einer Komponente.

---

7️⃣ Plugins und Erweiterungen

Plugins

• Vue DevTools: Debugging-Werkzeug für Vue.
• Vue Router: Routing für SPAs.
• Pinia: State-Management.
• Vite: Schneller Entwicklungsserver und Bundler. Ad-skipping activated