Vue 3 迁移策略笔记—— 第24节：Transition Group 不再需要设置根元素

前言

本笔记主要基于官方文档《迁移策略——Transition Group 根元素》汇总而来。如有理解出入，请以官方文档为主。建议您以官方文档为主，本文为辅。这样您可以“以自己为主”审视的阅读，从而不被我的观点带偏。

概述

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

Vue 2.x 的<transition-group>

Vue 2.x <transition-group> 跟自定义组件一样，需要一个根元素。我们可以通过tag prop 来进行手动设定。如果我们不进行手动的设定，Vue 会默认添加<span>作为根元素。

<template>
  <transition-group tag="ul">
    <li v-for="item in items" :key="item">
      {{ item }}
    </li>
  </transition-group>
</template>
<script>
export default {
  data() {
    return {
      items: [1, 2, 3],
    };
  },
};
</script>

需要注意：

根元素的添加只能通过 tag prop 添加。下面做法是无效的：

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

最终，Vue 还是会用一个<span>元素包裹<ul>

Vue 3.x <transition-group> 不再需要根元素

到了 Vue 3.x，Vue 不再需要添加根元素。但是我们仍可以通过tag prop 来进行手动设定根元素。只是如果我们不主动设置，Vue 不再会自动添加<span>根元素了。

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

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

---

本系列目录

• Vue 3 迁移策略笔记—— 第1节：v-for 中的 Ref 数组

• Vue 3 迁移策略笔记—— 第2节：Async Components 异步组件

• Vue 3 迁移策略笔记—— 第3节：Attribute Coercion Behavior （属性强制行为）

• Vue 3 迁移策略笔记——第4节：$attrs 包括class&style

• Vue 3 迁移策略笔记—— 第5节：移除 $children

• Vue 3 迁移策略笔记—— 第6节：自定义指令

• Vue 3 迁移策略笔记—— 第7节：自定义元素交互

• Vue 3 迁移策略笔记—— 第8节：Data 选项

• Vue 3 迁移策略笔记—— 第9节：新增 emits 选项

• Vue 3 迁移策略笔记—— 第10节：事件 API

• Vue 3 迁移策略笔记—— 第11节：移除过滤器

• Vue 3 迁移策略笔记—— 第12节：片段

• Vue 3 迁移策略笔记—— 第13节：函数式组件

• Vue 3 迁移策略笔记—— 第14节：全局 API

• Vue 3 迁移策略笔记—— 第15节：全局 API 的 tree shaking

• Vue 3 迁移策略笔记—— 第16节：Inline Template 属性

• Vue 3 迁移策略笔记—— 第17节：Key 属性

• Vue 3 迁移策略笔记—— 第18节：按键修饰符

• Vue 3 迁移策略笔记—— 第19节：移除 $listeners

• Vue 3 迁移策略笔记—— 第20节：Props 的默认值函数不能访问this

• Vue 3 迁移策略笔记—— 第21节：渲染函数 API

• Vue 3 迁移策略笔记—— 第22节：Slots 的统一

• Vue 3 迁移策略笔记—— 第23节：Transition Class 的变化

• Vue 3 迁移策略笔记—— 第24节：Transition Group 不再需要设置根元素

• Vue 3 迁移策略笔记—— 第25节：v-on.native修饰符被移除

• Vue 3 迁移策略笔记—— 第26节：在组件上使用 v-model 的变化

• Vue 3 迁移策略笔记—— 第27节：v-if 和 v-for 的优先级

• Vue 3 迁移策略笔记—— 第28节：v-bind 合并行为

• Vue 3 迁移策略笔记—— 第29节：数组的监听