Dit zijn twee manieren om Vue-componenten te schrijven. De Options API organiseert code op basis van optietype (data, methods, computed); de Composition API organiseert code op basis van met behulp van functies zoals , , en .
Dit zijn twee manieren om Vue-componenten te schrijven. De Options API organiseert code op basis van optietype (data, methods, computed); de Composition API organiseert code op basis van met behulp van functies zoals , , en .
refcomputedsetup<script>
export default {
data() { return { count: 0 }; },
computed: { double() { return this.count * 2; } },
methods: { increment() { this.count++; } },
mounted() { console.log("mounted"); },
};
</script>
Alles wordt gegroepeerd in vaste bakken (data, methods, computed, lifecycle). Eenvoudig en gemakkelijk te ontdekken, maar de logica van een enkel feature wordt verspreid over die bakken.
<script setup>
import { ref, computed, onMounted } from "vue";
// all the logic for "counter" lives together
const count = ref(0);
const double = computed(() => count.value * 2);
function increment() { count.value++; }
onMounted(() => console.log("mounted"));
</script>
State, computed, methods, en lifecycle voor één bezorgdheid zitten bij elkaar, en <script setup> maakt het beknopt (geen this, geen return).
De Composition API stelt je in staat om stateful logica uit te pakken en herbruikbaar te maken als gewone functies (composables):
// useCounter.js — reusable across any component
export function useCounter() {
const count = ref(0);
const increment = () => count.value++;
return { count, increment };
}
<script setup>
const { count, increment } = useCounter(); // reuse anywhere
</script>
Dit lost het probleem van logica-hergebruik schoon op, wat in de Options API omslachtig was (mixins hadden naamconflicten en onduidelijke bronnen).
Options API → simpler mental model, fine for small components, familiar to beginners
Composition API → better for large components, TypeScript, and reusing logic (composables)
De Composition API (met <script setup>) is de aanbevolen standaard voor nieuwe Vue 3-projecten, vooral met TypeScript.
De Composition API is Vue 3's antwoord op het organiseren en hergebruiken van componentlogica.
Als je begrijpt dat het code per feature groepeert (niet per optietype) en composables mogelijk maakt — tegenover de option-gebaseerde bakken van de Options API — verklaart dat de moderne Vue-stijl en waarom complexe componenten en TypeScript-codebases het ervan houden.
Beiden worden volledig ondersteund; je kunt ze zelfs mengen.