Un composable è una funzione riutilizzabile che incapsula logica stateful usando la Composition API. Per convenzione è denominato useXxx e restituisce stato reattivo e funzioni — consentendoti di condividere logica tra componenti senza mixin o ripetizioni.
{ 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>
Ogni componente che chiama useCounter() ottiene il suo proprio isolato count — i composable creano stato fresco per ogni chiamata, diversamente da una variabile condivisa a livello di modulo.
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 };
}
I composable possono utilizzare lifecycle hook, watcher e altri composable — e crucialmente, incapsulano la loro propria pulizia (onUnmounted), quindi i consumer non devono ricordarselo.
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
I composable sono il modo idiomatico per estrarre e riutilizzare logica stateful in Vue 3 — data fetching, form handling, mouse/scroll tracking, debouncing, ecc.
Risolvono il problema del riutilizzo della logica in modo pulito (esplicito, privo di collisioni, componibile, TypeScript-friendly) dove i mixin di Vue 2 fallivano.
Sono il motivo principale per cui i team adottano la Composition API: la logica condivisa diventa una semplice funzione testabile invece di codice sparso o duplicato.