什么是虚拟Dom？
虚拟 dom 是相对于浏览器所渲染出来的真实 dom 的，在 react，vue 等技术出现之前，我们要改变页面展示的内容只能通过遍历查询 dom 树的方式找到需要修改的 dom 然后修改样式行为或者结构，来达到更新 ui 的目的。
这种方式相当消耗计算资源，因为每次查询 dom 几乎都需要遍历整颗 dom 树，如果建立一个与 dom 树对应的虚拟 dom 对象（ js 对象），以对象嵌套的方式来表示 dom树，那么每次 dom 的更改就变成了 js 对象的属性的更改，这样一来就能查找 js 对象的属性变化要比查询 dom 树的性能开销小。
为什么虚拟Dom会提高性能？
虚拟 dom 相当于在 js 和真实 dom 中间加了一个缓存，利用 dom diff 算法避免了没有必要的 dom 操作，从而提高性能。
VirtualDOM 工作过程有三个简单的步骤
1、每当底层数据发生改变时，整个 UI 都将在 VirtualDOM 描述中重新渲染
2、然后计算之前 DOM 表示与新表示的之间的差异
3、完成计算后，将只用实际更改的内容更新 realDOM
Vue 中如何实现一个虚拟 DOM？
-
首先要构建一个 Vnode 的类，DOM 元素上的所有属性在 Vnode 类实例化出来的对象上都存在对应的属性。例如 tag 表示一个元素节点的名称，text 表示一个文本节点的文本，chlidren 表示子节点等。
-
将 Vnode 类实例化出来的对象进行分类，例如注释节点、文本节点、元素节点、组件节点、函数式节点、克隆节点。
-
然后通过编译将模板转成渲染函数 render，执行渲染函数 render，在其中创建不同类型的Vnode 类，最后整合就可以得到一个虚拟 DOM（vnode），
-
最后通过 patch 将 vnode 和 oldVnode进行比较后，生成真实 DOM
