De Vue Composition API is de moderne schrijfstijl die met Vue 3 werd geïntroduceerd: je bundelt de logica van een component in één setup-functie in plaats van die te verspreiden over opties als data, methods en computed. In deze gids loop ik de kerngereedschappen door — ref, reactive, computed en watch — met echte voorbeelden, zodat je componenten ook bij groei netjes en herbruikbaar blijven.
Van de Options API naar de Composition API
In de klassieke Options API leven de state, berekende waarden en methoden van een component in aparte blokken. Voor kleine componenten is dat prima, maar naarmate een functie groeit, raakt code die bij hetzelfde onderwerp hoort verspreid door het bestand. Met de Composition API houd je gerelateerde logica bij elkaar: de state van een teller, de afgeleide waarde en de functie staan naast elkaar.
Beide stijlen worden volledig ondersteund in Vue 3 — de Composition API is een keuze, geen verplichting. Het grootste voordeel komt naar voren wanneer je deelbare logica (composables) schrijft.
setup en <script setup>
De meest praktische manier om de Composition API te gebruiken is de compile-time-syntax <script setup>. Elke variabele en functie die je daar declareert, wordt automatisch beschikbaar in de template, en je hebt geen return nodig.
<script setup>
import { ref } from 'vue'
const count = ref(0)
function increment() {
count.value++
}
</script>
<template>
<button @click="increment">Teller: {{ count }}</button>
</template>Let op: in JavaScript lees je de waarde via count.value, maar in de template pakt Vue .value automatisch uit; daar schrijf je gewoon count.
Reactieve waarden met ref
Gebruik ref voor losse waarden (getal, string, boolean). Het geeft een object terug waarvan de echte waarde in de .value-eigenschap zit. Dit is de basis van de reactiviteit waarmee Vue de DOM bijwerkt wanneer de waarde verandert.
- Lezen/schrijven:
const name = ref('Ada')→name.value = 'Grace' - Ideaal voor primitieven: string, number, boolean.
- Kan ook objecten bevatten: stop een object in een
refen Vue maakt de inhoud diep reactief viareactive.
Objectstate met reactive
Wil je meerdere gerelateerde velden samen beheren, dan past reactive goed. Het neemt een object en maakt er een diep reactieve proxy van; hier schrijf je geen .value, je benadert de eigenschappen direct.
import { reactive } from 'vue'
const form = reactive({
email: '',
agreed: false,
})
function submit() {
console.log(form.email, form.agreed)
}Welke kies je? Een praktische vuistregel: ref voor primitieven en losse stukjes state, en reactive voor een formulier of object dat logisch een geheel vormt. Onthoud dat je een reactive-object niet in zijn geheel opnieuw kunt toewijzen (dan breekt de referentie) — werk de velden bij, of kies liever ref.
Afgeleide waarden met computed
computed levert waarden die uit andere reactieve bronnen worden berekend en in de cache blijven totdat hun afhankelijkheden veranderen. In plaats van hetzelfde resultaat steeds opnieuw in de template te berekenen, definieer je het één keer.
import { ref, computed } from 'vue'
const price = ref(100)
const quantity = ref(3)
const total = computed(() => price.value * quantity.value)total gedraagt zich als een ref: total.value in JavaScript, {{ total }} in de template. Verandert price of quantity, dan herberekent Vue total automatisch.
Neveneffecten met watch en watchEffect
Voor neveneffecten — een netwerkverzoek doen, naar localStorage schrijven — wanneer een waarde verandert, gebruik je watch. Het bewaakt een specifieke bron en geeft je de oude en nieuwe waarde.
import { ref, watch } from 'vue'
const query = ref('')
watch(query, (nieuw, oud) => {
console.log(`'${oud}' -> '${nieuw}'`)
})watchEffect volgt automatisch de reactieve waarden die je erin gebruikt en draait meteen één keer; voor eenvoudige gevallen is het korter. Kies watch als je precies wilt zien welke afhankelijkheid je volgt, en watchEffect als je bedoelt "volg alles wat ik gebruik".
Composables: logica hergebruiken
De echte kracht van de Composition API is logica naar een functie verplaatsen en die over componenten delen. Volgens conventie krijgen deze functies een use-voorvoegsel.
// useCounter.js
import { ref } from 'vue'
export function useCounter(start = 0) {
const count = ref(start)
const increment = () => count.value++
const reset = () => (count.value = start)
return { count, increment, reset }
}Nu kan elk component dezelfde logica hergebruiken met const { count, increment } = useCounter(10). Anders dan bij mixins is duidelijk waar elke waarde vandaan komt en krijg je geen naambotsingen.
Veelgestelde vragen
Moet ik ref of reactive gebruiken?
Gebruik ref voor primitieven en losse state, en reactive voor objecten/formulieren die logisch een geheel vormen. Veel teams gebruiken overal ref voor consistentie; beide zijn correct.
Wordt de Options API nu als verouderd beschouwd?
Nee. De Options API wordt nog steeds volledig ondersteund en wordt niet verwijderd. De Composition API is een extra optie die schittert in grote componenten en gedeelde logica.
Waarom schrijf ik geen .value in de template?
Wanneer Vue de template compileert, pakt het de ref's op het hoogste niveau automatisch uit. Daarom schrijf je count in de template, maar count.value in JavaScript.
Denk je erover je Vue-project naar de Composition API te migreren? Van componentarchitectuur tot composable-ontwerp, we kunnen samen een nette structuur bouwen — neem contact op.