前言
在正式回答之前先思考一个问题什么是虚拟DOM？
vdom可以看作是一个对象，使用javascript模拟了DOM结构的树形结构，这个树结构包含整个DOM结构的信息， 例如：
tpl:
<div class="demo"><span>123</span></div>
vdom:
{
type: 'div',
config: {
key: xxx,
ref: xxx,
self: xxx,
props: xxx,
....
},
children: [...]
}
如何实现react中的 Virtual DOM？
- 生成state数据（包含props数据）；
- 解析jsx模版；
- 数据 + 模版生成初始 VDOM（Json），来表述真实DOM；
- 根据VDOM生成真实DOM显示出来；
- state 或 props 发生变化；
- 数据 + 模版生成新的 VDOM，
- 对比初始 VDOM与新的VDOM的差异，将差异部分进行修改；
- 用新DOM对应的位置替换掉原始DOM发生变化的地方；
其实整体流程上vue 与 react 的虚拟dom 是比较相近的，差异点在tpl 的解析与update 时的diff 算法上，vue是先生成ast树，最后在render函数中形参中传入createElement函数，利用createElement函数解析成vdom；react是利用bable解析jsx，调用React.createElement 函数解析成vdom，所以这一点可能并没有vue优化的好。 另外在diff 算法上的不同， react的diff算法是同级比对找差异，发现差异那么将差异部分整个进行重新计算（新版本可能已经做了优化），而vue因为基于响应式那么在diff算法上update时付出的心智会更多一些，这里就不多阐述，有喜欢研究diff算法的小伙伴可以去查阅vue 的diff算法源码。
Virtual DOM有什么好处？
Virtual DOM 是以对象的方式来描述真实dom对象的，那么在做一些update的时候，可以在内存中进行数据比对，减少对真实dom的操作减少浏览器重排重绘的次数，减少浏览器的压力，提高程序的性能，并且因为diff算法的差异比较，记录了差异部分，那么在开发中就会帮助程序员减少对差异部分心智负担，提高了开发效率
Virtual DOM 有什么坏处？
在初始化时增加了对tpl的解析，最终需要生成Virtual DOM，那么就会产生一定的内存消耗，比初始化时直接挂载到真实dom 对象上的展示要慢一些。（纯web渲染的首页渲染慢，之前就一直被产品bb。。。。** 个 ** ）
思考
经过上述几个问题，基本上对虚拟dom的优缺点都有了一定的了解，那么虚拟 DOM 真的渲染更快，性能更好吗？答案是否！虚拟dom增加了一层内存运算，那么渲染上肯定会慢上一些，但是不得不承认的是在项目团队中不能保证每一个团队成员的编码水平都非常优异，所有的编码都能优化到尽量少的对真实dom的重排、重绘，这是高成本的，相对而言 js的运算和操作真实dom操作相比就便宜了很多。虚拟dom的操作准确的来说让渲染变的更慢，但是让开发者编码水平变得更好，因为虚拟dom中diff算法存在，减少了开发人员对update时付出的心智，变相的提高了开发者的手动优化每一个操作真实dom 的方式，从而提高整体程序相对而言说的过去的的性能和渲染效率。另外diff算法中脏脏检查与依赖收集也使得运算时间进一步减少。 综合来讲他的存在是优大于略的！
虽然虚拟dom的缺点在初始化时增加了内存运算，增加了首页的渲染时间，但是运算时间是以毫秒级别算出的，对用户体验影响并不是很大，并且在架构上可以增加一层node 服务器采用服务器渲染，再把首页的相关内容进行解藕抽离，只加载相关的内容来展示提高首屏渲染效率。
另外我知道很多小伙伴在写代码遍历时喜欢用下标作为key值，其实这样真的不好！ 在解析模版时如果没有添加key那么解析默认就是使用下标作为key值的，这样如果操作页面时，会导致重新进行计算一遍key值，为程序带来不必要的负担，最好的方式就是采用的对应的id 值（唯一值）。
总结
其实Virtual DOM 的实现不仅仅是提高了开发效率和性能，并且也解决了跨终端开发的问题，例如rn， vux，uni-app 等实现跨终端开发的功能都是基于Virtual DOM的。学习Virtual DOM 将是一个收益不错的学习计划
文章中如果有编写不正确的地方欢迎大家留言，我会及时改正，并加强学习。
如果觉得对您有帮助，请点个赞！ 感谢
