0Pricing
Vue Academy · Lezione

Importazione e utilizzo dei composable in script setup

Importazione dei composable, utilizzo dei composable di terze parti di VueUse, organizzazione degli import

Importazione e utilizzo dei composable in script setup è una lezione Vue 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 Vue Academy, e i tuoi progressi si sincronizzano tra il web e l'app CoddyKit. Il corso Vue Academy include 4 lezioni in totale.

Composable e script setup

I composable sono funzioni che racchiudono logica reattiva per poterla riutilizzare. Con <script setup>, usarli è semplice: basta importarli e chiamarli al livello superiore.

Importare al livello superiore

Chiami sempre un composable al livello superiore di <script setup>, non all'interno di una condizione, di un ciclo o di una funzione annidata. In questo modo Vue registra correttamente la reattività e gli hook del ciclo di vita.

<script setup>
import { useCounter } from './useCounter'
const { count, increment } = useCounter()
</script>

Perché il livello superiore è importante

I composable spesso registrano hook del ciclo di vita come onMounted o configurano dei watcher. Queste operazioni devono essere eseguite durante il setup del componente, possibile solo se il composable viene chiamato in modo sincrono al livello superiore.

Destrutturare ciò che serve

Un composable restituisce un oggetto di valori reattivi e funzioni. Destrutturi solo ciò che il componente usa; rinomini gli elementi per evitare conflitti quando chiama due volte lo stesso composable.

<script setup>
import { useMouse } from './useMouse'
const { x: mouseX, y: mouseY } = useMouse()
</script>

Presentiamo VueUse

VueUse è una libreria popolare di composable pronti all'uso. Invece di scrivere autonomamente la logica comune, importi un composable testato. Lo installi una volta e importi ciò che le serve.

<script setup>
import { useLocalStorage } from '@vueuse/core'
const name = useLocalStorage('name', 'Alice')
</script>

useLocalStorage in azione

useLocalStorage restituisce un ref sincronizzato con localStorage. Modifichi il ref e lo storage del browser si aggiorna; ricarichi la pagina e il valore rimane memorizzato.

<template>
  <input v-model="name" />
  <p>Saved: {{ name }}</p>
</template>

useMouse per coordinate reattive

useMouse tiene traccia della posizione del puntatore tramite ref reattivi. Aggiunge e rimuove automaticamente il listener dell'evento, così non deve mai gestire manualmente la pulizia.

<script setup>
import { useMouse } from '@vueuse/core'
const { x, y } = useMouse()
</script>

<template>
  <p>{{ x }}, {{ y }}</p>
</template>

I composable si combinano

Un composable può chiamare altri composable. Questa struttura a livelli è il cuore della Composition API: costruisca piccoli elementi e li combini in funzionalità più grandi.

import { useMouse } from '@vueuse/core'

export function useMouseDistance() {
  const { x, y } = useMouse()
  const distance = computed(() => Math.hypot(x.value, y.value))
  return { distance }
}

await al livello superiore

<script setup> supporta direttamente await al livello superiore. Il componente diventa un setup asincrono e il framework può sospendere il rendering finché la promise non viene risolta.

<script setup>
const res = await fetch('/api/user')
const user = await res.json()
</script>

Suspense con setup asincrono

Un componente che usa await al livello superiore deve essere racchiuso dal genitore in un confine <Suspense>. Suspense mostra il contenuto alternativo finché il setup asincrono non termina.

<template>
  <Suspense>
    <AsyncUser />
    <template #fallback>Loading...</template>
  </Suspense>
</template>

Buone pratiche

  • Nomini i composable con il prefisso use.
  • Li chiami solo al livello superiore.
  • Restituisca ref (oppure un reactive racchiuso in toRefs).
  • Preferisca VueUse per le esigenze comuni prima di scrivere un composable personalizzato.

Verifica rapida

Verifichi di aver compreso i composable.

Riepilogo

Ha imparato a usare i composable:

  • Li importi e li chiami al livello superiore di <script setup>.
  • Destrutturi e rinomini ciò che le serve.
  • VueUse offre composable pronti all'uso come useLocalStorage e useMouse.
  • Un await al livello superiore rende asincrono il setup e si abbina a <Suspense>.

Domande Frequenti

La lezione «Importazione e utilizzo dei composable in script setup» è gratuita?

Sì — il testo completo di «Importazione e utilizzo dei composable in script setup» è 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 «Importazione e utilizzo dei composable in script setup»?

Importazione dei composable, utilizzo dei composable di terze parti di VueUse, organizzazione degli import 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 4 di 4.

Quanto tempo richiede la lezione «Importazione e utilizzo dei composable in script setup»?

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

  1. Introduzione a script setup
  2. defineProps e defineEmits
  3. defineExpose e useAttrs
  4. Importazione e utilizzo dei composable in script setup
← Torna a Vue Academy