0Pricing
Frontend Academy · Lekcja

Komponenty asynchroniczne i Suspense

Wczyta Pan/Pani komponenty leniwie za pomocą defineAsyncComponent, opakuje je w i wyświetli treść zastępczą podczas wczytywania paczki komponentu.

Komponenty asynchroniczne i Suspense to bezpłatna lekcja Frontend Academy na CoddyKit. To lekcja 2 z 4. Możesz przeczytać całą lekcję poniżej za darmo — a potem ćwiczyć ją interaktywnie w przeglądarce z wbudowanym edytorem kodu i tutorem AI dostępnym 24/7. To część ścieżki edukacyjnej Frontend Academy, a Twój postęp synchronizuje się między webem a aplikacją CoddyKit. Kurs Frontend Academy zawiera 4 lekcji w sumie.

Dlaczego warto używać komponentów asynchronicznych?

Ładowanie na żądanie dużych lub rzadko używanych komponentów (np. panelu administracyjnego albo biblioteki wykresów) pozwala zachować mały początkowy pakiet. Vue obsługuje cykl życia dynamicznego importu za pomocą defineAsyncComponent.

defineAsyncComponent

Należy przekazać funkcję loader, która zwraca promise rozstrzygany do komponentu. Vue obsługuje ładowanie, błędy i limity czasu.

import { defineAsyncComponent } from 'vue';

const Dashboard = defineAsyncComponent(
  () => import('./Dashboard.vue')
);

// Use it like a normal component:
<template>
  <Dashboard />
</template>

Konfigurowanie zachowania asynchronicznego

Należy przekazać obiekt opcji, aby dostosować interfejs ładowania, interfejs błędu, opóźnienie przed rozpoczęciem ładowania oraz limit czasu.

const Dashboard = defineAsyncComponent({
  loader: () => import('./Dashboard.vue'),
  loadingComponent: LoadingSpinner,
  errorComponent: ErrorPanel,
  delay: 200,    // ms before showing loading
  timeout: 5000  // ms before showing error
});

Dzielenie pakietu na fragmenty przez bundler

Dynamiczny import staje się osobnym fragmentem w wynikowym pakiecie. Do nadawania nazw i wstępnego pobierania należy używać komentarzy magicznych Vite/webpack.

const Dashboard = defineAsyncComponent(
  () => import(/* webpackChunkName: 'dashboard' */ './Dashboard.vue')
);

Leniwe ładowanie na poziomie trasy

Vue Router obsługuje komponenty asynchroniczne bezpośrednio w definicjach tras.

const routes = [
  { path: '/',          component: () => import('./Home.vue') },
  { path: '/dashboard', component: () => import('./Dashboard.vue') },
  { path: '/admin',     component: () => import('./Admin.vue') }
];

Komponent Suspense

Eksperymentalny komponent Vue <Suspense> renderuje widok zastępczy, gdy dowolna asynchroniczna zależność w jego poddrzewie oczekuje na rozwiązanie.

<template>
  <Suspense>
    <template #default>
      <Dashboard />
    </template>
    <template #fallback>
      <LoadingSpinner />
    </template>
  </Suspense>
</template>

Asynchroniczny setup()

setup() może być asynchroniczne — Vue czeka na jej zakończenie przed renderowaniem. Działa wewnątrz Suspense.

<!-- AsyncPage.vue -->
<script setup>
import { useUserStore } from '@/stores/user';

const userStore = useUserStore();
await userStore.fetchProfile(); // top-level await
</script>

<!-- Parent uses Suspense to handle the await -->

Obsługa błędów za pomocą onErrorCaptured

Należy użyć onErrorCaptured w komponencie nadrzędnym, aby przechwytywać błędy z komponentów asynchronicznych lub asynchronicznego setup.

import { onErrorCaptured } from 'vue';

onErrorCaptured((err, instance, info) => {
  console.error('Caught:', err, info);
  return false; // prevent propagation
});

Łączenie Suspense z granicą błędów

