Вбудовані компоненти ​

import { h, Transition } from 'vue'  h(Transition, {  /* реквізити */ })

<Transition> ​

Забезпечує анімовані ефекти переходу для окремого елемента або компонента.

• Реквізити

  ts

  interface TransitionProps {  /**  * Використовується для автоматичної генерації назв класів переходу CSS.  * напр. `name: 'fade'` буде автоматично розширено до `.fade-enter`,  * `.fade-enter-active`, тощо.  */  name?: string  /**  * Чи застосовувати класи переходу CSS.  * За промовчанням: true  */  css?: boolean  /**  * Визначає тип подій переходу, на які потрібно чекати щоб  * визначити час закінчення переходу.  * Тип за промовчанням автоматично визначає тип, який має  * більшу тривалість.  */  type?: 'transition' | 'animation'  /**  * Визначає явну тривалість переходу.  * За промовчанням чекає першої `transitionend`  * або `animationend` події на кореневому елементі переходу.  */  duration?: number | { enter: number; leave: number }  /**  * Контролює послідовність синхронізації переходів виходу/входу.  * Поведінка за промовчанням - одночасна.  */  mode?: 'in-out' | 'out-in' | 'default'  /**  * Чи застосовувати перехід під час початкового рендерингу.  * За промовчанням: false  */  appear?: boolean   /**  * Реквізити для налаштування перехідних класів.  * Використовуйте kebab-case в шаблонах, напр. enter-from-class="xxx"  */  enterFromClass?: string  enterActiveClass?: string  enterToClass?: string  appearFromClass?: string  appearActiveClass?: string  appearToClass?: string  leaveFromClass?: string  leaveActiveClass?: string  leaveToClass?: string }

• Події

  • @before-enter
  • @before-leave
  • @enter
  • @leave
  • @appear
  • @after-enter
  • @after-leave
  • @after-appear
  • @enter-cancelled
  • @leave-cancelled (тільки для v-show)
  • @appear-cancelled

• Приклад

  Простий елемент:

  template

  <Transition>  <div v-if="ok">вміст, що перемикається</div> </Transition>

  Примусовий перехід шляхом зміни атрибута key:

  template

  <Transition>  <div :key="text">{{ text }}</div> </Transition>

  Динамічний компонент з увімкненим режимом переходу + анімацією:

  template

  <Transition name="fade" mode="out-in" appear>  <component :is="view"></component> </Transition>

  Прослуховування перехідних подій:

  template

  <Transition @after-enter="onTransitionComplete">  <div v-show="ok">вміст, що перемикається</div> </Transition>

• Також до вашої уваги: Гід <Transition>

<TransitionGroup> ​

Забезпечує ефекти переходу для декількох елементів або компонентів у списку.

• Реквізити

  <TransitionGroup> приймає ті самі властивості, що і <Transition>, за винятком mode, а також дві додаткові властивості:

  ts

  interface TransitionGroupProps extends Omit<TransitionProps, 'mode'> {  /**  * Якщо не визначено, відрендериться як фрагмент.  */  tag?: string  /**  * Для налаштування класу CSS, застосованого під час переходів переміщення.  * Використовуйте kebab-case в шаблонах, напр. move-class="xxx"  */  moveClass?: string }

• Події

  <TransitionGroup> випромінює ті самі події, що <Transition>.

• Подробиці

  За промовчанням <TransitionGroup> не рендерить DOM-елемент обгортки, але його можна визначити за допомогою властивості tag.

  Зауважте, що кожен дочірній елемент у <transition-group> повинен мати унікальний ключ, щоб анімації працювали належним чином.

  <TransitionGroup> підтримує переходи з переміщеннями за допомогою CSS transform. Якщо позиція дочірнього елемента на екрані змінилася після оновлення, до нього буде застосовано CSS-клас переміщення (автоматично створений з атрибута name або налаштований за допомогою реквізиту move-class). Якщо при застосуванні CSS transform властивості можливе переміщення, елемент буде плавно анімовано до місця призначення за допомогою технології FLIP.

