七、vue为什么要求组件模板只能有一个根元素？

[liwen327]

1、new Vue({el:'#app'})，从这里来看，一个根组件只有一个根元素，vue要去查找根元素app，从需要这里面去渲染dom。
2、单文件组件中，template下的元素div。因为template元素是html5新增的元素，它的css为display:none的，只要你在它里面写页面结构都不会显示，那为什么写div了就可以显示了呢？因为vue单文件组件就是一个vue的实例，在Template中加了div，那vue就会把这个div当作一个入口，如果写多个div，那vue就不知道哪个是入口了，导致程序出错。根据这个根节点，来遍历dom树下的所有节点并处理为vdom，最后再渲染成真正的html来插入到正确的位置。
3、diff算法层面上，从源码中可知，diff算法是同级比较，深度优先的，最先比较的就是根元素节点，利用patchVnode方法，来进行根节点以及根节点下的子孙节点。