Suspense — новая функция в Vue 3

Перевод: Filip Rakowski — Suspense – new feature in Vue 3

Недавно я написал о новых функциях в Vue 3 где я кратко описал, какие функции мы можем ожидать в следующем крупном выпуске Vue.js.

В сегодняшней статье я хочу немного рассказать об одной из самых интересных — Suspense.

Эта статья основана на активных RFC и анализе репозитория vue-next. Нет никакой гарантии, что функции, упомянутые в этой статье, появятся в Vue 3 именно в описанной форме (но, скорее всего, они появятся).

Что такое Suspense?

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

Если этот звук звучит непонятно для вас, не бойтесь. Вскоре я расскажу подробнее об этом.

В Vue 3 Composition API представлен новый метод setup , который позволяет подключаться к различным свойствам компонентов с помощью таких функций, как computed () или onMounted (). Свойства, возвращаемые методом setup , доступны в шаблоне Vue точно так же, как data, methods и computed свойства доступны прямо сейчас в Vue 2 Options API .

<template>
  <div> 
    Clicked <b>{{ count }}</b> times. 
    <button @click="increment">Increment</button>
  </div>
</template>

<script>
import { ref } from 'vue'

export default {
  setup () {
    const count = ref(0)
    function increment () {
      count.value++
    }    

    return { 
      count,
      increment
    }
}
</script>    

Иногда вам может потребоваться выполнить асинхронные операции в методе setup , такие как выборка данных из внешних API-интерфейсов (аналогично тому, что в настоящее время выполняется в хуке жизненного цикла created .

export default {
  async setup () {
    const user = await fetchUser()
    return { user }    
  }
}

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

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

<Suspense>
  <template #default>
    <UserProfile />
  </template>
  <template #fallback>
    <div>Loading...</div>
  </template>
</Suspense>

Очень элегантно, не правда ли? Мы также можем приостановить загрузку компонентов для нескольких асинхронных компонентов.

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

<Suspense>
  <template #default>
    <UserProfile />
    <FunnyCats /> 
  </template>
  <template #fallback>
    <div>Loading...</div>
  </template>
</Suspense>

Обработка Error

До сих пор мы рассмотрели, что происходит, когда асинхронные операции успешно выполняются, но что произойдет, если они вызовут ошибку?

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

<template>
  <div v-if="error">
   {{ error }}
  </div>
  <Suspense v-else>
    <template #default>
      <UserProfile />
    </template>
    <template #fallback>
      <div>Loading...</div>
    </template>
  </Suspense>
</template>

<script>
import { onErrorCaptured } from 'vue'

setup () {
  const error = ref(null)
  onErrorCaptured(e => {
    error.value = e
    return true
  })}
  return { error }
</script>

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

Заключение

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