因为"树"状数据结构，肯定要有个"根"。
- 正常的vue页面实例
<div id="app"></div>
var vm = new Vue({
el: '#app',
data: {},
methods: {}
})
el 的指定是一个 id 为 app 的 div 元素，Vue 实例接管了对它的控制，减少了我们的 DOM 操作，需要被 vm 控制的元素全部加在它的内部。
- 多入口vue页面实例
<div id="app"></div>
<div id="app1"></div>
<div id="app2"></div>
指定 el 选项是给 Vue 实例指定一个 SPA 入口。
Vue 实例其实并不知道哪一个是入口，它应该接管哪一个部分，所以你要给它指定一个唯一的元素作为入口。每一个入口可以看作是一个 Vue 的类，Vue 要把这个入口进去的所有东西都取出来进行轮循渲染一遍，再把它重新挂载回页面中的 DOM 里面去。打给比方来说，一个 Vue 实例只拥有一个钥匙，一个钥匙只能开一把锁，但是页面上有很多把锁，如果你不说清楚它是哪把锁的钥匙，Vue 实例就不知道接下来要怎么做了。
当然，这只是一个比较浅显的理解。你可能会说，我指定几个入口让 Vue 实例去一个一个试就好了，我们往下看。
<div id="app">
<h1 id="h3">My title</h1>
<span>Content</span>
Other texts
<!-- annotation text -->
</div>
可以看到这里的DOM是一个树的结构，每个元素、文字、注释都是一个节点，虚拟 DOM 遵循的也是这样的一个树的数据结构。
我们的指定的 el 也就是整个 DOM 结构的根。只有通过指定了唯一的 el 根元素，Vue 实例才能在内部通过 createElement 方法生成一个对应的虚拟 DOM 结构映射真实的 DOM 元素进行操作渲染成真正的 HTML。
在基本的 HTML 结构中，顶级标签是 <html></html>，只能有一个这样的标签存在。对应到 Vue 中也是这样，如果你给它两个顶级标签，那么对应的 DOM 结构就无法生成了。
- 正常开发情况
<template>
<div></div>
</template>
<script>
export default {
}
</script>
<style>
</style>
每个 .vue 文件都会是一个 Vue 的实例，而 <template> 标签中的内容就是 Vue 实例接管形成虚拟 DOM 的那部分内容。所以如果在 template 下有多个 div，那么虚拟 DOM 树就没办法生成了。因此<template>也只能有一个元素包裹 。
网友评论