likes
comments
collection
share

vue实例只能有一个根元素

作者站长头像
站长
· 阅读数 46

1.三个方面：

  1. 根实例
  2. 单文件组件中
  3. diff算法要求的

2.分析

2.1.根实例

实例化Vue时：

<body> 
 <div id='app'>
 </div>
 </body> 
<script> 
    var vm = new Vue({ 
        el:'#app' 
    }) 
</script> 

//如果我在body下这样： 

<body> 
    <div id='app1'></div>    
    <div id='app2'></div>
 </body>

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

2.2单文件组件

在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，插入在正确的位置。

2.3diff算法

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

3.总结

  1. new Vue({el:'#app'})
  2. 单文件组件中，template下的元素div。其实就是"树"状数据结构中的"根"。
  3. diff算法要求的，源码中，patch.js里patchVnode()。
转载自:https://juejin.cn/post/7033697039888318501
评论
请登录