En composable er en genbrugelig funktion, der indkapsler stateful logic ved hjælp af Composition API. Efter konvention navngives den useXxx og returnerer reaktiv state plus funktioner — så du kan dele logic på tværs af komponenter uden mixins eller gentagelse.
{ ref, computed } ;
() {
count = (initial);
double = ( count. * );
() { count.++; }
() { count. = initial; }
{ count, double, increment, reset };
}
<script setup>
import { useCounter } from "@/composables/useCounter";
const { count, double, increment } = useCounter(10); // each call = independent state
</script>
<template>
<button @click="increment">{{ count }} (double: {{ double }})</button>
</template>
Hver komponent, der kalder useCounter(), får sin egen isolerede count — composables opretter frisk state ved hvert kald, i modsætning til en delt variabel på modulniveau.
import { ref, onUnmounted } from "vue";
export function useMousePosition() {
const x = ref(0), y = ref(0);
const update = (e) => { x.value = e.pageX; y.value = e.pageY; };
window.addEventListener("mousemove", update); // set up
onUnmounted(() => window.removeEventListener("mousemove", update)); // auto cleanup!
return { x, y };
}
Composables kan bruge lifecycle hooks, watchers og andre composables — og vigtigst af alt indkapsler de deres egen cleanup (onUnmounted), så forbrugere ikke behøver at huske det.
Mixins (Vue 2): merged into the component — unclear where properties came from,
naming collisions between mixins, implicit dependencies
Composables: explicit imports + return values — clear sources, no collisions,
can be composed, fully typed in TypeScript
Composables er den idiomatiske måde at udtrække og genbruge stateful logic i Vue 3 — datahentning, formularhantering, mus-/scroll-sporing, debouncing osv.
De løser logic-genbrugelses-problemet rent (eksplicit, konfliktfrit, komponebart, TypeScript-venligt) hvor Vue 2's mixins fejlede.
De er den primære grund til at teams adopterer Composition API: delt logic bliver en simpel, testbar funktion i stedet for spredt eller duplikeret kode.