为什么Vue要求组件模板中只能由一个根元素

看这样一个代码

<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>这种的,以一个主入口编写,不然确实不太标准,还会形成不好的习惯!