1.3 小结
可以看到
VNode 和
createElement() 的设计，就只是针对单个
root 的情况进行处理，最终形成 树的结构 。那么，我想这个时候 可能有人会问为什么它们被设计树的结构？ 。而针对这个问题，有 两个方面 ，一方面是树形结构的
VNode 转为真实
DOM 后，我们只需要将根
VNode 的真实
DOM 挂载到页面中。另一方面是
DOM 本身就是树形结构，所以
VNode 也被设计为树形结构，而且之后我们分析
template 编译阶段会提到
AST 抽象语法树，它也是树形结构。所以，统一的结构可以实现很方便的类型转化，即从
AST 到
Render 函数，从
Render 函数到
VNode ，最后从
VNode 到真实
DOM 。
并且，可以想一个情景，如果多个
root ，那么当你将
VNode 转为真实
DOM 时，挂载到页面中，是不是要遍历这个
DOM Collection ，然后挂载上去，而这个阶段又是操作
DOM 的阶段。大家都知道的一个东西就是操作
DOM 是 非常昂贵的 。所以，一个
root 的好处在这个时候就体现出它的好处了。其实这个过程，让我想起 红宝书 中在讲文档碎片的时候，提倡把要创建的 DOM 先添加到文档碎片中，然后将文档碎片添加到页面中。（PS：想想第一次看红宝书是去年 4 月份，刚开始学前端，不经意间过了快一年了….）
二、如何规避出现多 root 的情况
2.1 template 编译过程
在我们平常的开发中，通常是在
.vue 文件中写
<template> ，然后通过在
<template>
