在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>
分类: vue3 快速上手 标签: 虚拟domdiffvue3Fragment片段多根单根

评论

暂无评论数据

暂无评论数据

目录