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

最新推荐文章于 2022-11-19 11:33:56 发布

听北风

最新推荐文章于 2022-11-19 11:33:56 发布

阅读量2.7k

点赞数 2

分类专栏： web Vue 前端工程师文章标签： vue vue.js

本文链接：https://blog.csdn.net/jmsLU/article/details/119672813

版权

21 篇文章 0 订阅

订阅专栏

18 篇文章 1 订阅

订阅专栏

11 篇文章 0 订阅

订阅专栏

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

首先，实例化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算法所要求的。

关注