虚拟DOM

1、是什么？

虚拟DOM是一层对真实DOM的抽象，以JavaScript对象（VNode节点）作为基础的树，用对象的属性来描述节点，最终可以通过一系列操作使这棵树映射到真实环境上。

在JavaScript对象中，虚拟DOM表现为一个Object对象。并且最少包含标签名（tag）、属性（attrs）和子元素对象（children）三个属性，不同框架对这三个属性的命名可能会有差别。

创建虚拟DOM是为了更好将虚拟的节点渲染到页面视图中，所以虚拟DOM对象的节点与真实DOM的属性一一对应。为React和Vue这两个框架都带来了跨平台的能力。

定义真实DOM

<div id="app">
    <p class="p">节点内容</p>
    <h3>{{ foo }}</h3>
</div>

实例化DOM

const app=new Vue({
    el:'#app',
    data:{
        foo:"foo"
    }
})

观察render的render，可以得到虚拟DOM

(function anonymous(
) {
    with(this){return _c('div',{attrs:{"id":"app"}},[_c('p',{staticClass:"p"},
                      [_v("节点内容")]),_v(" "),_c('h3',[_v(_s(foo))])])}})

通过虚拟DOM，vue可以对这棵抽象树进行创建节点，删除节点以及修改节点的操作，经过diff算法得出一些需要修改的最小单位，再更新视图，减少了DOM操作，提高了性能。

2、为什么需要虚拟DOM？

页面的性能问题，大部分都是由DOM操作引起的。真实的DOM节点，包含着很多属性。频繁操作会出现页面卡顿，影响用户的体验。

没有虚拟DOM操作DOM时，浏览器操作真实DOM的过程为：用传统的原生api或jQuery去操作DOM时，浏览器会从构建DOM树开始从头到尾执行一遍流程。如果操作需要更新10个DOM节点，浏览器在收到第一个更新DOM请求后，并不知道后续还有9次更新操作，因此会马上执行流程，最终执行10次流程。而通过虚拟VNode，同样更新10个DOM节点，虚拟DOM不会立即操作DOM，而是将10次更新的diff内容保存到本地的一个js对象中，最终将这个js对象一次性attach到DOM树上，避免大量的无谓计算。

虚拟DOM的优势：

（1）抽象了原本的渲染过程，实现了跨平台的能力，不仅仅局限于浏览器的DOM，可以是安卓和IOS的原生组件，可以是近期很火热的小程序也可以是GUI。

（2）diff算法，减少JavaScript操作真实DOM带来的性能消耗。

3、Vnode的生成

VNode：所有对象的context选项都指向了Vue实例；elm属性则指向了其相对应的真实DOM节点。

vue是通过createElement生成VNode的，三个关键流程未：

（1）构造子类构造函数Ctor

（2）installComponentHooks安装组件钩子函数。

（3）实例化vnode

小结：createElement 创建 VNode 的过程，每个 VNode 有 children，children 每个元素也是一个VNode，这样就形成了一个虚拟树结构，用于描述真实的DOM树结构。