Composition API
Setup function, ref, reactive, computed, watch, lifecycle hooks, composables, script setup
1Was ist die Composition API in Vue 3?
Was ist die Composition API in Vue 3?
Antwort
Die Composition API ist eine neue Art, die Logik von Vue-Komponenten mithilfe von Composition-Funktionen anstelle der Options (data, methods, computed) zu organisieren. Sie ermöglicht es, Logik nach Funktionalität statt nach Optionstyp zu gruppieren, was die Wiederverwendung von Code über Composables erleichtert. Sie bietet außerdem eine bessere TypeScript-Unterstützung und eine bessere Organisation komplexer Komponenten.
2Welche Hauptfunktion wird in der Composition API verwendet, um die Logik einer Komponente zu definieren?
Welche Hauptfunktion wird in der Composition API verwendet, um die Logik einer Komponente zu definieren?
Antwort
Die Funktion setup() ist der Einstiegspunkt der Composition API. Sie wird vor der Erstellung der Komponente ausgeführt, sogar vor created(). Sie erhält props und den Kontext als Argumente und muss ein Objekt zurückgeben, das die Daten und Funktionen enthält, die dem Template zur Verfügung gestellt werden sollen. In setup() verwendet man ref, reactive, computed, watch und die Lifecycle-Hooks der Composition API.
3Was ist der Hauptunterschied zwischen ref() und reactive()?
Was ist der Hauptunterschied zwischen ref() und reactive()?
Antwort
ref() erstellt eine reaktive Referenz für einen primitiven Wert oder ein Objekt, auf die im Skript über .value zugegriffen wird (in Templates jedoch automatisch entpackt). reactive() erstellt einen reaktiven Proxy ausschließlich für Objekte und Arrays, ohne .value zu erfordern, verliert aber bei Destrukturierung seine Reaktivität. ref() ist vielseitiger für Primitive, reactive() ist natürlicher für komplexe Objekte, erfordert für die Destrukturierung jedoch toRef/toRefs.
Wie greift man in der Funktion setup() auf den Wert einer ref zu?
Wie erstellt man eine computed-Eigenschaft in der Composition API?
+21 Interview-Fragen
Weitere Vue.js / Nuxt.js-Interviewthemen
JavaScript-Grundlagen
Modernes JavaScript (ES6+)
Vue-Grundlagen
Vue-Komponenten
Vue Router
Pinia State Management
Vuex (Legacy)
Vue-Reaktivität
Nuxt-Grundlagen
Nuxt Data Fetching
Nuxt SSR & SSG
Nuxt Server-Routes
Nuxt-Module
Vue Composables
Vue Formulare & Validierung
Nuxt State Management
Vue-Testing
Nuxt-Deployment & CI/CD
Vue-Performance
Fortgeschrittene Vue-Patterns
TypeScript mit Vue
Nuxt-Authentifizierung
SEO mit Nuxt
Nuxt-Internationalisierung
Vue-Architektur
Nuxt-Sicherheit
Vue-Ökosystem
Migration Vue 2→3 & Nuxt 2→3
Meistere Vue.js / Nuxt.js für dein nächstes Interview
Zugang zu allen Fragen, Flashcards, technischen Tests, Code-Review-Übungen und Interview-Simulatoren.
Kostenlos starten