**Как компонент становится асинхронным:** ```vue ``` Vue компилирует top-level `await` в `async setup()`. Этот компонент не рендерится, пока оба fetch не завершатся. **Suspense оборачивает асинхронные компоненты:** ```vue ``` **Несколько async-компонентов -- Suspense ждёт ВСЕ:** ```vue ``` **Обработка ошибок в Suspense:** ```vue ``` **Suspense события:** ```vue ``` **Suspense + Vue Router:** ```javascript // router.js const routes = [ { path: '/dashboard', component: () => import('./pages/Dashboard.vue'), // Dashboard.vue содержит async setup }, ] ``` ```vue ``` --- ## Реальные кейсы - **Dashboard с async data**: вместо спиннера внутри каждого виджета, показываем один skeleton для всего дашборда. Когда все виджеты готовы -- всё появляется одновременно. Выглядит чище, чем "прыгающий" контент. - **Route-level Suspense**: обернул `` в Suspense. Все страницы с async setup автоматически показывают лоадер при переходе. --- ## Частые ошибки ```vue ``` ```vue ``` --- ## Резюме - `` ждёт завершения async setup() дочерних компонентов - Top-level `await` в `

{{ user.name }}

Как работает Suspense с async setup() в Vue 3?