13518219792
今天小编给大家分享一下vue只有一个根标签的原因是什么的相关知识点，内容详细，逻辑清晰，相信大部分人都还太了解这方面的知识，所以分享这篇文章给大家参考一下，希望大家阅读完这篇文章后有所收获，下面我们一起来了解一下吧。
创新互联公司专业为企业提供凤县网站建设、凤县做网站、凤县网站设计、凤县网站制作等企业网站建设、网页设计与制作、凤县企业网站模板建站服务，10年凤县做网站经验，不只是建网站，更提供有价值的思路和整体网络服务。
vue只有一个根标签的原因：1、从查找和遍历DOM的角度来说，如果有多个根，那么查找和遍历DOM的效率会很低；2、从Vue本身来说，如果说一个组件有多个入口多个根，那就意味着用户的组件还可以进一步拆分成多个组件，进一步组件化，会降低代码之间的耦合程度。
本教程操作环境：windows7系统、vue3版，DELL G3电脑。
首先，我觉得这个问题要先从 Vue 的实例开始讲起。Vue 的实例一般都是长成下面这个样子，不同的只是 id 名的不同。
var vm = new Vue({
el: '#app',
data: {},
methods: {}
...
})这就是 Vue 实例的基本结构，并不陌生。从这里可以看到，el 的指定是一个 id 为 app 的 div 元素，Vue 实例接管了对它的控制，减少了我们的 DOM 操作，需要被 vm 控制的元素全部加在它的内部。如果是需要控制不同的部分，这就需要多个 Vue 的实例来实现。疑问就来了，为什么需要不同的 Vue 实例来接管?
在 Vue 中指定 el 选项是给 Vue 实例指定一个 SPA 入口，有可能你的页面会长成像下面这样：
Vue 实例其实并不知道哪一个是入口，它应该接管哪一个部分，所以你要给它指定一个唯一的元素作为入口。每一个入口可以看作是一个 Vue 的类，Vue 要把这个入口进去的所有东西都取出来进行轮循渲染一遍，再把它重新挂载回页面中的 DOM 里面去。打给比方来说，一个 Vue 实例只拥有一个钥匙，一个钥匙只能开一把锁，但是页面上有很多把锁，如果你不说清楚它是哪把锁的钥匙，Vue 实例就不知道接下来要怎么做了。
当然，这只是一个比较浅显的理解。你可能会说，我指定几个入口让 Vue 实例去一个一个试就好了，我们往下看。
“虚拟 DOM”是我们对由 Vue 组件树建立起来的整个 VNode 树的称呼
学习 Vue 不得不说的就是2.0引入的Virtual DOM，引入虚拟 DOM 后，在框架的内部将虚拟 DOM 树型结构与真实 DOM 做了映射，让我们不用再命令式的去操作 DOM。
引用里面的一张图片：
从这张图可以看出来虚拟 DOM 的一个渲染过程，那我们再回到本文的话题：为什么只能由一个根元素？
我们来看一个例子，假设你的 Vue 实例接管的 DOM 结构长成这个样子：
