Composables: funzioni di composizione riutilizzabili
Estrarre la logica reattiva in funzioni composable precedute da use, condividerle tra i componenti e comprendere in cosa differiscono dai mixin.
Composables: funzioni di composizione riutilizzabili è una lezione Frontend Academy gratuita su CoddyKit. Questa è la lezione 4 di 4. Puoi leggere la lezione completa qui gratuitamente — poi esercitati direttamente nel browser con un editor di codice integrato e un tutor IA disponibile 24/7. Fa parte del percorso di apprendimento Frontend Academy, e i tuoi progressi si sincronizzano tra il web e l'app CoddyKit. Il corso Frontend Academy include 4 lezioni in totale.
Che cosa sono i composable?
Un composable è una funzione che usa gli hook della Composition API per incapsulare e riutilizzare la logica che gestisce lo stato. È l'equivalente dei mixin nella Composition API, ma senza collisioni tra namespace o dipendenze nascoste.
Un composable di base
Estragga la logica reattiva in una funzione il cui nome inizia con use. Può usare ref, computed, watch e gli hook del ciclo di vita, proprio come setup().
// useCounter.ts
import { ref } from 'vue';
export function useCounter(initial = 0) {
const count = ref(initial);
const increment = () => count.value++;
const decrement = () => count.value--;
const reset = () => (count.value = initial);
return { count, increment, decrement, reset };
}
// Usage in any component:
const { count, increment } = useCounter(10);Composable con hook del ciclo di vita
I composable possono registrare hook del ciclo di vita. Gli hook vengono eseguiti in relazione al componente che chiama il composable.
// useOnlineStatus.ts
import { ref, onMounted, onUnmounted } from 'vue';
export function useOnlineStatus() {
const isOnline = ref(navigator.onLine);
const update = () => (isOnline.value = navigator.onLine);
onMounted(() => {
window.addEventListener('online', update);
window.addEventListener('offline', update);
});
onUnmounted(() => {
window.removeEventListener('online', update);
window.removeEventListener('offline', update);
});
return { isOnline };
}Composable con operazioni asincrone (useFetch)
I composable sono ideali per il recupero asincrono dei dati: incapsulano il modello loading/error/data.
// useFetch.ts
export function useFetch<T>(url: MaybeRef<string>) {
const data = ref<T | null>(null);
const loading = ref(true);
const error = ref<string | null>(null);
watchEffect(async (onCleanup) => {
const controller = new AbortController();
onCleanup(() => controller.abort());
loading.value = true;
error.value = null;
try {
const res = await fetch(unref(url), { signal: controller.signal });
data.value = await res.json();
} catch (e: any) {
if (e.name !== 'AbortError') error.value = e.message;
} finally { loading.value = false; }
});
return { data, loading, error };
}Accettare ref come parametri
I composable possono accettare come argomenti sia valori semplici sia ref usando MaybeRef<T> (= T | Ref<T>) e unref() per accedere al valore.
import type { MaybeRef } from 'vue';
import { unref } from 'vue';
function useDouble(num: MaybeRef<number>) {
return computed(() => unref(num) * 2);
}Composable vs mixin
I mixin iniettano proprietà nel componente senza indicarne chiaramente l'origine. I composable sono espliciti: dal valore restituito si vede esattamente che cosa forniscono. È possibile usare più composable senza conflitti tra nomi.
Condividere lo stato tra componenti
Se un composable chiama ref() al proprio interno, ogni componente che lo chiama ottiene il proprio stato. Per condividere lo stato tra componenti, chiami ref() al livello del modulo (all'esterno della funzione composable).
// Shared state (module-level):
const sharedCount = ref(0);
export function useSharedCounter() {
// All callers share the same sharedCount
return { count: sharedCount, increment: () => sharedCount.value++ };
}Librerie di composable
VueUse (vueuse.org) fornisce oltre 200 composable pronti all'uso: useLocalStorage, useFetch, useDark, useIntersectionObserver e molti altri. Controlli sempre VueUse prima di scrivere una soluzione da zero.
Testare i composable
Testi i composable chiamandoli all'interno di un piccolo componente di test oppure usando il pattern mountedApp di @vue/test-utils. Vitest si integra bene con il sistema di reattività di Vue.
Convenzioni per i nomi dei composable
Prefigga sempre il nome con use (useAuth, useFetch, useMediaQuery). Li mantenga focalizzati su una singola responsabilità. Eviti composable che svolgono troppe attività non correlate.
Organizzazione dei composable
Crei una cartella composables/. Un file per ogni composable. Un file indice riesporta tutti i composable. Questo rispecchia il modo in cui vengono organizzati gli hook personalizzati nei progetti React.
Verifica rapida
Qual è il principale vantaggio dei composable rispetto ai mixin di Vue?
Riepilogo: composable di Vue
Un composable è una funzione con prefisso use che chiama gli hook della Composition API. Ogni chiamante ottiene uno stato indipendente, a meno che non si usino ref a livello del modulo. Accetti ref o valori con MaybeRef + unref. Registri gli hook del ciclo di vita all'interno dei composable. Controlli VueUse prima di scrivere una soluzione personalizzata. I valori restituiti in modo esplicito evitano l'inquinamento dei namespace tipico dei mixin.
Domande Frequenti
La lezione «Composables: funzioni di composizione riutilizzabili» è gratuita?
Sì — il testo completo di «Composables: funzioni di composizione riutilizzabili» è gratuito qui sul web. Per esercitarvi in modo interattivo (un editor di codice integrato e un tutor IA 24/7) e sbloccare il resto del corso Frontend Academy, passa a CoddyKit PRO. Il corso Frontend Academy include 4 lezioni in totale.
Cosa imparerò in «Composables: funzioni di composizione riutilizzabili»?
Estrarre la logica reattiva in funzioni composable precedute da use, condividerle tra i componenti e comprendere in cosa differiscono dai mixin. Eserciti Frontend Academy con codice pratico che esegui direttamente nel browser, e un tutor IA 24/7 risponde alle tue domande mentre lavori sulla lezione.
Ho bisogno di esperienza per iniziare Frontend Academy?
Non è richiesta alcuna esperienza precedente. Frontend Academy su CoddyKit è strutturato per principianti e studenti avanzati, quindi puoi iniziare da qui o dall'inizio e procedere al tuo ritmo. Questa è la lezione 4 di 4.
Quanto tempo richiede la lezione «Composables: funzioni di composizione riutilizzabili»?
La maggior parte delle lezioni CoddyKit richiede circa 5–10 minuti. Ogni lezione è breve e interattiva, quindi fai progressi costanti e riprendi esattamente da dove hai lasciato su web e app.
Posso scrivere ed eseguire codice in questa lezione Frontend Academy?
Sì. Ogni lezione Frontend Academy include un editor di codice integrato, quindi scrivi ed esegui codice reale direttamente nel tuo browser e ricevi feedback istantaneo dall'IA — nessuna configurazione locale necessaria.
Tutte le lezioni di questo corso
- ref() e reactive()
- computed() e watch()
- La funzione setup() e script setup
- Composables: funzioni di composizione riutilizzabili