vue实例只能有一个根元素

您所在的位置：网站首页 › vue组件模板只要求一个根节点 › vue实例只能有一个根元素

vue实例只能有一个根元素

2023-08-22 20:30| 来源: 网络整理| 查看: 265

1.三个方面：根实例单文件组件中 diff算法要求的 2.分析 2.1.根实例

实例化Vue时：

var vm = new Vue({ el:'#app' }) //如果我在body下这样：

Vue其实并不知道哪一个才是我们的入口。如果同时设置了多个入口，那么vue就不知道哪一个才是这个‘类’。

2.2单文件组件

在webpack搭建的vue开发环境下，使用单文件组件时：

template这个标签，它有三个特性：

隐藏性：该标签不会显示在页面的任何地方，即便里面有多少内容，它永远都是隐藏的状态，设置了display：none；任意性：该标签可以写在任何地方，甚至是head、body、sciprt标签内；无效性：该标签里的任何HTML内容都是无效的，不会起任何作用；只能innerHTML来获取到里面的内容。一个vue单文件组件就是一个vue实例，如果template下有多个div那么如何指定vue实例的根入口呢. 为了让组件可以正常生成一个vue实例，这个div会自然的处理成程序的入口,通过这个根节点，来递归遍历整个vue树下的所有节点，并处理为vdom，最后再渲染成真正的HTML，插入在正确的位置。 2.3diff算法

diff中patchvnode方法，用来比较新旧节点。所有节点组成一颗树，需要有根节点才能进行同层比较。我们只有指定了唯一的 el 根元素，才能交给 Vue 实例在内部通过 createElement 方法生成一个对应的虚拟 DOM 结构映射真实的 DOM 元素进行操作渲染成真正的 HTML

3.总结 new Vue({el:'#app'}) 单文件组件中，template下的元素div。其实就是"树"状数据结构中的"根"。 diff算法要求的，源码中，patch.js里patchVnode()。

【本文地址】

vue实例只能有一个根元素

vue实例只能有一个根元素

今日新闻

推荐新闻