Data Fetching in Nuxt
useFetch, useAsyncData, $fetch, lazy fetching, error handling, refresh, data caching
1Wat is het belangrijkste verschil tussen useFetch en useAsyncData in Nuxt?
Wat is het belangrijkste verschil tussen useFetch en useAsyncData in Nuxt?
Antwoord
useFetch is een wrapper rond useAsyncData en $fetch die veelvoorkomende API-aanroepen vereenvoudigt. Het verzorgt automatisch de URL-constructie en accepteert een URL direct als eerste argument, terwijl useAsyncData een unieke sleutel en een aangepaste fetcher-functie vereist. Gebruik useFetch voor eenvoudige API-aanroepen en useAsyncData voor complexe fetching-logica.
2Waarom wordt het aanbevolen om altijd een unieke key op te geven bij het gebruik van useAsyncData?
Waarom wordt het aanbevolen om altijd een unieke key op te geven bij het gebruik van useAsyncData?
Antwoord
De unieke key stelt Nuxt in staat om verzoeken tussen server en client tijdens SSR-hydratie te identificeren en te dedupliceren. Zonder een unieke key zouden gegevens onnodig opnieuw kunnen worden opgehaald op de client na server-rendering, of zouden caching-conflicten kunnen optreden. De key dient ook voor caching en state-beheer.
3Wat is het verschil tussen $fetch en useFetch in Nuxt?
Wat is het verschil tussen $fetch en useFetch in Nuxt?
Antwoord
$fetch is een hulpfunctie die eenvoudige HTTP-verzoeken uitvoert zonder state-beheer of reactiviteit, vergelijkbaar met de native fetch maar met Nuxt-verbeteringen. useFetch is een composable die reactieve refs (data, pending, error) retourneert en SSR-hydratie afhandelt. Gebruik $fetch voor imperatieve aanroepen in event handlers en useFetch voor declaratief fetchen in componenten.
Hoe schakel je lazy fetching in met useFetch of useAsyncData?
Hoe handel je fouten af tijdens data fetching met useFetch?
+17 gespreksvragen
Andere Vue.js / Nuxt.js-sollicitatieonderwerpen
JavaScript-grondbeginselen
Modern JavaScript (ES6+)
Vue-basisbeginselen
Vue-componenten
Vue Router
Pinia State Management
Vuex (Legacy)
Composition API
Vue-reactiviteit
Nuxt-grondbeginselen
Nuxt SSR & SSG
Nuxt Server Routes
Nuxt-modules
Vue Composables
Vue formulieren & validatie
Nuxt-statusbeheer
Vue Testing
Nuxt-deployment & CI/CD
Vue-prestaties
Geavanceerde Vue-patronen
TypeScript met Vue
Nuxt-authenticatie
SEO met Nuxt
Nuxt-internationalisatie
Vue-architectuur
Nuxt-beveiliging
Vue-ecosysteem
Migratie Vue 2→3 & Nuxt 2→3
Beheers Vue.js / Nuxt.js voor je volgende gesprek
Krijg toegang tot alle vragen, flashcards, technische tests, code review-oefeningen en gespreksimulatoren.
Begin gratis