0Pricing
Vue Academy · Leçon

Composant Vue Suspense

avec emplacements default et #fallback, chargement de composants asynchrones et Suspense imbriqué

Composant Vue Suspense est une leçon Vue Academy gratuite sur CoddyKit. Ceci est la leçon 1 sur 4. Tu peux lire la leçon complète ci-dessous gratuitement — puis la pratiquer en direct dans le navigateur avec un éditeur de code intégré et un tuteur IA 24/7. Elle fait partie du parcours d'apprentissage Vue Academy, et ta progression se synchronise sur le web et l'application CoddyKit. Le cours Vue Academy comprend 4 leçons au total.

Ce que résout Suspense

Suspense est un composant Vue intégré qui coordonne les états de chargement des composants ayant des dépendances asynchrones.

Sans lui, chaque composant asynchrone gère son propre indicateur de chargement. Avec Suspense, vous déclarez une seule limite qui attend toutes les opérations asynchrones imbriquées et affiche un unique fallback jusqu’à ce que tout soit prêt.

Deux emplacements : par défaut et fallback

Suspense expose deux emplacements nommés :

  • par défaut — le contenu réel, qui peut contenir des composants asynchrones ou un setup() asynchrone
  • fallback — ce qui doit être affiché pendant la résolution de l’emplacement par défaut

Lorsque toutes les dépendances asynchrones sont résolues, Vue remplace le fallback par le contenu par défaut.

<template>
  <Suspense>
    <template #default>
      <UserDashboard />
    </template>
    <template #fallback>
      <div class="spinner">Loading dashboard...</div>
    </template>
  </Suspense>
</template>

setup() asynchrone comme dépendance

Un composant devient une dépendance asynchrone lorsque sa fonction setup() est déclarée async et attend un résultat. Vue suit la promesse renvoyée.

L’équivalent avec <script setup> consiste à utiliser directement await au niveau supérieur du bloc.

<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>

Les composants asynchrones sont aussi pris en compte

Les composants créés avec defineAsyncComponent sont également suivis par Suspense. Le fallback reste visible jusqu’à la résolution de l’import() dynamique.

Vous pouvez ainsi diviser le code des composants volumineux sans écrire d’interface de chargement pour chaque composant.

<script setup>
import { defineAsyncComponent } from 'vue'

const Chart = defineAsyncComponent(() =>
  import('./HeavyChart.vue')
)
</script>

<template>
  <Suspense>
    <Chart />
    <template #fallback>Preparing chart...</template>
  </Suspense>
</template>

Plusieurs enfants asynchrones attendent ensemble

Si l’emplacement par défaut contient plusieurs dépendances asynchrones, Suspense attend que toutes soient résolues avant d’afficher le contenu.

Cela empêche la mise en page de se décaler lorsque les composants apparaissent l’un après l’autre.

<template>
  <Suspense>
    <div>
      <UserStats />   <!-- async setup -->
      <RecentOrders /> <!-- async setup -->
      <Recommendations /> <!-- async component -->
    </div>
    <template #fallback>
      <PageSkeleton />
    </template>
  </Suspense>
</template>

Capturer les rejets avec onErrorCaptured

Si un setup() asynchrone rejette (par exemple, à cause d’une récupération échouée), l’erreur remonte jusqu’au hook onErrorCaptured le plus proche dans un composant parent.

Suspense n’affiche pas lui-même les erreurs ; vous devez donc l’associer à une barrière d’erreur.

<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>

Motif barrière d’erreur + Suspense

En production, le motif courant consiste à placer Suspense à l’intérieur d’un composant formant une barrière d’erreur. onErrorCaptured renvoie false pour arrêter la propagation et afficher une interface d’erreur à la place.

<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>

Les événements pending et resolve

Suspense émet des événements du cycle de vie auxquels vous pouvez vous abonner :

  • @pending — déclenché lors du passage à l’état d’attente (chargement)
  • @resolve — déclenché lorsque l’emplacement par défaut a fini d’être résolu
  • @fallback — déclenché lorsque le contenu de secours est affiché

Utile pour les analyses ou les barres de progression.

