Nuxt Data Fetching
useFetch, useAsyncData, $fetch, lazy fetching, error handling, refresh, data caching
1Was ist der Hauptunterschied zwischen useFetch und useAsyncData in Nuxt?
Was ist der Hauptunterschied zwischen useFetch und useAsyncData in Nuxt?
Antwort
useFetch ist ein Wrapper um useAsyncData und $fetch, der gängige API-Aufrufe vereinfacht. Es übernimmt automatisch die URL-Konstruktion und akzeptiert eine URL direkt als erstes Argument, während useAsyncData einen eindeutigen Schlüssel und eine benutzerdefinierte Fetcher-Funktion benötigt. Verwende useFetch für einfache API-Aufrufe und useAsyncData für komplexe Fetching-Logik.
2Warum wird empfohlen, bei der Verwendung von useAsyncData immer einen eindeutigen Schlüssel anzugeben?
Warum wird empfohlen, bei der Verwendung von useAsyncData immer einen eindeutigen Schlüssel anzugeben?
Antwort
Der eindeutige Schlüssel ermöglicht es Nuxt, Anfragen während der SSR-Hydration zwischen Server und Client zu identifizieren und zu deduplizieren. Ohne einen eindeutigen Schlüssel könnten Daten nach dem Server-Rendering unnötigerweise auf dem Client erneut abgerufen werden oder es könnten Caching-Konflikte auftreten. Der Schlüssel dient auch für das Caching und die State-Verwaltung.
3Was ist der Unterschied zwischen $fetch und useFetch in Nuxt?
Was ist der Unterschied zwischen $fetch und useFetch in Nuxt?
Antwort
$fetch ist eine Hilfsfunktion, die einfache HTTP-Anfragen ohne State-Verwaltung oder Reaktivität ausführt, ähnlich dem nativen fetch, aber mit Nuxt-Erweiterungen. useFetch ist ein Composable, das reaktive Refs (data, pending, error) zurückgibt und die SSR-Hydration übernimmt. Verwenden Sie $fetch für imperative Aufrufe in Event-Handlern und useFetch für deklaratives Fetching in Komponenten.
Wie aktiviert man Lazy Fetching mit useFetch oder useAsyncData?
Wie behandelt man Fehler beim Data Fetching mit useFetch?
+17 Interview-Fragen
Weitere Vue.js / Nuxt.js-Interviewthemen
JavaScript-Grundlagen
Modernes JavaScript (ES6+)
Vue-Grundlagen
Vue-Komponenten
Vue Router
Pinia State Management
Vuex (Legacy)
Composition API
Vue-Reaktivität
Nuxt-Grundlagen
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