Drzewo komponentów asynchronicznych należy opakować zarówno w Suspense (na potrzeby ładowania), jak i w przodka przechwytującego błędy.

<template>
  <ErrorBoundary>
    <Suspense>
      <template #default><Dashboard /></template>
      <template #fallback><Spinner /></template>
    </Suspense>
  </ErrorBoundary>
</template>

Suspense jest eksperymentalny

W wersji Vue 3.4 <Suspense> nadal jest oznaczony jako eksperymentalny — interfejs API może ulec zmianie. Same komponenty asynchroniczne (defineAsyncComponent) są stabilne i gotowe do użycia na produkcji.

Kiedy używać komponentów asynchronicznych

Dobrymi kandydatami są: komponenty tras, panele administracyjne i ustawień, modale otwierane na żądanie oraz ciężkie wykresy i edytory. Nie należy ich stosować w przypadku: małych komponentów ani komponentów używanych na każdej stronie (należy podzielić je w inny sposób).

Szybkie sprawdzenie

Jaka funkcja Vue 3 przekształca dynamiczny import w komponent ładowany leniwie?

Podsumowanie: komponenty asynchroniczne i Suspense

defineAsyncComponent opakowuje dynamiczne importy na potrzeby leniwego ładowania. Można skonfigurować loadingComponent, errorComponent, delay i timeout. Bundlery generują osobne fragmenty. Leniwe ładowanie na poziomie trasy odbywa się za pomocą component: () => import('...'). <Suspense> renderuje widok zastępczy, gdy rozwiązywane są asynchroniczne zależności (nadal jest eksperymentalny). Asynchroniczny setup() z await na najwyższym poziomie działa wewnątrz Suspense. onErrorCaptured przechwytuje błędy asynchroniczne.

Często zadawane pytania

Czy lekcja „Komponenty asynchroniczne i Suspense” jest bezpłatna?

Tak — pełny tekst „Komponenty asynchroniczne i Suspense” jest dostępny za darmo tutaj w sieci. Aby ćwiczyć ją interaktywnie (wbudowany edytor kodu i tutor AI dostępny 24/7) i odblokować resztę kursu Frontend Academy, przejdź na CoddyKit PRO. Kurs Frontend Academy zawiera 4 lekcji w sumie.

Co nauczysz się w „Komponenty asynchroniczne i Suspense”?

Wczyta Pan/Pani komponenty leniwie za pomocą defineAsyncComponent, opakuje je w i wyświetli treść zastępczą podczas wczytywania paczki komponentu. Ćwiczysz Frontend Academy z praktycznym kodem, który uruchamiasz bezpośrednio w przeglądarce, a tutor AI dostępny 24/7 odpowiada na Twoje pytania podczas pracy nad lekcją.

Czy potrzebuję doświadczenia, aby zacząć Frontend Academy?

Nie wymagamy żadnego doświadczenia. Frontend Academy w CoddyKit jest strukturyzowany dla początkujących i zaawansowanych użytkowników, więc możesz zacząć tutaj lub od początku i uczyć się w swoim tempie. To lekcja 2 z 4.

Ile czasu zajmuje lekcja „Komponenty asynchroniczne i Suspense”?

Większość lekcji CoddyKit trwa około 5–10 minut. Każda lekcja to mały, interaktywny krok, dzięki czemu robisz systematyczne postępy i zawsze wracasz dokładnie do tego samego miejsca — na webie i w aplikacji.

Czy mogę pisać i uruchamiać kod w tej lekcji Frontend Academy?

Tak. Każda lekcja Frontend Academy zawiera wbudowany edytor kodu, więc piszesz i uruchamiasz prawdziwy kod bezpośrednio w przeglądarce i od razu otrzymujesz sprzężenie zwrotne od AI — bez konfiguracji na komputerze.

Wszystkie lekcje w tym kursie

  1. provide() i inject() do wstrzykiwania zależności
  2. Komponenty asynchroniczne i Suspense
  3. Własne dyrektywy
  4. System wtyczek: app.use()
← Powrót do Frontend Academy