Suspense— это встроенный компонент для организации асинхронных зависимостей в дереве компонентов. Он может отображать состояние загрузки, ожидая разрешения нескольких вложенных асинхронных зависимостей в дереве компонентов.

Чтобы объяснить проблему Suspense, которую пытаются решить, и то, как она взаимодействует с этими асинхронными зависимостями, давайте представим себе иерархию компонентов, подобную следующей

В дереве компонентов имеется несколько вложенных компонентов, отрисовка которых зависит от некоторого асинхронного ресурса, который необходимо разрешить в первую очередь. Без Suspense, каждый из них должен будет обрабатывать свою собственную загрузку/ошибку и загруженные состояния. В худшем случае мы можем увидеть на странице три индикатора загрузки, контент которых отображается в разное время.

Компонент Suspense дает нам возможность отображать состояния загрузки/ошибки верхнего уровня, пока мы ждем разрешения этих вложенных асинхронных зависимостей.

Хук компонента Composition API setup() может быть асинхронным

При использовании script setup наличие await выражений верхнего уровня автоматически делает компонент асинхронной зависимостью

Асинхронные компоненты по умолчанию «приостанавливаются» . Это означает, что если у него есть Suspenseв родительской цепочке, он будет рассматриваться как асинхронная зависимость этого Suspense. В этом случае состояние загрузки будет контролироваться Suspense, а собственные параметры загрузки, ошибок, задержки и тайм-аута компонента будут игнорироваться.

Асинхронный компонент может отказаться от Suspense управления и позволить компоненту всегда контролировать свое собственное состояние загрузки, указав suspensible: false в своих параметрах.

Компонент Suspense имеет два слота: #default и #fallback. Оба слота допускают только один непосредственный дочерний узел. Узел в слоте по умолчанию отображается, если это возможно. В противном случае вместо него будет показан узел в резервном слоте.

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

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

Находясь в разрешенном состоянии, Suspense он вернется в состояние ожидания только в том случае, если корневой узел слота #default будет заменен. Новые асинхронные зависимости, вложенные глубже в дерево, не приведут Suspense к возврату в состояние ожидания.

При возврате резервный контент не будет отображаться сразу. Вместо этого Suspense будет отображаться предыдущий #default контент, ожидая разрешения нового контента и его асинхронных зависимостей. Это поведение можно настроить с помощью timeout свойства: Suspense переключится на резервный контент, если это займет больше времени, чем timeout отрисовка нового контента по умолчанию. Значение приведет timeout к 0 немедленному отображению резервного содержимого при замене содержимого по умолчанию.

Компонент Suspenseгенерирует 3 события: pending, resolveи fallback. Событие pending происходит при переходе в состояние ожидания. Событие resolve генерируется, когда новый контент завершил разрешение в default слоте. Событие вызывается, когда отображается fallback содержимое слота .fallback

События можно использовать, например, для отображения индикатора загрузки перед старым DOM во время загрузки новых компонентов.

Suspenseв настоящее время не обеспечивает обработку ошибок через сам компонент, однако вы можете использовать эту errorCapturedопцию или onErrorCaptured() перехватчик для захвата и обработки асинхронных ошибок в родительском компоненте Suspense

Обычно требуется использовать Suspense в сочетании с компонентами Transition и KeepAlive. Порядок вложения этих компонентов важен для правильной работы всех них.

Кроме того, эти компоненты часто используются совместно с RouterView компонентом из Vue Router

В следующем примере показано, как вложить эти компоненты, чтобы все они работали должным образом. Для более простых комбинаций вы можете удалить ненужные компоненты:

Vue Router имеет встроенную поддержку ленивой загрузки компонентов с использованием динамического импорта. Они отличаются от асинхронных компонентов и в настоящее время не срабатывают Suspense. Однако они по-прежнему могут иметь асинхронные компоненты в качестве потомков, и они могут запускаться Suspense обычным способом.