作者：Horace ps：新人小白一枚，如有错误，欢迎指出~

笔者现在是一个大三将要实习的学生，前段时间在掘金看到了一篇文章《vue 248个知识点（面试题）为你保驾护航》，作者在里面写到他在面试一个5年前端工作经验的小伙子中的一些问题，其中有一个问题引起了我的注意，这个问题就是：不错，那我问下你 “vue为什么要求组件模板只能有一个根元素？”

笔者入坑学习 Vue 也算是有段时间了，文档和一些大佬的项目、文章也多少看了一些，但是似乎这个问题思考的很少，每次在写项目或是 demo 的时候直接就是代码往上怼，深入的地方也仅限于了解了路由和模板编译的源码实现，也没有深究过为什么只能有一个根元素。这个问题我觉得对于刚入门 Vue 学习的朋友来说是一个很好的问题，在刚开始的时候就要知其所以然才能更好的掌握一门语言。

在 google 和掘金简单找了一下，相关的问题资料似乎很少，也少有人写这个专题，那就不多吹了，今天就由我来带大家分析一下这个问题。以下都是我自己查阅了一些资料之后的个人思考，如果你觉得有问题，欢迎在评论区指正和一起探讨~

首先，我觉得这个问题要先从 Vue 的实例开始讲起。Vue 的实例一般都是长成下面这个样子，不同的只是 id 名的不同。

这就是 Vue 实例的基本结构，并不陌生。从这里可以看到，el 的指定是一个 id 为 app 的 div 元素，Vue 实例接管了对它的控制，减少了我们的 DOM 操作，需要被 vm 控制的元素全部加在它的内部。如果是需要控制不同的部分，这就需要多个 Vue 的实例来实现。疑问就来了，为什么需要不同的 Vue 实例来接管?

在 Vue 中指定 el 选项是给 Vue 实例指定一个 SPA 入口，有可能你的页面会长成像下面这样：

Vue 实例其实并不知道哪一个是入口，它应该接管哪一个部分，所以你要给它指定一个唯一的元素作为入口。每一个入口可以看作是一个 Vue 的类，Vue 要把这个入口进去的所有东西都取出来进行轮循渲染一遍，再把它重新挂载回页面中的 DOM 里面去。打给比方来说，一个 Vue 实例只拥有一个钥匙，一个钥匙只能开一把锁，但是页面上有很多把锁，如果你不说清楚它是哪把锁的钥匙，Vue 实例就不知道接下来要怎么做了。

当然，这只是一个比较浅显的理解。你可能会说，我指定几个入口让 Vue 实例去一个一个试就好了，我们往下看。

“虚拟 DOM”是我们对由 Vue 组件树建立起来的整个 VNode 树的称呼

学习 Vue 不得不说的就是2.0引入的Virtual DOM，引入虚拟 DOM 后，在框架的内部将虚拟 DOM 树型结构与真实 DOM 做了映射，让我们不用再命令式的去操作 DOM。

在聊这个话题之前，如果有对于虚拟 DOM 还不是特别了解的，推荐看这篇文章👉《详解Vue中的虚拟DOM》

引用里面的一张图片：

从这张图可以看出来虚拟 DOM 的一个渲染过程，那我们再回到本文的话题：为什么只能由一个根元素？ 我们来看一个例子，假设你的 Vue 实例接管的 DOM 结构长成这个样子：

它在浏览器内部的表现是一个这样的 DOM 树:

原谅我画图技术差，不过我想展示的效果达到了。从这可以看出它是一个树的结构，每个元素、文字、注释都是一个节点，虚拟 DOM 遵循的也是这样的一个树的数据结构。

回到正题，我们的指定的 el 也就是整个 DOM 结构的根。现在就很好说了，我们只有指定了唯一的 el 根元素，才能交给 Vue 实例在内部通过 createElement 方法生成一个对应的虚拟 DOM 结构映射真实的 DOM 元素进行操作渲染成真正的 HTML

换句话来说，可以把 el 对应的元素理解成 Vue 接管部分中的一个顶级标签，就像基本的 HTML 结构中，顶级标签是 ，只能有一个这样的标签存在。对应到 Vue 中也是这样，如果你给它两个顶级标签，那么对应的 DOM 结构就无法生成了，这也就解释了之前的疑惑：为什么不能指定多个入口让 Vue 实例一个个的试。

不知道我这样的解释有没有说明白这个问题，如果没清楚我们下面再来看看。

现在实际的项目开发中，使用脚手架 vue-cli 开发居多，我们来看看。

vue-cli 的形式是单文件组件，一个 .vue 页面的基本结构是这样的：

在这里， 标签下也只能有一个根元素 div，这是为什么？

在说这个话题之前，我们需要了解 H5 新标签 的一些特性，可以参考文档，它保证了内部的内容有效但不会被渲染。vue-cli 本质上是会把 .vue 文件通过 webpack 配置打包成一系列的 js/css 文件注入到一个 html 文件中交给浏览器进行解释执行，我们看一个打包好的文件目录：

这也就是说，每个 .vue 文件都会是一个 Vue 的实例，而 标签中的内容就是 Vue 实例接管形成虚拟 DOM 的那部分内容。如果在 template 下有多个 div，那么虚拟 DOM 树就没办法生成了。

其实这个问题归结到最后，也可以抽象为一个问题：为什么抽象出来的 DOM 树只能有一个根？

其实在我们的学习过程中，有很多问题都是我们似懂非懂的，就是知其然不知其所以然。说白了就是知道轮子怎么用，但是不知道轮子内部的运行机制，虽然说不要去重复造轮子，但我们至少要知道轮子是怎么运行起来的。以上都是我个人对这个问题的一些理解，通过这篇文章希望可以帮助你对这个问题有更深刻的认识。如果你觉得有什么不对的地方，欢迎直接指正，共同进步！

参考内容 《详解Vue中的虚拟DOM》 《vue2.0的虚拟DOM渲染思路分析》 染陌同学《说说VNode节点(Vue.js实现)》 官方文档 官方API文档 官方issue相关讨论

我把我的学习记录都记录在了我的 github 并且会持续的更新下去，有兴趣的小伙伴可以看看~ github.com/tearill/Rea…