# Корневой элемент <transition-group> больше не создаётся
кардинальное изменение

# Обзор

Теперь <transition-group> по умолчанию больше не создаёт корневой элемент при отрисовке, но может его создавать при указании входного параметра tag.

# Синтаксис в 2.x

Во Vue 2, <transition-group> какие и другие пользовательские компоненты, нуждался в корневом элементе, который по умолчанию был <span>, но настраивался через входной параметр tag.

<transition-group tag="ul">
  <li v-for="item in items" :key="item">
    {{ item }}
  </li>
</transition-group>
1
2
3
4
5

# Синтаксис в 3.x

Во Vue 3 теперь появилась поддержка фрагментов, поэтому корневой тег больше не нужен компонентам. Поэтому по умолчанию <transition-group> и не отрисовывает его.

  • Если уже указан входной параметр tag в коде Vue 2, как в примере выше, то всё будет работать как и раньше
  • Если входной параметр не указывался и стилизация или другое поведение полагается на наличие корневого элемента <span>, то добавьте tag="span" в <transition-group>:
<transition-group tag="span">
  <!-- -->
</transition-group>
1
2
3

# Стратегия миграции

Флаг сборки для миграции: TRANSITION_GROUP_ROOT

# См. также