• Приклад

  template

  <TransitionGroup tag="ul" name="slide">  <li v-for="item in items" :key="item.id">  {{ item.text }}  </li> </TransitionGroup>

• Також до вашої уваги: Гід - TransitionGroup

<KeepAlive> ​

Кешування динамічно перемикаємих компонент, загорнутих всередину.

• Реквізити

  ts

  interface KeepAliveProps {  /**  * Тільки компоненти з іменами, що збігаються, з  * `include` будуть кешовані.  */  include?: MatchPattern  /**  * Будь-який компонент з відповідним ім'ям з `exclude`  * не буде кешовано.  */  exclude?: MatchPattern  /**  * Максимальна кількість екземплярів компонентів для кешування.  */  max?: number | string }  type MatchPattern = string | RegExp | (string | RegExp)[]

• Подробиці

  При обгортанні навколо динамічного компонента <KeepAlive> кешуватиме неактивні екземпляри компонентів, не знищуючи їх

  У будь-який час може бути лише один активний екземпляр компонента як прямий дочірній елемент <KeepAlive>.

  Коли компонент перемикається всередині <KeepAlive>, його хуки життєвого циклу activated та deactivated будуть викликані відповідно, надаючи альтернативу mounted і unmounted, які не викликаються. Це стосується прямого дочірнього елемента <KeepAlive>, а також усіх його нащадків.

• Приклад

  Базове використання:

  template

  <KeepAlive>  <component :is="view"></component> </KeepAlive>

  Якщо використовується з гілками v-if / v-else, одночасно повинен відтворюватися лише один компонент:

  template

  <KeepAlive>  <comp-a v-if="a > 1"></comp-a>  <comp-b v-else></comp-b> </KeepAlive>

  Використовується разом з <Transition>:

  template

  <Transition>  <KeepAlive>  <component :is="view"></component>  </KeepAlive> </Transition>

  Використання include / exclude:

  template

  <!-- рядок, розділений комами --> <KeepAlive include="a,b">  <component :is="view"></component> </KeepAlive>  <!-- regex (використання `v-bind`) --> <KeepAlive :include="/a|b/">  <component :is="view"></component> </KeepAlive>  <!-- Array (використання `v-bind`) --> <KeepAlive :include="['a', 'b']">  <component :is="view"></component> </KeepAlive>

  Використання з max:

  template

  <KeepAlive :max="10">  <component :is="view"></component> </KeepAlive>

• Також до вашої уваги: Гід - KeepAlive

<Teleport> ​

Рендеринг вмісту свого слота в іншій частині DOM.

• Реквізити

  ts

  interface TeleportProps {  /**  * Обов'язковий вхідний реквізит. Визначиний цільовий контейнер.  * Може бути селектором або фактичним елементом.  */  to: string | HTMLElement  /**  * Якщо `true`, вміст залишиться в оригінальному вигляді  * розташування замість переміщення в цільовий контейнер.  * Можна динамічно змінювати.  */  disabled?: boolean }

• Приклад

  Визначення цільового контейнера:

  template

  <Teleport to="#some-id" /> <Teleport to=".some-class" /> <Teleport to="[data-teleport]" />

  Умовне відключення:

  template

  <Teleport to="#popup" :disabled="displayVideoInline">  <video src="./my-movie.mp4"> </Teleport>

• Також до вашої уваги: Гід - Teleport

<Suspense> ​

Використовується для управління вкладених асинхронних залежностей у дереві компонентів.

• Реквізити

  ts

  interface SuspenseProps {  timeout?: string | number }

• Події

  • @resolve
  • @pending
  • @fallback

• Подробиці

  <Suspense> приймає два слоти: #default слот і #fallback слот. Він показуватиме вміст #fallback слота під час рендерингу слота за промовчанням у пам’яті.

  Якщо він зустрічає асинхронні залежності (Асинхронні компоненти й компоненти з async setup()) під час рендерингу слота за промовчанням, він чекатиме, доки всі вони будуть вирішені, перш ніж показати слот за промовчанням.

• Також до вашої уваги: Гід - Suspense