Asynkroniset komponentit ja Suspense
Lataa komponentteja laiskasti defineAsyncComponent-funktiolla, kääri ne -komponenttiin ja näytä varasisältöä komponenttipaketin latautuessa.
Asynkroniset komponentit ja Suspense on ilmainen Frontend Academy-oppitunti CoddyKitissä. Tämä on oppitunti 2/4. Voit lukea koko oppitunnin alta ilmaiseksi ja harjoitella sen jälkeen käytännössä selaimessa sisäänrakennetulla koodieditorilla ja ympäri vuorokauden käytettävissä olevan tekoälytuutorin avulla. Oppitunti kuuluu Frontend Academy-oppimispolkuun, ja edistymisesi synkronoituu verkon ja CoddyKit-sovelluksen välillä. Frontend Academy-kurssilla on yhteensä 4 oppituntia.
Miksi asynkronisia komponentteja?
Suurten tai harvoin käytettyjen komponenttien lataaminen tarvittaessa, esimerkiksi hallintapaneelia tai kaaviokirjastoa varten, pitää aloitusbundlen pienenä. Vuen defineAsyncComponent hoitaa dynaamisen importin elinkaaren.
defineAsyncComponent
Välittäkää lataajafunktio, joka palauttaa komponentiksi ratkaistuvan promisen. Vue käsittelee lataamisen, virheet ja aikakatkaisut.
import { defineAsyncComponent } from 'vue';
const Dashboard = defineAsyncComponent(
() => import('./Dashboard.vue')
);
// Use it like a normal component:
<template>
<Dashboard />
</template>Asynkronisen toiminnan määrittäminen
Välittäkää asetusobjekti, jolla voitte mukauttaa latausnäkymää, virhenäkymää, latausta edeltävää viivettä ja aikakatkaisua.
const Dashboard = defineAsyncComponent({
loader: () => import('./Dashboard.vue'),
loadingComponent: LoadingSpinner,
errorComponent: ErrorPanel,
delay: 200, // ms before showing loading
timeout: 5000 // ms before showing error
});Bundlerin chunk-jako
Dynaamisesta importista tulee tulosteessa erillinen chunk. Käyttäkää Viten tai webpackin magic comment -kommentteja nimeämiseen ja esilataukseen.
const Dashboard = defineAsyncComponent(
() => import(/* webpackChunkName: 'dashboard' */ './Dashboard.vue')
);Reittikohtainen lazy loading
Vue Router tukee asynkronisia komponentteja suoraan reittimäärityksissä.
const routes = [
{ path: '/', component: () => import('./Home.vue') },
{ path: '/dashboard', component: () => import('./Dashboard.vue') },
{ path: '/admin', component: () => import('./Admin.vue') }
];Suspense-komponentti
Vuen kokeellinen <Suspense> näyttää fallback-näkymän, kun mikä tahansa sen komponenttipuun asynkroninen riippuvuus on vielä odottamassa.
<template>
<Suspense>
<template #default>
<Dashboard />
</template>
<template #fallback>
<LoadingSpinner />
</template>
</Suspense>
</template>Async setup()
setup() voi olla asynkroninen — Vue odottaa sen valmistumista ennen renderöintiä. Toimii Suspensen sisällä.
<!-- 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 -->Virheiden käsittely onErrorCaptured-toiminnolla
Käyttäkää onErrorCaptured-toimintoa ylemmän tason komponentissa, jotta voitte ottaa kiinni asynkronisten komponenttien tai asynkronisen setupin virheet.
import { onErrorCaptured } from 'vue';
onErrorCaptured((err, instance, info) => {
console.error('Caught:', err, info);
return false; // prevent propagation
});Suspensen ja virherajan yhdistäminen
Käärikää asynkroninen komponenttipuu sekä Suspense-komponentin että virheitä käsittelevän esivanhemman sisään.
<template>
<ErrorBoundary>
<Suspense>
<template #default><Dashboard /></template>
<template #fallback><Spinner /></template>
</Suspense>
</ErrorBoundary>
</template>Suspense on kokeellinen
Vue 3.4:stä lähtien <Suspense> on edelleen merkitty kokeelliseksi — rajapinta voi muuttua. Asynkroniset komponentit itsessään (defineAsyncComponent) ovat vakaita ja valmiita tuotantokäyttöön.
Milloin asynkronisia komponentteja kannattaa käyttää
Hyviä kohteita ovat reittikomponentit, hallinta- ja asetuspaneelit, tarvittaessa avattavat modaalit sekä raskaat kaaviot ja editorit. Välttäkää niitä pienten komponenttien kohdalla ja komponenteissa, joita käytetään jokaisella sivulla — jakakaa nämä toisella tavalla.
Pikatarkistus
Mikä Vue 3 -funktio muuttaa dynaamisen importin lazy loading -komponentiksi?
Kertaus: asynkroniset komponentit ja Suspense
defineAsyncComponent kietoo dynaamiset importit lazy loadingia varten. Määritelkää asetukset loadingComponent, errorComponent, delay ja timeout. Bundlerit tuottavat erillisiä chunkeja. Reittikohtainen lazy loading käyttämällä muotoa component: () => import('...'). <Suspense> näyttää fallback-näkymän asynkronisten riippuvuuksien ratketessa (se on edelleen kokeellinen). Asynkroninen setup() top-level await -toiminnolla toimii Suspensen sisällä. onErrorCaptured ottaa kiinni asynkroniset virheet.
Opi HTML tekoälytuutorin avulla — ilmaiseksi
Kirjoita ja suorita oikeaa koodia selaimessa, saa välitöntä apua tekoälytuutorilta ympäri vuorokauden ja jatka siitä, mihin jäit, verkossa tai sovelluksessa.
- Kurssit
- 41
- Oppitunnit
- 163
Usein kysytyt kysymykset
Onko oppitunti ”Asynkroniset komponentit ja Suspense” ilmainen?
Kyllä – oppitunnin ”Asynkroniset komponentit ja Suspense” koko tekstin voi lukea täällä verkossa ilmaiseksi. Jos haluat harjoitella interaktiivisesti sisäänrakennetulla koodieditorilla ja ympäri vuorokauden käytettävissä olevan tekoälytuutorin avulla sekä avata koko Frontend Academy-kurssin, päivitä CoddyKit PROhon. Frontend Academy-kurssilla on yhteensä 4 oppituntia.
Mitä opin oppitunnilla ”Asynkroniset komponentit ja Suspense”?
Lataa komponentteja laiskasti defineAsyncComponent-funktiolla, kääri ne -komponenttiin ja näytä varasisältöä komponenttipaketin latautuessa. Harjoittelet Frontend Academy-aihetta koodilla, jonka suoritat suoraan selaimessa. Ympäri vuorokauden käytettävissä oleva tekoälytuutori vastaa kysymyksiisi oppitunnin aikana.
Tarvitsenko kokemusta aloittaakseni Frontend Academy-opiskelun?
Aiempi kokemus ei ole tarpeen. CoddyKitin Frontend Academy-oppimispolku sopii vasta-alkajista edistyneisiin, joten voit aloittaa tästä tai alusta ja edetä omaan tahtiisi. Tämä on oppitunti 2/4.
Kuinka kauan ”Asynkroniset komponentit ja Suspense”-oppitunnin suorittaminen kestää?
Useimmat CoddyKitin oppitunnit kestävät noin 5–10 minuuttia. Jokainen oppitunti on lyhyt ja interaktiivinen, joten edistyt tasaisesti ja voit jatkaa siitä, mihin jäit – sekä verkossa että sovelluksessa.
Voinko kirjoittaa ja suorittaa koodia tällä Frontend Academy-oppitunnilla?
Kyllä. Jokainen Frontend Academy-oppitunti sisältää sisäänrakennetun koodieditorin, joten voit kirjoittaa ja suorittaa oikeaa koodia suoraan selaimessa ja saada välitöntä palautetta tekoälyltä – paikallista asennusta ei tarvita.
Kaikki tämän kurssin oppitunnit
- provide() ja inject() riippuvuuksien injektointiin
- Asynkroniset komponentit ja Suspense
- Mukautetut direktiivit
- Laajennusjärjestelmä: app.use()