无论是Vue还是react都有一个核心的结构那就是虚拟DOM。为什么要在框架中加入虚拟DOM？通过对VNode的分析提高我们对前端框架设计的理解。

虚拟DOM

虚拟DOM的本质其实就是一个普通的JS对象。

虚拟DOM最终是通过render函数生成。在Vue脚手架中我们通常是利用tempelate模板进行AST(抽象语法树分析)来生成虚拟DOM，本质还是还是通过render函数生成。tempelate模板作用只是方便我们书写代码，在脚手架工具编译后只是一个字符串。

每个组件都对应一颗虚拟DOM树，最终生成真实DOM节点。

VNode的基本属性

属性	含义	类型
tag	元素标签	string
data	标签属性	object
children	子元素	array
text	文本	string
key	标志	string

<div id="demo">
    <p class="txt">Hello World</p>
</div>
{
    tag: 'div'
    data: {
        id: 'demo'
    },
    children: [
        {
            tag: 'p',
            data: {
                class: 'txt'
            }
            text: 'Hello World'
        }
    ]
}

虚拟DOM优势

创建效率快

console.time();
for (let i = 0; i < 100000; i++) {
    const obj =  new Object();
}
console.timeEnd();
console.time('doc');
for (let i = 0; i < 100000; i++) {
    const obj =  document.createElement('div')
}
console.timeEnd('doc');

通过对比我们可以看出，创建真实DOM节点是十分耗费性能的。

提高组件更新效率

虚拟DOM的用途就是为了在组件更新时提高渲染效率。 如果我们只是单纯的写一些静态页面，页面不会发生重新渲染，vue的效率其实是更差的。
虚拟DOM的作用就好比我们去饭店吃饭，先在手机上预约好我要吃什么，然后到饭店之后就可以直接享用，就可以省去排队的时间啦。
Vue组件的每次更新，并不会直接改变真实的DOM节点。会重新执行render函数，创建出一个新的虚拟DOM，将新旧两个虚拟DOM对比找出不同的节点，只更新变化的真实DOM节点。这个过程是通过Vue的patch算法实现。

跨平台

由于 Virtual DOM 是以 JavaScript 对象为基础而不依赖真实平台环境，所以使它具有了跨平台的能力。

Vue虚拟DOM

虚拟DOM

虚拟DOM优势

创建效率快

提高组件更新效率

跨平台