Vue—关于实例中为什么只能有一个根元素？

最新推荐文章于 2023-07-06 15:34:16 发布

小陈同志丶Go

最新推荐文章于 2023-07-06 15:34:16 发布

阅读量215

点赞数

文章标签： JavaScript

本文链接：https://blog.csdn.net/weixin_37744697/article/details/127423554

版权

这个问题分两种情况：

要解释这个问题，最好的方式就是直接看源码

一个vue实例的创建大致分为如下两个步骤

以vue2.5.2版本为例：

_init方法在Vue的构造函数中被调用

_init方法的创建在initMixin中，可以看到在Vue的原型对象下添加了_init方法，里面的内容可以不管，大部分都是在做选项合并的操作，直接跳到我圈出来的地方，也就是我们接下来要说的第二步

$mount代码非常简单，判断el有没有、是不是浏览器环境，是就把query函数的返回值给它，否则赋值为undefined，做完这些事情之后调用mountComponent函数，这个函数看名字就知道是用来挂载模板

我们来看看query函数

query函数的作用就是判断传进来的el是不是元素，如果是就直接返回，否则使用浏览器document的querySelector API来获取它

到这里是否已经恍然大悟，原来答案这么简单，querySelector只会返回第一个匹配的dom元素，因此就算你写了两个顶层元素也默认只会选择第一个dom作为入口

如果你还不了解querySelector，请阅读如下文档：

因此，当我们实例化一个Vue时如果写了两个入口，现在你知道答案了吗？

let vm = new Vue({
    el:'#app',
    data:{ msg: '你好' }
})

<body>
    <div id='app'>{{msg}}</div>
    <div id='app'>{{msg}}</div>
</body>

.vue文件会通过vue-loader转换成js代码，在你通过import语句导入一个.vue时，实际上就是导入这个组件的实例，与上面同理，实例需要一个入口，如果在template标签中写了两个根元素，它也不知道将哪个元素作为组件实例的入口，因此干脆就告诉你只需要一个根元素

The template root requires exactly one element

源码如下所示，圈出来的这段代码的作用就是解析template并转换成渲染函数，最终$mount方法被调用时会将解析好的模板插入到对应的节点中

本文由博客一文多发平台 OpenWrite 发布！

关注