Приостановка компонентов - одна из хорошо известных функций Vue3.

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

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

К концу этой статьи вы должны знать:

  • Что такое Suspense-компоненты
  • Когда их использовать
  • Как их использовать

Хватит говорить! Приступим к кодированию.

Что вообще такое Suspense Components?

Приостановленные компоненты используются для отображения резервного содержимого при ожидании разрешения какого-либо асинхронного компонента.

Вы можете спросить: «Когда мы вообще будем использовать асинхронный компонент?»

Честно говоря, больше, чем вы думаете. Каждый раз, когда мы хотим, чтобы наш компонент ждал, пока он не получит данные (что обычно происходит при вызове асинхронного API), мы можем создать асинхронный компонент, используя Vue3 Composition API.

Вот несколько примеров, когда может быть полезен асинхронный компонент:

  • Отображение анимации загрузки перед загрузкой страницы
  • Отображение содержимого заполнителя
  • Обработка ленивых загруженных изображений

Раньше в Vue2 нам приходилось использовать условия (например, v-if или v-else), чтобы проверять, были ли загружены наши данные, и отображать резервный контент.

Но теперь Suspense встроен в Vue3, поэтому нам не нужно беспокоиться об отслеживании загрузки данных и рендеринге соответствующего контента.

Хорошо… так как же реализовать задержку?

В этом примере мы собираемся сказать, что у нас есть асинхронный ArticleInfo.vue компонент.

Поскольку в центре внимания этой статьи находится Suspense, а не Composition API, не будем вдаваться в сумасшедшие подробности о деталях. Если вас интересует более полное руководство по Composition API, У меня есть один здесь.

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

В нашем примере ArticleInfo будет иметь асинхронный setup метод, который загружает пользовательские данные перед возвратом.

async function getArticleInfo() {
  // some asynchronous API call
  return { article }
}

export default {
  async setup () {
    var { article } = await getArticleInfo()

    return {
      article
    }
  }
}

Затем, допустим, у нас есть ArticlePost.vue component, который содержит наш компонент ArticleInfo.

Если мы хотим отобразить что-то вроде «Загрузка профиля…», ожидая, пока наш компонент получит данные и обработает их, мы можем реализовать приостановку всего за три шага.

  1. Оберните наш асинхронный компонент в тег <template #default>
  2. Добавьте родственника прямо рядом с нашим асинхронным компонентом с тегом <template #fallback>
  3. Оберните оба компонента в <suspense> компонент

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

Это выглядело бы примерно так.

<Suspense>
      <template #default>
        <article-info/>
      </template>
      <template #fallback>
        <div>Loading Profile...</div>
      </template>
</Suspense>

Вы также можете отловить ошибки компонентов

Еще одна интересная особенность Vue, особенно когда мы начинаем использовать асинхронные компоненты, заключается в том, что мы можем отлавливать ошибки и фактически показывать пользователю сообщение об ошибке.

Даже в Vue2 это было возможно с помощью хука errorCaptured, но в Vue3 он был переименован в onErrorCaptured.

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

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

<template>
  <div v-if="errMsg"> {{ errMsg }} </div>
  <Suspense v-else>
      <template #default>
        <article-info/>
      </template>
      <template #fallback>
        <div>Loading Profile...</div>
      </template>
  </Suspense>
</template>

<script>
import { onErrorCaptured } from 'vue'

setup () {
  const errMsg = ref(null)
  onErrorCaptured(e => {
    errMsg.value = 'Uh oh. Something went wrong!'
    return true
  })}
  return { error }
</script>

Вот и все!

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

На мой взгляд, это одно из лучших дополнений к Vue3.

Теперь вы должны немного больше познакомиться с компонентами Suspense в Vue и придумали несколько интересных способов их внедрения в свои проекты!

Если вы хотите узнать больше о создании своего первого проекта Vue3, ознакомьтесь с этим подробным руководством по настройке вашего проекта и начните работать с Composition API.

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

Первоначально опубликовано на https://learnvue.co 22 января 2020 г.