Что такое компонент Suspense в Vue?

Question

Accepted Answer

`` — это встроенный компонент, который координирует **async dependencies** в дереве компонентов — он показывает fallback (loading UI) до тех пор, пока все вложенные асинхронные операции не разрешатся, а затем отображает реальное содержимое. Он устраняет ручной boilerplate `isLoading`. ## Два слота ```vue ``` ## Работает с async setup() / top-level await ```vue ``` Обычно компонент не может `await` в setup без управления состоянием загрузки. `` позволяет дочернему компоненту использовать **top-level `await`** (или async `setup`), а родительский Suspense управляет состоянием загрузки для него — код дочернего компонента остаётся чистым, просто `await` его данные. ## Ожидает ВСЕ вложенные async dependencies ```text waits for every async setup in its subtree to resolve, then swaps the fallback for the real content in one go (avoids a cascade of separate spinners). ``` ## Обработка ошибок ```vue ``` Сочетайте Suspense с граница обработки ошибок (`onErrorCaptured`) для обработки неудачных асинхронных setups, поскольку сам Suspense управляет только переходом loading/loaded. ## Примечание о статусе ```text has been an EXPERIMENTAL feature — its API may change. It's also what Nuxt uses internally to coordinate async page data. ``` ## Почему это важно `` декларативно координирует состояния асинхронной загрузки — позволяя компонентам непосредственно `await` свои данные, в то время как единственный предок показывает один fallback до тех пор, пока всё не будет готово. Он устраняет рассеянные флаги `isLoading` и несколько spinners, и лежит в основе выборки данных в фреймворках, таких как Nuxt. Знание о его существовании (и того, что он всё ещё экспериментальный, лучше всего используется с границей обработки ошибок) полезно для чистого асинхронного UI, особенно в приложениях SSR/data-heavy.