共计 1301 个字符，预计需要花费 4 分钟才能阅读完成。
我是在知乎上看到的这个问题，转念一想，用了大半年的 vue，好像真的没有了解过：
‘为什么只能有且只有一个根元素’
于是我花了二十多分钟去找了一下答案 …… 竟然没有找到答案 ….
好的现在我来说说我的理解，如果有不对的地方欢迎指出。
我觉得这个问题需要从两个方面来说起：
1.new Vue({el:’#app’})
2. 单文件组件中，template 下的元素 div
一、
当我们实例化 Vue 的时候，填写一个 el 选项，来指定我们的 SPA 入口：
let vm = new Vue({
el:'#app'})
同时我们也会在 body 里面新增一个 id 为 app 的 div
<body>
<div id='app'></div></body>
这很好理解，就是为 vue 开启一个入口，那我们不妨来想想，如果我在 body 下这样
<body>
<div id='app1'></div>
<div id='app2'></div></body>
Vue 其实并不知道哪一个才是我们的入口，因为对于一个入口来讲，这个入口就是一个‘Vue 类’，Vue 需要把这个入口里面的所有东西拿来渲染，处理，最后再重新插入到 dom 中。
如果同时设置了多个入口，那么 vue 就不知道哪一个才是这个‘类’。
二、
当我们在 webpack 搭建的 vue 开发环境下，使用单文件组件时，你可能会这样：
<template>
<div class='component'></div></template>
那这里为什么 template 下也必须有且只能有一个 div 呢？
这里我们要先看一看 template 这个标签，这个标签是 HTML5 出来的新标签，它有三个特性：
1. 隐藏性：该标签不会显示在页面的任何地方，即便里面有多少内容，它永远都是隐藏的状态；
2. 任意性：该标签可以写在页面的任何地方，甚至是 head、body、sciprt 标签内；
3. 无效性：该标签里的任何 HTML 内容都是无效的，不会起任何作用；
但是呢，你可以通过 innerHTML 来获取到里面的内容。
知道了这个，我们再来看.vue 的单文件组件。其实本质上，一个单文件组件，本质上（我认为）会被各种各样的 loader 处理成为.js 文件（因为当你 import 一个单文件组件并打印出来的时候，是一个 vue 实例），通过 template 的任意性我们知道，template 包裹的 HTML 可以写在任何地方，那么对于一个.vue 来讲，这个 template 里面的内容就是会被 vue 处理为虚拟 dom 并渲染的内容，导致结果又回到了开始：既然一个.vue 单文件组件是一个 vue 实例，那么这个实例的入口在哪里？
如果在 template 下有多个 div，那么该如何指定这个 vue 实例的根入口？
为了让组件能够正常的生成一个 vue 实例，那么这个 div 会被自然的处理成程序的入口。
通过这个‘根节点’，来递归遍历整个 vue‘树’下的所有节点，并处理为 vdom，最后再渲染成真正的 HTML，插入在正确的位置
那么这个入口，就是这个树的‘根’，各个子元素，子组件，就是这个树的‘枝叶’，而自然而然地，这棵‘树’，就是指一个 vue 实例了。
链接：https://github.com/haizlin/fe…
