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

  1. new Vue({el:'#app'})
  2. 单文件组件中,template下的元素div。其实就是“树”状数据结构中的“根”
  3. 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这个标签,它有三个特性

  1. 隐藏性:该标签不会显示在页面的任何位置,即便里面有多少内容,它永远都是隐藏状态,设置了display:none;
  2. 任意性:该标签可以写在任何地方,甚至是head、body、sciprt标签内;
  3. 无效性:该标签里的任何HTML内容都是无效的,不会起任何作用;只能innerHTML来获取到里面的内容。

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

我再到源码中看一下:

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

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

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

Logo

前往低代码交流专区

更多推荐