Teleport и Suspense: новые возможности Vue 3

1<template>
2  <button @click="showModal = true">Открыть модалку</button>
3  <Teleport to="body">
4    <div v-if="showModal" class="modal">
5      <p>Модальное окно</p>
6      <button @click="showModal = false">Закрыть</button>
7    </div>
8  </Teleport>
9</template>

1<!-- В body -->
2<Teleport to="body">...</Teleport>
3
4<!-- В конкретный элемент -->
5<div id="modal-container"></div>
6<Teleport to="#modal-container">...</Teleport>

1<Teleport to="body" :disabled="isMobile">
2  <!-- На десктопе — в body, на мобилке — на месте -->
3</Teleport>
4``>
5
6## Suspense: асинхронные компоненты
7
8### Что такое Suspense
9
10Suspense позволяет отображать загрузочный индикатор пока асинхронные компоненты не загрузятся.
11
12### Базовое использование

1
2### Асинхронный компонент

1
2## комбинирование Teleport и Suspense

1
2## Практические примеры
3
4### Модальное окно

1
2### Toast уведомления

1
2### Lazy загрузка

1
2## Обработка ошибок
3
4### ErrorCaptured

1
2## Паттерны использования
3
4### Dashboard с lazy loaded виджетами

1
2### Прогрессивная загрузка