Composable je ponovno iskoristiva funkcija koja enkapsulira logiku sa stanjem koristeći Composition API. Po konvenciji se naziva useXxx i vraća reaktivno stanje plus funkcije — omogućavajući vam da dijelite logiku između komponenti bez mixina ili ponavljanja.
{ 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>
Svaka komponenta koja poziva useCounter() dobiva svoju vlastitu izoliranU count — composables stvaraju novo stanje pri svakom pozivu, za razliku od dijeljene varijable na razini modula.
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 mogu koristiti lifecycle hook-ove, watchere i druge composables — i ključno, oni enkapsuliraju vlastito čišćenje (onUnmounted), pa se konzumenti ne trebaju za to sjećati.
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 su način ekstrakcije i ponovne upotrebe logike sa stanjem u Vue 3 — dohvaćanje podataka, rukovanje obrascem, praćenje mišem/scrolla, debouncing, itd.
Oni rješavaju problem ponovne upotrebe logike čisto (eksplicitno, bez sukoba, komponibilno, TypeScript-priyatno) gdje su Vue 2 mixini neuspješni.
Oni su primarni razlog zašto timovi prihvaćaju Composition API: logika koja se dijeli postaje jednostavna, testirana funkcija umjesto rasipane ili duplicirane koda.