Composition API
Setup function, ref, reactive, computed, watch, lifecycle hooks, composables, script setup
1Wat is de Composition API in Vue 3?
Wat is de Composition API in Vue 3?
Antwoord
De Composition API is een nieuwe manier om de logica van Vue-componenten te organiseren met composition-functies in plaats van de options (data, methods, computed). Hiermee kun je logica groeperen op functionaliteit in plaats van op optietype, wat het hergebruik van code via composables vergemakkelijkt. Het biedt ook betere TypeScript-ondersteuning en een betere organisatie van complexe componenten.
2Wat is de belangrijkste functie die in de Composition API wordt gebruikt om de logica van een component te definiëren?
Wat is de belangrijkste functie die in de Composition API wordt gebruikt om de logica van een component te definiëren?
Antwoord
De functie setup() is het startpunt van de Composition API. Ze wordt uitgevoerd vóór het aanmaken van de component, zelfs vóór created(). Ze ontvangt props en de context als argumenten en moet een object teruggeven met de data en functies die aan het template worden blootgesteld. In setup() gebruiken we ref, reactive, computed, watch en de lifecycle hooks van de Composition API.
3Wat is het belangrijkste verschil tussen ref() en reactive()?
Wat is het belangrijkste verschil tussen ref() en reactive()?
Antwoord
ref() maakt een reactieve referentie voor een primitieve waarde of een object, die in het script via .value benaderd wordt (maar in templates automatisch wordt uitgepakt). reactive() maakt een reactieve proxy enkel voor objecten en arrays, zonder .value nodig te hebben, maar verliest zijn reactiviteit als het wordt gedestructureerd. ref() is veelzijdiger voor primitieven, reactive() is natuurlijker voor complexe objecten maar vereist toRef/toRefs voor destructurering.
Hoe krijg je toegang tot de waarde van een ref in de functie setup()?
Hoe maak je een computed property in de Composition API?
+21 gespreksvragen
Andere Vue.js / Nuxt.js-sollicitatieonderwerpen
JavaScript-grondbeginselen
Modern JavaScript (ES6+)
Vue-basisbeginselen
Vue-componenten
Vue Router
Pinia State Management
Vuex (Legacy)
Vue-reactiviteit
Nuxt-grondbeginselen
Data Fetching in Nuxt
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