Vue3 Fragment（碎片化节点）

在 vue2.x 中，每个组件只能有一个根，所以，写每个组件模板时都要套一个父元素。

在 vue3 中，为了更方便的书写组件模板，新增了一个类似 dom 的标签元素 <Fragment></Fragment>，也就是 vue3 中组件可以拥有多个根了。

这样做的好处在于：减少标签层级, 减小内存占用。

<template>
  <div>
    <h1>Fragments,碎片化节点</h1>
  </div>
  <div>
    <h2>Fragments，碎片化节点</h2>
  </div>
  <h3>Fragments，碎片化节点</h3>
</template>

页面效果：

如果在 vue 页面中有多个元素节点，那么编译时 vue 会在这些元素节点上添加一个 <Fragment></Fragment> 标签，并且该标签不会出现在 dom 树中。