过渡组根元素
重大变更

概述

<transition-group> 默认不再渲染根元素，但仍然可以使用 tag 属性创建根元素。

在 Vue 2 中，<transition-group> 与其他自定义组件一样，需要一个根元素，默认情况下是 <span>，但可以通过 tag 属性进行自定义。

html

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

在 Vue 3 中，我们有了片段支持，因此组件不再需要根节点。因此，<transition-group> 默认不再渲染根节点。

如果您已经在 Vue 2 代码中定义了 tag 属性，就像上面的示例一样，一切都会像以前一样工作。
如果您没有定义 tag 属性，并且您的样式或其他行为依赖于 <span> 根元素的存在才能正常工作，只需在 <transition-group> 中添加 tag="span"。

html

<transition-group tag="span">
  <!-- -->
</transition-group>