Vue Academy · Lezione

Cosa rende valido un composable

Convenzione di denominazione (useName), incapsulamento dello stato reattivo, restituzione di ref anziché valori grezzi

Lezione 1 di 413 passaggi

Cosa rende valido un composable è una lezione Vue Academy gratuita su CoddyKit. Questa è la lezione 1 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 Vue Academy, e i tuoi progressi si sincronizzano tra il web e l'app CoddyKit. Il corso Vue Academy include 4 lezioni in totale.

Che cos'è un composable

Un composable è una funzione che usa la Composition API di Vue per incapsulare e riutilizzare la logica che gestisce lo stato. È la risposta di Vue 3 ai mixin: più pulita, esplicita e adatta alla tipizzazione.

La convenzione del prefisso use

Per convenzione, i composable vengono denominati con il prefisso use: useCounter, useFetch, useMouse. Questo segnala immediatamente che la funzione contiene logica reattiva.

function useDarkMode() { /* ... */ }
function usePagination() { /* ... */ }

Restituire ref, non valori grezzi

Restituisca ref (o uno stato reattivo), così chi usa il composable mantiene la reattività durante la destrutturazione. Restituire count.value fornirebbe invece uno snapshot che non si aggiorna mai.

function useCounter() {
  const count = ref(0);
  return { count }; // return the ref itself
}

Destrutturazione sicura

Poiché vengono restituiti dei ref, chi usa il composable può destrutturare liberamente senza perdere la reattività. Ogni ref mantiene il proprio collegamento reattivo.

const { count } = useCounter();
// count stays reactive after destructuring

Responsabilità singola

Un buon composable fa una sola cosa. useFetch esegue il fetch; useLocalStorage rende i dati persistenti. Combinare composable piccoli e mirati permette di creare funzionalità più grandi in modo ordinato.

Comporre i composable

I composable possono chiamare altri composable, creando una logica stratificata. Ad esempio, useUserProfile potrebbe usare internamente useFetch.

function useUserProfile(id) {
  const { data } = useFetch("/users/" + id);
  return { user: data };
}

Pulire gli effetti collaterali

Se un composable aggiunge listener, timer o sottoscrizioni, deve rimuoverli in onUnmounted per prevenire perdite di memoria.

import { onMounted, onUnmounted } from "vue";
onMounted(() => window.addEventListener("resize", onResize));
onUnmounted(() => window.removeEventListener("resize", onResize));

Accettare argomenti reattivi

I composable possono accettare ref o getter come input e reagire alle loro modifiche con watch o watchEffect, risultando così più flessibili.

function useDouble(source) {
  return computed(() => unref(source) * 2);
}

Evitare conflitti tra nomi

Quando un composable restituisce molti valori, esponga nomi chiari. Se due composable restituiscono data, rinomini il valore durante la destrutturazione per evitare conflitti.

const { data: user } = useFetch("/user");
const { data: posts } = useFetch("/posts");

Seguire le convenzioni del framework

Chiami i composable in modo sincrono al livello superiore di setup (o di un altro composable), non all'interno di condizioni o callback asincroni, così gli hook del ciclo di vita vengono registrati correttamente.

// good: top-level
const { count } = useCounter();
// avoid: inside if-blocks or after await

Documentazione e struttura restituita

Restituisca un oggetto prevedibile, così chi lo usa sa che cosa riceverà. Una struttura coerente (stato più metodi) rende i composable facili da imparare e usare.

return { count, increment, decrement, reset };

Verifica rapida

Perché un composable dovrebbe restituire dei ref invece di valori grezzi?

Rispondi nella lezione interattiva

Riepilogo

Ha imparato le caratteristiche di un buon composable: il prefisso use, la restituzione di ref per una destrutturazione sicura, la responsabilità singola, la pulizia degli effetti collaterali in onUnmounted e l'assenza di conflitti tra i nomi nell'oggetto restituito.

Gratis per iniziare

Impara HTML con un tutor IA — gratis

Scrivi ed esegui vero codice nel tuo browser, ricevi aiuto istantaneo da un tutor IA disponibile 24/7, e riprendi da dove hai lasciato sul web o nell'app.

Corsi: 42
Lezioni: 156

Inizia a imparare gratis Visualizza il corso completo

Domande Frequenti

La lezione «Cosa rende valido un composable» è gratuita?

Sì — il testo completo di «Cosa rende valido un composable» è 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 Vue Academy, passa a CoddyKit PRO. Il corso Vue Academy include 4 lezioni in totale.

Cosa imparerò in «Cosa rende valido un composable»?

Convenzione di denominazione (useName), incapsulamento dello stato reattivo, restituzione di ref anziché valori grezzi Eserciti Vue 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 Vue Academy?

Non è richiesta alcuna esperienza precedente. Vue 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 1 di 4.

Quanto tempo richiede la lezione «Cosa rende valido un composable»?

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 Vue Academy?

Sì. Ogni lezione Vue 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

← Torna a Vue Academy