Vue面试系列之七：为什么vue组件模板只有一个根元素？_template只能有一个根元素

作者：我家小花儿 | 2024-03-18 04:32:50

踩

template只能有一个根元素

对于这个问题，我们从以下三个方面来考虑：

首先，实例化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这个标签，它有三个特性：

一个vue单文件组件就是一个vue实例，如果template下有多个div那么如何指定vue实例的根入口呢，为了让组件可以正常生成一个vue实例，这个div会自然的处理成程序入口，通过这个根节点，来递归遍历整个vue树下的所有节点，并处理为vdom，最后再渲染成真正的HTML，插入在正确的位置。

我再到源码中看一下：

源码位置：vue\src\core\vdom\patch.js------patchVnode()

这个patchVnode()方法就是比较新旧节点，利用数据结构，将整个文档利用“树”结构进行比对，从而对文档进行更新操作；

所以，从数据结构来对待这个问题就很好解释了，学过数据结构的朋友都知道，一个“树”总是有一个根节点，diff算法本就是利用“树”状数据结构来进行虚拟dom更新，所以，vue只有一个根元素，其实也是diff算法所要求的。

声明：本文内容由网友自发贡献，不代表【wpsshop博客】立场，版权归原作者所有，本站不承担相应法律责任。如您发现有侵权的内容，请联系我们。转载请注明出处：https://www.wpsshop.cn/w/我家小花儿/article/detail/260372