为何在Vue3+Vite下，<template>可以有多个根元素？

Question

我尝试了一下 Vue3 + Vite，新建项目之后自带的 Demo 中有以下内容：

<template>
  <img alt="Vue logo" src="./assets/logo.png" />
  <HelloWorld msg="Hello Vue 3.0 + Vite" />
</template>

ESLint 有以下报错，但是仍然可以正常运行。

\[vue/valid-template-root\]  
The template root requires exactly one element.eslint-plugin-vue

我想要知道：为什么 <template> 可以有多个根元素，这是个新特性么？

（本人之前只用过 Vue2）

Answer 1

https://juejin.im/post/5dc3cf...

Answer 2

跟vite没关系, 是V3的新功能Fragments

Answer 3

不太确定 Vite 是否有关，不过 Vue 3.0 的确支持多根元素，而且我觉得这个功能应该也是藉此实现的。

有兴趣的话可以看下官方文档。

Answer 4

"vetur.validation.template": false
关闭template校验

Answer 5

vue3支持碎片，和react的Fragments一样，避免产生多余dom。

不过我倒是想借楼问一下，这种情况下怎么解决 eslint 的报错 “The template root requires exactly one element.eslint-plugin-vue”