Vue 中 template 有且只能一个 root的原因解析(源码分析)

...
const { render, _parentVnode } = vm.$options
...
vnode = render.call(vm._renderProxy, vm.$createElement);

vm.$createElement = (a, b, c, d) => createElement(vm, a, b, c, d, true)

export function _createElement (
 context: Component, // vm实例
 tag"htmlcode">

export default class VNode {
 tag: string | void;
 data: VNodeData | void;
 children: "text-align: center">

并且，可以想一个情景，如果多个 root ，那么当你将 VNode 转为真实 DOM 时，挂载到页面中，是不是要遍历这个 DOM Collection ，然后挂载上去，而这个阶段又是操作 DOM 的阶段。大家都知道的一个东西就是操作 DOM 是 非常昂贵的 。所以，一个 root 的好处在这个时候就体现出它的好处了。
其实这个过程，让我想起 红宝书 中在讲文档碎片的时候，提倡把要创建的 DOM 先添加到文档碎片中，然后将文档碎片添加到页面中。（PS：想想第一次看红宝书是去年 4 月份，刚开始学前端，不经意间过了快一年了....）
二、如何规避出现多 root 的情况
 2.1 template 编译过程
在我们平常的开发中，通常是在 .vue 文件中写 <template> ，然后通过在 <template> 中创建一个 div 来作为 root ，再在 root 中编写描述这个 .vue 文件的 html 标签。当然，你也可以直接写 render() 函数。
在文章的开始，我们也说了在 Vue 中无论是写 template 还是 render ，它最终会转成 render() 函数。而平常开发中，我们用 template 的方式会较多。所以，这个过程就需要 Vue 来编译 template 。
编译 template 的这个过程会是这样：

  
根据 template 生成 AST （抽象语法树）
  
优化 AST ，即对 AST 节点进行静态节点或静态根节点的判断，便于之后 patch 判断
  
根据 AST 可执行的函数，在 Vue 中针对这一阶段定义了很多 _c 、 _l 之类的函数，就其本质它们是对 render() 函数的封装

这三个步骤在源码中的定义：


export const createCompiler = createCompilerCreator(function baseCompile (
 template: string,
 options: CompilerOptions
): CompiledResult {
 // 生成 AST
 const ast = parse(template.trim(), options)
 if (options.optimize !== false) {
 // 优化 AST
 optimize(ast, options)
 }
 // 生成可执行的函数
 const code = generate(ast, options)
 return {
 ast,
 render: code.render,
 staticRenderFns: code.staticRenderFns
 }
})


需要注意的是 Vue-CLI 提供了两个版本， Runtime-Compiler 和 Runtime ，两者的区别，在于前者可以将 template 编译成 render() 函数，但是后者必须手写 render() 函数
而对于开发中，如果你写了多个 root 的组件，在 parse 的时候，即生成 AST 抽象语法树的时候， Vue 就会过滤掉多余的 root ，只认第一个 root 。
而 parse 的整个过程，其实就是正则匹配的过程，并且这个过程会用栈来存储起始标签。整个 parse 过程的流程图：

然后，我们通过一个例子来分析一下，其中针对多 root 的处理。假设此时我们定义了这样的 template ：


<div><span></span></div><div></div>


显然，它是多 root 的。而在处理第一个 <div> 时，会创建对应的 ASTElement ，它的结构会是这样：


{
 type: 1,
 tag: "div",
 attrsList: [],
 attrsMap: {},
 rawAttrsMap: {},
 parent: undefined,
 children: [],
 start: 0,
 end: 5
}


而此时，这个 ASTElement 会被添加到 stack 中，然后删除原字符串中的 <div> ，并且设置 root 为该 ASTElement 。
然后，继续遍历。对于 <span> 也会创建一个 ASTElement 并入栈，然后删除继续下一次。接下来，会匹配到 </span> ，此时会处理标签的结束，例如于栈顶 ASTElement 的 tag 进行匹配，然后出栈。接下来，匹配到 </div> ，进行和 span 同样的操作。
最后，对于第二个 root 的 <div> ，会做和上面一样的操作。但是，在处理 </div> 时，此时会进入判断 multiple root 的逻辑，即此时字符串已经处理完了，但是这个结束标签对应的 ASTElement 并不等于我们最初定义的 root 。所以此时就会报错：
Component template should contain exactly one root element. If you are using v-if on multiple elements, use v-else-if to chain them instead.
而且，该 ASTElement 也不会加入最终的 AST 中，所以之后也不可能会出现多个 root 的情况。
同时，这个报错也提示我们如果要用多个 root ，需要借助 if 条件判断来实现。
可以看出， template 编译的最终的目标就是构建一个 AST 抽象语法树。所以，它会在创建第一个 ASTElement 的时候就确定 AST 的 root ，从而确保 root 唯一性。
2.2 _render 过程
不了解 Vue 初始化过程的同学，可能不太清楚 _render 过程。你可以理解为渲染的过程。在这个阶段会调用 render 方法生成 VNode ，以及对 VNode 进行一些处理，最终返回一个 VNode 。
而相比较 template 编译的过程， _render 过程的判断就比较简洁：


if (!(vnode instanceof VNode)) {
 if (process.env.NODE_ENV !== 'production' && Array.isArray(vnode)) {
 warn(
 'Multiple root nodes returned from render function. Render function ' +
 'should return a single root node.',
 vm
 );
 }
 vnode = createEmptyVNode();
}


前面在讲 createElement 的时候，也讲到了 render() 需要返回 VNode 。所以，这里是防止部分骚操作， return 了包含多个 VNode 的数组。
结语
通过阅读，我想大家也明白了 为什么 Vue 中 template 有且只能一个 root ? 。 Vue 这样设计的出发点可能很简单，为了减少挂载时 DOM 的操作。但是，它是如何处理多 root 的情况，以及相关的 VNode 、 AST 、 createElement() 等等关键点，个人认为都是很值得深入了解的。