Асинхронные компоненты и Suspense
Загружайте компоненты по требованию с помощью defineAsyncComponent, оборачивайте их в и показывайте резервное содержимое, пока загружается пакет компонента
«Асинхронные компоненты и Suspense» — бесплатный урок Frontend Academy на CoddyKit. Это урок 2 из 4. Ты можешь прочитать весь урок бесплатно ниже — а потом практиковать его прямо в браузере с встроенным редактором кода и ИИ-репетитором 24/7. Это часть пути обучения Frontend Academy, и твой прогресс синхронизируется между веб-версией и приложением CoddyKit. Курс Frontend Academy содержит 4 уроков всего.
Зачем нужны асинхронные компоненты
Загрузка крупных или редко используемых компонентов по требованию — например, панели администратора или библиотеки графиков — позволяет уменьшить начальный пакет. defineAsyncComponent во Vue управляет жизненным циклом динамического импорта.
defineAsyncComponent
Передайте функцию-загрузчик, которая возвращает промис с компонентом. Vue обрабатывает загрузку, ошибки и тайм-ауты.
import { defineAsyncComponent } from 'vue';
const Dashboard = defineAsyncComponent(
() => import('./Dashboard.vue')
);
// Use it like a normal component:
<template>
<Dashboard />
</template>Настройка асинхронного поведения
Передайте объект параметров, чтобы настроить интерфейс загрузки, интерфейс ошибки, задержку перед загрузкой и тайм-аут.
const Dashboard = defineAsyncComponent({
loader: () => import('./Dashboard.vue'),
loadingComponent: LoadingSpinner,
errorComponent: ErrorPanel,
delay: 200, // ms before showing loading
timeout: 5000 // ms before showing error
});Разделение пакета сборщиком
Динамический импорт становится отдельным фрагментом в выходных данных. Используйте специальные комментарии Vite/webpack для задания имени и предварительной загрузки.
const Dashboard = defineAsyncComponent(
() => import(/* webpackChunkName: 'dashboard' */ './Dashboard.vue')
);Отложенная загрузка на уровне маршрута
Vue Router напрямую поддерживает асинхронные компоненты в определениях маршрутов.
const routes = [
{ path: '/', component: () => import('./Home.vue') },
{ path: '/dashboard', component: () => import('./Dashboard.vue') },
{ path: '/admin', component: () => import('./Admin.vue') }
];Компонент Suspense
Экспериментальный компонент Vue <Suspense> отображает резервный интерфейс, пока любая асинхронная зависимость в его дереве ожидает завершения.
<template>
<Suspense>
<template #default>
<Dashboard />
</template>
<template #fallback>
<LoadingSpinner />
</template>
</Suspense>
</template>Асинхронный setup()
setup() может быть асинхронным — Vue ждёт его завершения перед рендерингом. Работает внутри 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 -->Обработка ошибок с onErrorCaptured
Используйте onErrorCaptured в родительском компоненте, чтобы перехватывать ошибки асинхронных компонентов или асинхронного setup.
import { onErrorCaptured } from 'vue';
onErrorCaptured((err, instance, info) => {
console.error('Caught:', err, info);
return false; // prevent propagation
});Объединение Suspense и границы обработки ошибок
Оберните дерево асинхронных компонентов одновременно в Suspense — для загрузки — и в предка, перехватывающего ошибки.
<template>
<ErrorBoundary>
<Suspense>
<template #default><Dashboard /></template>
<template #fallback><Spinner /></template>
</Suspense>
</ErrorBoundary>
</template>Suspense — экспериментальная возможность
В Vue 3.4 <Suspense> всё ещё помечен как экспериментальный — API может измениться. Сами асинхронные компоненты (defineAsyncComponent) стабильны и готовы для production.
Когда использовать асинхронные компоненты
Подходящие кандидаты: компоненты маршрутов, панели администратора и настроек, модальные окна, открываемые по требованию, тяжёлые графики и редакторы. Не используйте их для крошечных компонентов и компонентов, используемых на каждой странице: разделите их другим способом.
Проверьте себя
Какая функция Vue 3 превращает динамический импорт в компонент с отложенной загрузкой?
Итоги: асинхронные компоненты и Suspense
defineAsyncComponent оборачивает динамические импорты для отложенной загрузки. Настройте loadingComponent, errorComponent, delay и timeout. Сборщики создают отдельные фрагменты. Отложенная загрузка на уровне маршрута выполняется через component: () => import('...'). <Suspense> отображает резервный интерфейс, пока разрешаются асинхронные зависимости, но всё ещё является экспериментальным. Асинхронный setup() с await на верхнем уровне работает внутри Suspense. onErrorCaptured перехватывает асинхронные ошибки.
Часто задаваемые вопросы
Урок «Асинхронные компоненты и Suspense» бесплатный?
Да — полный текст урока «Асинхронные компоненты и Suspense» бесплатно доступен здесь в веб-версии. Чтобы практиковать его интерактивно (встроенный редактор кода и ИИ-репетитор 24/7) и разблокировать остальной курс Frontend Academy, подпишись на CoddyKit PRO. Курс Frontend Academy содержит 4 уроков всего.
Чему я научусь в уроке «Асинхронные компоненты и Suspense»?
Загружайте компоненты по требованию с помощью defineAsyncComponent, оборачивайте их в и показывайте резервное содержимое, пока загружается пакет компонента Ты практикуешь Frontend Academy с помощью реального кода, который запускаешь прямо в браузере, и ИИ-репетитор 24/7 отвечает на твои вопросы во время урока.
Нужен ли мне опыт, чтобы начать Frontend Academy?
Предыдущий опыт не требуется. Frontend Academy на CoddyKit структурирован для всех уровней — от новичков до продвинутых, поэтому ты можешь начать отсюда или с самого начала и учиться в своем темпе. Это урок 2 из 4.
Сколько времени занимает урок «Асинхронные компоненты и Suspense»?
Большинство уроков CoddyKit занимают около 5–10 минут. Каждый из них компактный и интерактивный, поэтому ты постоянно делаешь прогресс и продолжаешь с того же места в веб-версии и приложении.
Можно ли писать и запускать код в этом уроке Frontend Academy?
Да. Каждый урок Frontend Academy включает встроенный редактор кода, поэтому ты пишешь и запускаешь реальный код прямо в браузере и получаешь моментальную обратную связь от AI — локальная установка не требуется.
Все уроки этого курса
- provide() и inject() для внедрения зависимостей
- Асинхронные компоненты и Suspense
- Пользовательские директивы
- Система плагинов: app.use()