Componenti asincroni con defineAsyncComponent
defineAsyncComponent(), loadingComponent, errorComponent, opzioni delay e timeout.
Componenti asincroni con defineAsyncComponent è una lezione Vue Academy gratuita su CoddyKit. Questa è la lezione 2 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.
Perché usare i componenti asincroni
defineAsyncComponent consente di caricare un componente in modo lazy: il relativo codice viene recuperato solo quando il componente viene visualizzato per la prima volta.
Questo abilita la suddivisione del codice a livello di route e di componente, riducendo il bundle iniziale e velocizzando la prima visualizzazione.
La forma con funzione loader
L'utilizzo più semplice consiste nel passare una funzione loader che restituisce un import() dinamico. Vite/webpack suddivide automaticamente quell'import in un chunk separato.
<script setup>
import { defineAsyncComponent } from 'vue'
const SettingsModal = defineAsyncComponent(() =>
import('./SettingsModal.vue')
)
</script>
<template>
<SettingsModal v-if="showSettings" />
</template>La forma con oggetto delle opzioni
Per un controllo più preciso, passi un oggetto delle opzioni. I campi principali sono:
- loader — la funzione di import dinamico
- loadingComponent — viene mostrato durante il caricamento
- errorComponent — viene mostrato se il caricamento fallisce
- delay / timeout — controlli temporali
import { defineAsyncComponent } from 'vue'
import Loading from './Loading.vue'
import ErrorView from './ErrorView.vue'
const AsyncChart = defineAsyncComponent({
loader: () => import('./Chart.vue'),
loadingComponent: Loading,
errorComponent: ErrorView,
delay: 200,
timeout: 5000
})delay: evitare la comparsa dello spinner
L'opzione delay (200 ms per impostazione predefinita) indica per quanto tempo Vue attende prima di mostrare loadingComponent. Se il chunk viene caricato prima del termine del ritardo, lo spinner non viene mostrato.
Imposti delay: 0 per mostrare immediatamente lo stato di caricamento.
const AsyncPanel = defineAsyncComponent({
loader: () => import('./Panel.vue'),
loadingComponent: Spinner,
// wait 300ms before showing Spinner
delay: 300
})timeout: gestire i caricamenti troppo lenti
L'opzione timeout imposta il tempo massimo di attesa. Se il loader non viene risolto entro timeout ms, viene mostrato errorComponent e viene registrato un errore.
Per impostazione predefinita non esiste alcun timeout: il caricamento attende indefinitamente.
const AsyncReport = defineAsyncComponent({
loader: () => import('./Report.vue'),
errorComponent: ErrorView,
// fail if not loaded within 10s
timeout: 10000
})Il callback onError
Il gestore onError viene eseguito quando il loader viene rifiutato. Riceve l'error, una funzione retry, una funzione fail e il conteggio corrente degli attempt.
È qui che si implementa la logica di ritentativo con un limite per le reti instabili.
const AsyncWidget = defineAsyncComponent({
loader: () => import('./Widget.vue'),
onError(error, retry, fail, attempts) {
if (attempts <= 3) {
retry() // try loading again
} else {
fail() // give up, show errorComponent
}
}
})Decisione tra retry e fail
All'interno di onError deve chiamare esattamente una tra retry() e fail() (oppure nessuna delle due, causando comunque il fallimento). Una strategia comune consiste nel ritentare alcune volte in caso di errori di rete, ma nel fallire immediatamente per un errore di sintassi o del chunk, che il ritentativo non può risolvere.
onError(error, retry, fail, attempts) {
const isNetwork = /Loading chunk/.test(error.message)
if (isNetwork && attempts <= 2) {
retry()
} else {
fail()
}
}Abbinamento con Suspense
Quando un componente asincrono si trova all'interno di un boundary Suspense, è il boundary a gestire lo stato di caricamento. In questo caso il loadingComponent del componente viene ignorato: prevale il fallback di Suspense.
<template>
<Suspense>
<AsyncChart /> <!-- loadingComponent ignored here -->
<template #fallback>Loading chart...</template>
</Suspense>
</template>Chunk con nomi per il debugging
È possibile assegnare un nome al chunk generato tramite un commento magico. In questo modo le richieste di rete e i report del bundle sono più facili da leggere.
const AsyncEditor = defineAsyncComponent(() =>
import(
/* webpackChunkName: "editor" */
'./RichTextEditor.vue'
)
)Componenti asincroni e props
I componenti asincroni accettano props ed emettono eventi esattamente come i componenti normali. Una volta risolto il componente reale, Vue inoltra tutto in modo trasparente: non è necessario modificare il punto in cui viene utilizzato.
<template>
<AsyncProfile
:user-id="id"
@save="handleSave"
/>
</template>
<!-- AsyncProfile resolves to the real component, props/events pass through -->Best practice: attenzione al lazy loading above the fold
Carichi in modo lazy i componenti fuori dallo schermo, nascosti dietro interazioni (modali, schede) o usati raramente. Eviti il lazy loading dell'interfaccia critica above the fold: la richiesta aggiuntiva può peggiorare le prestazioni percepite.
// Good candidate: modal only opened on click
const Modal = defineAsyncComponent(() => import('./Modal.vue'))
// Poor candidate: hero shown immediately on load
// import Hero directly insteadVerifica rapida
Verifichi la Sua comprensione di defineAsyncComponent.
Riepilogo
Ha imparato a caricare i componenti asincroni con defineAsyncComponent:
- la forma loader restituisce un
import()dinamico per suddividere il codice - la forma con oggetto delle opzioni aggiunge
loadingComponent,errorComponent,delayetimeout delayevita la comparsa dello spinner;timeoutgestisce i caricamenti troppo lentionError(error, retry, fail, attempts)implementa la logica tra ritentativo e fallimento- all'interno di Suspense, il fallback del boundary prende il controllo dell'interfaccia di caricamento
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 «Componenti asincroni con defineAsyncComponent» è gratuita?
Sì — il testo completo di «Componenti asincroni con defineAsyncComponent» è 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 «Componenti asincroni con defineAsyncComponent»?
defineAsyncComponent(), loadingComponent, errorComponent, opzioni delay e timeout. 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 2 di 4.
Quanto tempo richiede la lezione «Componenti asincroni con defineAsyncComponent»?
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