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

如果我们尝试创建一个没有根节点的Vue模板，例如：我们将编译或运行-time错误，因为模板必须有一个根元素。通常，我们通过在最外层包裹一层div来解决这个问题，但是这个div元素一般不用，也就是为了让模板满足单根的要求。这种方式通常不会有问题，但在某些情况下，需要有多个根模板。在本文中，让我们探讨何时以及如何解决多重根问题。渲染数组在某些情况下，组件可能需要渲染一个包含在父组件中的子节点数组。例如，某些需要非常特定的元素层次结构才能正常工作的CSS功能（如CSS网格或flex）不能在父元素和子元素之间使用包装器。还有一个问题是，向组件添加包装器元素可能会导致呈现无效的HTML。例如，如果您正在构建一个表格，表格行必须只有用于子项的表格单元格。简而言之，单根要求意味着在Vue中将没有返回子元素的组件的设计模式。Fragments的单根限制也是React的问题，但它在版本16中提供了一个名为[fragments][1]的功能。要使用它，您只需要将多个根模板包装在特殊的React.Fragment元素中：this会做子组件，没有多余的包装，有一个简洁的短语法<>:FragmentsinVue那么Vue会不会引入fragments呢？这可能不会很快，因为虚拟DOMdiffing算法依赖组件有一个单根。根据Vue贡献者LinusBorg的说法：“允许片段需要对[diffing]算法进行重大更改......不仅要使其工作，还要使其高效。...这是一项非常繁重的任务”具有渲染功能的函数组件函数组件没有单根限制，因为它们不需要像有状态组件那样在虚拟DOM中进行区分。这意味着，如果组件只需要返回静态HTML，那么多根节点也没什么问题。还有一点需要注意：我们需要使用render函数，因为vue-loader目前不支持多根函数（[虽然这个已经讨论过了][2]).也可以使用指令技巧你可以使用一个简单的方法来绕过单根限制。它是使用自定义指令，首先我们先删除被包裹的元素：/parent>中间步骤：最后：-->要让它工作有点棘手，这里可以使用JulienBarbay编写的[vue-fragments][3]插件。vue-fragmentsvue-fragments可以作为插件安装到你的Vue项目中import{Plugin}from"vue-fragments";Vue.use(Plugin);该插件注册了一个全局的VFragment组件，作为组件模板中的包装器，类似于Reactfragments的语法：我不确定这个插件对所有用例有多稳健——它看起来可能很脆弱——但在我做的实验中，它运行良好。