一个Vue模板可以有多个根节点（Fragments）吗？

作者：AnthonyGore译者：前端小智来源：vuejsdevelopers点赞阅读，养成习惯GitHubhttps://github.com/qq44924588..。已经收录在网站上，也整理了更多往期好评文章，也整理了很多我的文档和教程资料。欢迎来到星和完美。面试时可参考考点复习。我希望我们能在一起。如果我们尝试创建一个没有像这样的根节点的Vue模板：我们将得到编译或运行时错误，因为模板必须有一个根元素。通常，我们通过在最外层包裹一层div来解决这个问题，但是这个div元素一般不用，也就是为了让模板满足单根的要求。这种方式通常不是问题，但在某些情况下需要有多个根模板。在本文中，让我们探讨何时以及如何解决多重根问题。渲染数组在某些情况下，组件可能需要渲染一个包含在父组件中的子节点数组。例如，某些需要非常特定的元素层次结构才能正常工作的CSS功能（如CSS网格或flex）不能在父元素和子元素之间使用包装器。还有一个问题，向组件添加包装器元素可能会呈现无效的HTML。例如，如果您正在构建一个表格，则表格行必须只有表格单元格用于子项。简而言之，单根要求意味着设计模式对于无法在Vue中返回子元素的组件。Fragments的这种单根限制对于React来说也是一个问题，但它在版本16中提供了一个称为片段的功能。要使用它，只需将多根模板包装在一个特殊的React.Fragment元素中：classColumnsextendsReact.Component{render(){return(HelloWorld);}}这将使子组件没有多余的包装器，并且有一个简洁的语法<>：);Vue中的片段Vue也会引入片段吗？这可能不会很快，因为虚拟DOM差异算法依赖于具有单个根的组件。根据Vue贡献者LinusBorg的说法：“允许片段需要对[diffing]算法进行重大更改......不仅要使其工作，还要使其高效......这是一项非常繁重的“渲染功能”任务components”功能组件没有单根限制，因为它们不需要像有状态组件那样在虚拟DOM中进行区分。这意味着如果组件只需要返回静态HTML，那么有多个根也没有错节点。还有一个警告：我们需要使用render函数，因为vue-loader目前不支持多根功能（尽管有关于它的讨论）。导出默认值{功能：true，渲染：h=>[h('tr',[h('td','foo'),h('td','bar'),]),h('tr',[h('td','lorem'),h('td','ipsum'),])];});------------------------------------------从“TableRows”导入TableRows;newVue({el:'#app',template:`