Vue面试系列之七：为什么vue组件模板只有一个根元素？
对于这个问题，我们从以下三个方面来考虑：new Vue({el:'#app'})单文件组件中，template下的元素div。其实就是“树”状数据结构中的“根”diff算法要求的，源码中，patch.js里patchVnode()首先，实例化Vue时：<body><div id="app"></div></body><script>var
·
对于这个问题，我们从以下三个方面来考虑：
- new Vue({el:'#app'})
- 单文件组件中，template下的元素div。其实就是“树”状数据结构中的“根”
- diff算法要求的，源码中，patch.js里patchVnode()
首先，实例化Vue时：
<body>
<div id="app"></div>
</body>
<script>
var app=new Vue({
el:"#app"
})
</script>如果我在body下这样：
<body>
<div id='app1'></div>
<div id='app2'></div>
</body>Vue其实并不知道哪一个才是我们的入口，如果同时设置了多个入口，那么vue就不知道哪一个才是这个“类”。
在webpack搭建的vue开发环境下，使用单文件组件时：
<template>
<div>
</div>
</template>template这个标签，它有三个特性：
- 隐藏性：该标签不会显示在页面的任何位置，即便里面有多少内容，它永远都是隐藏状态，设置了display：none;
- 任意性：该标签可以写在任何地方，甚至是head、body、sciprt标签内；
- 无效性：该标签里的任何HTML内容都是无效的，不会起任何作用；只能innerHTML来获取到里面的内容。
一个vue单文件组件就是一个vue实例，如果template下有多个div那么如何指定vue实例的根入口呢，为了让组件可以正常生成一个vue实例，这个div会自然的处理成程序入口，通过这个根节点，来递归遍历整个vue树下的所有节点，并处理为vdom，最后再渲染成真正的HTML，插入在正确的位置。
我再到源码中看一下：
源码位置：vue\src\core\vdom\patch.js------patchVnode()
这个patchVnode()方法就是比较新旧节点，利用数据结构，将整个文档利用“树”结构进行比对，从而对文档进行更新操作；
所以，从数据结构来对待这个问题就很好解释了，学过数据结构的朋友都知道，一个“树”总是有一个根节点，diff算法本就是利用“树”状数据结构来进行虚拟dom更新，所以，vue只有一个根元素，其实也是diff算法所要求的。
前往低代码交流专区
更多推荐
2
0- 0
已为社区贡献2条内容
所有评论(0)