В больших приложениях нам может потребоваться разделить приложение на более мелкие части и загружать компонент с сервера только тогда, когда это необходимо. Чтобы сделать это возможным, во Vue есть defineAsyncComponent функция:

Как видите, defineAsyncComponent принимает функцию-загрузчик, возвращающую обещание. Обратный вызов Promise resolve должен вызываться, когда вы получили определение компонента с сервера. Вы также можете позвонить reject(reason) и сообщить, что загрузка не удалась.

Динамический импорт модуля ES также возвращает Promise, поэтому большую часть времени мы будем использовать его в сочетании с defineAsyncComponent. Бандлеры, такие как Vite и webpack, также поддерживают синтаксис (и будут использовать его в качестве точек разделения пакета), поэтому мы можем использовать его для импорта Vue SFC:

В результате AsyncComp получается компонент-оболочка, который вызывает функцию загрузчика только тогда, когда она фактически отображается на странице. Кроме того, он передаст все реквизиты и слоты внутреннему компоненту, поэтому вы можете использовать асинхронную оболочку для плавной замены исходного компонента, обеспечивая при этом отложенную загрузку.

Как и обычные компоненты, асинхронные компоненты можно зарегистрировать глобально , используя app.component()

Их также можно определить непосредственно внутри родительского компонента

Асинхронные операции неизбежно включают состояния загрузки и ошибки — defineAsyncComponent() обработка этих состояний поддерживается с помощью дополнительных параметров:

Если указан загрузочный компонент, он будет отображаться первым во время загрузки внутреннего компонента. По умолчанию перед отображением компонента загрузки существует задержка в 200 мс — это связано с тем, что в быстрых сетях состояние мгновенной загрузки может смениться слишком быстро и в конечном итоге выглядеть как мерцание.

Если предоставлен компонент ошибки, он будет отображаться, когда обещание, возвращаемое функцией загрузчика, будет отклонено. Вы также можете указать тайм-аут, чтобы отобразить компонент ошибки, когда запрос выполняется слишком долго.

Асинхронные компоненты можно использовать со Suspense встроенным компонентом. Взаимодействие между Suspense асинхронными компонентами описано в специальной главе, посвященной Suspense