Componente Vue Suspense
con slot default e #fallback, caricamento di componenti asincroni, Suspense nidificati.
Componente Vue Suspense è 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 cosa risolve Suspense
Suspense è un componente Vue integrato che coordina gli stati di caricamento dei componenti con dipendenze asincrone.
Senza di esso, ogni componente asincrono gestisce il proprio indicatore di caricamento. Con Suspense si dichiara un unico confine che attende tutte le operazioni asincrone annidate e mostra un singolo contenuto di fallback finché tutto non è pronto.
Due slot: default e fallback
Suspense espone due slot denominati:
- default — il contenuto effettivo, che può contenere componenti asincroni o un
setup()asincrono - fallback — ciò che deve essere mostrato mentre lo slot default viene risolto
Quando tutte le dipendenze asincrone sono state risolte, Vue sostituisce il fallback con il contenuto default.
<template>
<Suspense>
<template #default>
<UserDashboard />
</template>
<template #fallback>
<div class="spinner">Loading dashboard...</div>
</template>
</Suspense>
</template>setup() asincrono come dipendenza
Un componente diventa una dipendenza asincrona quando la sua funzione setup() viene dichiarata async e attende un risultato. Vue tiene traccia della promise restituita.
L'equivalente con <script setup> consiste nell'utilizzare direttamente await al livello superiore del blocco.
<script setup>
import { ref } from 'vue'
// Top-level await makes this an async dependency of Suspense
const res = await fetch('/api/profile')
const profile = ref(await res.json())
</script>
<template>
<h1>Welcome, {{ profile.name }}</h1>
</template>Anche i componenti asincroni vengono conteggiati
Anche i componenti creati con defineAsyncComponent vengono monitorati da Suspense. Il fallback rimane visibile finché non viene risolto l'import() dinamico.
In questo modo può suddividere in più parti i componenti pesanti senza scrivere un'interfaccia di caricamento specifica per ogni componente.
<script setup>
import { defineAsyncComponent } from 'vue'
const Chart = defineAsyncComponent(() =>
import('./HeavyChart.vue')
)
</script>
<template>
<Suspense>
<Chart />
<template #fallback>Preparing chart...</template>
</Suspense>
</template>Attesa congiunta di più figli asincroni
Se lo slot predefinito contiene diverse dipendenze asincrone, Suspense attende che tutte vengano risolte prima di mostrare il contenuto.
In questo modo si evitano gli spostamenti del layout causati dalla comparsa dei componenti uno alla volta.
<template>
<Suspense>
<div>
<UserStats /> <!-- async setup -->
<RecentOrders /> <!-- async setup -->
<Recommendations /> <!-- async component -->
</div>
<template #fallback>
<PageSkeleton />
</template>
</Suspense>
</template>Gestire i rifiuti con onErrorCaptured
Se un setup() asincrono fallisce (ad esempio a causa di una richiesta fallita), l'errore risale fino all'hook onErrorCaptured più vicino in un componente genitore.
Suspense non visualizza direttamente gli errori, quindi deve essere abbinato a un error boundary.
<script setup>
import { ref, onErrorCaptured } from 'vue'
const error = ref(null)
onErrorCaptured((err) => {
error.value = err
return false // stop the error from propagating further
})
</script>Pattern Error Boundary + Suspense
Il pattern di produzione più comune inserisce Suspense all'interno di un componente error boundary. onErrorCaptured restituisce false per interrompere la propagazione e mostrare invece un'interfaccia di errore.
<script setup>
import { ref, onErrorCaptured } from 'vue'
const err = ref(null)
onErrorCaptured((e) => { err.value = e; return false })
</script>
<template>
<p v-if="err">Failed to load: {{ err.message }}</p>
<Suspense v-else>
<ProfilePanel />
<template #fallback>Loading...</template>
</Suspense>
</template>Gli eventi pending e resolve
Suspense emette eventi del ciclo di vita che è possibile ascoltare:
- @pending — viene emesso quando entra nello stato pending (caricamento)
- @resolve — viene emesso quando lo slot predefinito termina la risoluzione
- @fallback — viene emesso quando viene mostrato il contenuto di fallback
Utile per l'analisi dei dati o per le barre di avanzamento.
<template>
<Suspense @pending="onPending" @resolve="onResolve">
<RouteView />
<template #fallback>Loading route...</template>
</Suspense>
</template>La prop timeout per ritardare il fallback
La prop timeout (in millisecondi) ritarda la visualizzazione del fallback. Se il lavoro asincrono viene completato prima del timeout, il fallback non viene mai mostrato.
In questo modo si evita la comparsa dello spinner per le risposte rapide.
<template>
<!-- Only show fallback if loading exceeds 200ms -->
<Suspense :timeout="200">
<FastPanel />
<template #fallback>Loading...</template>
</Suspense>
</template>Suspense con Router e transizioni
Suspense si combina con RouterView e Transition per animare i cambi di route asincroni. L'ordine è importante: Transition avvolge Suspense, che a sua volta avvolge il componente associato alla route.
<template>
<RouterView v-slot="{ Component }">
<Transition mode="out-in">
<Suspense>
<component :is="Component" />
<template #fallback>Loading page...</template>
</Suspense>
</Transition>
</RouterView>
</template>Quando NON usare Suspense
Eviti Suspense per i dati che vengono richiesti di nuovo frequentemente mentre il componente resta montato: gestisce solo la risoluzione asincrona iniziale. Per gli stati di caricamento continui (paginazione, nuove richieste), usi invece un normale ref reattivo loading.
<script setup>
import { ref } from 'vue'
const loading = ref(false)
async function loadMore() {
loading.value = true
await fetchNextPage()
loading.value = false
}
</script>Verifica rapida
Verifichi la Sua comprensione di Suspense.
Riepilogo
Ha imparato come Suspense coordina le dipendenze asincrone:
- lo slot default contiene il contenuto asincrono (setup asincrono o componenti asincroni)
- lo slot fallback viene mostrato durante il caricamento
- attende tutti i figli asincroni prima di mostrare il contenuto
- i rifiuti risalgono a
onErrorCapturedin un boundary genitore timeoutevita la comparsa dello spinner; eventi come@resolvesono utili per l'analisi dei dati
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
Domande Frequenti
La lezione «Componente Vue Suspense» è gratuita?
Sì — il testo completo di «Componente Vue Suspense» è 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 «Componente Vue Suspense»?
con slot default e #fallback, caricamento di componenti asincroni, Suspense nidificati. 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 «Componente Vue Suspense»?
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
- Componente Vue Suspense
- Componenti asincroni con defineAsyncComponent
- SSR in streaming con renderToWebStream
- Strategie di hydration differita