A composable hija funzjoni li tista' tintuża mill-ġdid li taqbad logika stateful billi tuża l-Composition API. Bid-dħul huwa msemmi useXxx u jirritorna stat reattivu u funzjonijiet — li jigħtik il-ħtiega li taqsam il-logika bejn il-komponenti mingħajr mixins jew ripetizzjoni.
{ 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>
Kull komponent li sejjaħ useCounter() iksib it-tiegħu iżolat count — composables jinħolqu stat ġdid kull sejħa, bħalma h'inqas minn varjabbli ta' livell modulu maqsuma.
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 jistgħu jużaw hooks ta' ciclu ta' ħajja, osservatur, u composables oħra — u l-aktar importanti, huma jaqbdu l-ħasira tagħhom stess (onUnmounted), għalhekk il-konsumaturi m'għandhomx bżonn jiftakaruh.
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 hija l-mod idiomatiku biex testratta u terġa' tuża l-logika stateful fi Vue 3 — fetching ta' data, immaniġġ tal-formolari, tracking ta' maws/skroll, debouncing, eċċ.
Huma jsolvu l-problema ta' reuse tal-logika b'mod nadif (espliċitu, ħielsa minn ħabta, komposable, friendly għat-TypeScript) fejn il-mixins ta' Vue 2 failew.
Huma r-raġuni ewlenija għaliex it-timijiet jadottaw il-Composition API: il-logika maqsuma ssir funzjoni sempliċi, testabbli minflok kodiċi mgħarraq jew dupplikat.