likes
comments
collection

vue实例只能有一个根元素

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

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()。