Перевод: Filip Rakowski — Suspense – new feature in Vue 3
Недавно я написал о новых функциях в Vue 3 где я кратко описал, какие функции мы можем ожидать в следующем крупном выпуске Vue.js.
В сегодняшней статье я хочу немного рассказать об одной из самых интересных — Suspense.
Эта статья основана на активных RFC и анализе репозитория vue-next. Нет никакой гарантии, что функции, упомянутые в этой статье, появятся в Vue 3 именно в описанной форме (но, скорее всего, они появятся).
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>
До сих пор мы рассмотрели, что происходит, когда асинхронные операции успешно выполняются, но что произойдет, если они вызовут ошибку?
К счастью, мы можем использовать новую ловушку жизненного цикла 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 компоненте.
Краткий перевод: https://vuejs.org/guide/components/v-model.html Основное использование v-model используется для реализации двусторонней привязки в компоненте. Начиная с Vue…
Сегодня мы рады объявить о выпуске Vue 3.4 «🏀 Slam Dunk»! Этот выпуск включает в…
Vue.js — это универсальный и адаптируемый фреймворк. Благодаря своей отличительной архитектуре и системе реактивности Vue…
Недавно, у меня истек сертификат и пришлось заказывать новый и затем устанавливать на хостинг с…
Каким бы ни было ваше мнение о JavaScript, но всем известно, что работа с датами…
Все, кто следит за последними событиями в мире адаптивного дизайна, согласятся, что введение контейнерных запросов…