vue3 Fragment 片段

在vue2的时候，我们在编写组件时往往是需要提供一个根元素的，这个根元素会作为虚拟dom的差异算法依赖，但是有的时候往往会带来一些很难受的体验，比如会带来很多的无必要的元素嵌套，常见的嵌套应该就是div了，如果你曾经尝试写过递归一个导航组件的话。

这个问题其实在react中也出现过，所以它在v16版本中提供了Fragments功能，它会将多个根元素的内容包裹在一个名为React.Fragment的元素下，这样就不需要多余的“根元素”；为此它还得在渲染时进行特殊处理，所以当时业界吹了一把react牛逼，重写了虚拟dom算法。

在vue2阶段，我个人也尝试了好多办法，包括尝试使用这种方式：

<>        
  <td>Hello</td>   
  <td>World</td>
</>

以及使用jsx的方式和函数式组件+jsx！

但是它们最终都会死在渲染层，因为根本就不支持这么干，非常可惜。

那么怎么办呢？

既然底层我们绕不过去，那就只能处理渲染后的内容了，也就是说，我们可以在元素渲染后操作dom来进行处理，比如自定义指令或者自定义组件的方式。

自己写当然很麻烦啦，这里推荐一个插件：vue-fragment

vue3其实也是借鉴了react的这个功能，所以你会发现名字也叫Fragment；用法就不多介绍了

<template>
  <div>1</div>
  <div>2</div>
  <div>3</div>
</template>