看这样一个代码
<div id="app">
<span>你好</span>
</div>
<div id="app">
<span>你好</span>
</div>
这样的代码我们在html编译器中会被成功执行,其实我们知道这样写肯定也是不规范的.
我们再来看Vue是啥情况,Vue是这样的一个情况,例如
let app = new Vue({
el:'#app'
})如果说,我们在Vue中也声明了多个比如说
let vm = new Vue({
el:'#app'
})
let vm = new Vue({
el:'#app'
})人家是不认识我们到底是哪个是我们真正地执行入口,也有可能说以第一个执行,也有可能说,我按照第二个执行.所以这是第一个原因所在了
第二个我们来模拟一下,这个返回的虚拟DOM,当然不是那么标准
{
tag:'div',
props:{
id:'app',
childred::[
tag:'span',
props:{
text:'你好'
}
]
},
tag:'div',
props:{
id:'app',
childred::[
tag:'span',
props:{
text:'你好'
}
]
}
}
那差不多就是会说,就是这种样子,
通过这个‘根节点'，来递归遍历整个vue‘树'下的所有节点，并处理为vdom，最后再渲染成真正的HTML，插入在正确的位置
那么这个入口，就是这个树的‘根'，各个子元素，子组件，就是这个树的‘枝叶'，而自然而然地，这棵‘树'，就是指一个vue实例了。
所以原因是不言而喻的,如果在template下有多个div，那么该如何指定这个vue实例的根入口？
为了让组件能够正常的生成一个vue实例，那么这个div会被自然的处理成程序的入口。同时我也建议,在html中写一个<div></div>这种的,以一个主入口编写,不然确实不太标准,还会形成不好的习惯!