<template>
  <Suspense @pending="onPending" @resolve="onResolve">
    <RouteView />
    <template #fallback>Loading route...</template>
  </Suspense>
</template>

Propriété timeout pour un contenu de secours différé

La propriété timeout (en millisecondes) retarde l’affichage du contenu de secours. Si le travail asynchrone se termine avant le délai d’expiration, le contenu de secours n’apparaît jamais.

Cela évite l’apparition fugace d’un indicateur de chargement lorsque les réponses sont rapides.

<template>
  <!-- Only show fallback if loading exceeds 200ms -->
  <Suspense :timeout="200">
    <FastPanel />
    <template #fallback>Loading...</template>
  </Suspense>
</template>

Suspense avec le routeur et les transitions

Suspense se compose avec RouterView et Transition pour animer les changements de routes asynchrones. L’ordre est important : Transition englobe Suspense, qui englobe le composant associé à la route.

<template>
  <RouterView v-slot="{ Component }">
    <Transition mode="out-in">
      <Suspense>
        <component :is="Component" />
        <template #fallback>Loading page...</template>
      </Suspense>
    </Transition>
  </RouterView>
</template>

Quand ne pas utiliser Suspense

Évitez Suspense pour les données récupérées fréquemment alors que le composant reste monté : il ne gère que la résolution asynchrone initiale. Pour les états de chargement continus (pagination, nouvelle récupération), utilisez plutôt une référence réactive loading normale.

<script setup>
import { ref } from 'vue'
const loading = ref(false)
async function loadMore() {
  loading.value = true
  await fetchNextPage()
  loading.value = false
}
</script>

Vérification rapide

Testez votre compréhension de Suspense.

Récapitulatif

Vous avez appris comment Suspense coordonne les dépendances asynchrones :

  • l’emplacement default contient le contenu asynchrone (configuration asynchrone ou composants asynchrones)
  • l’emplacement fallback s’affiche pendant le chargement
  • il attend que tous les enfants asynchrones soient résolus avant d’afficher le contenu
  • les rejets remontent jusqu’à onErrorCaptured dans une barrière parente
  • timeout évite l’apparition fugace de l’indicateur de chargement ; des événements comme @resolve facilitent les analyses

Questions Fréquemment Posées

La leçon « Composant Vue Suspense » est-elle gratuite ?

Oui — le texte complet de « Composant Vue Suspense » est gratuit à lire ici sur le web. Pour la pratiquer de manière interactive (un éditeur de code intégré et un tuteur IA 24/7) et déverrouiller le reste du cours Vue Academy, passe à CoddyKit PRO. Le cours Vue Academy comprend 4 leçons au total.

Qu'est-ce que j'apprendrai dans « Composant Vue Suspense » ?

avec emplacements default et #fallback, chargement de composants asynchrones et Suspense imbriqué Tu pratiques Vue Academy avec du code pratique que tu exécutes directement dans le navigateur, et un tuteur IA 24/7 répond à tes questions au fur et à mesure que tu avances dans la leçon.

Dois-je avoir de l'expérience pour commencer Vue Academy ?

Aucune expérience préalable n'est requise. Vue Academy sur CoddyKit est structuré pour les débutants jusqu'aux apprenants avancés, donc tu peux commencer ici ou depuis le début et avancer à ton rythme. Ceci est la leçon 1 sur 4.

Combien de temps prend la leçon « Composant Vue Suspense » ?

La plupart des leçons CoddyKit prennent environ 5–10 minutes. Chacune est courte et interactive, tu progresses régulièrement et tu repiques exactement où tu t'es arrêté sur le web et l'app.

Peux-tu écrire et exécuter du code dans cette leçon Vue Academy ?

Oui. Chaque leçon Vue Academy inclut un éditeur de code intégré, tu écris et exécutes du vrai code directement dans ton navigateur et tu reçois des retours IA instantanés — aucune configuration locale requise.

Toutes les leçons de ce cours

  1. Composant Vue Suspense
  2. Composants asynchrones avec defineAsyncComponent
  3. SSR en flux avec renderToWebStream
  4. Stratégies d’hydratation différée
← Retour à Vue Academy