一、虚拟DOM
- Virtual DOM（虚拟DOM）不是真实的DOM对象，它是由普通的JS对象来描述DOM对象。
- 真实DOM对象它的成员非常多，所以创建真实DOM的成本非常高。
- 创建一个虚拟DOM（普通的JavaScript对象）的属性非常少，所以创建一个虚拟DOM的成本比真实DOM要小很多
二、为什么使用虚拟DOM
- 手动操作DOM比较麻烦，还需要考虑浏览器兼容性问题，虽然有jQuery等库简化了DOM操作，但随着项目的复杂程度提升，DOM操作也跟着提升了
- 为了简化DOM的复杂操作，于是出现了各种MVVM框架，MVVM框架解决了视图和状态的同步问题
- 为了简化视图的操作我们可以使用模板引擎，但是模板引擎没有解决跟踪状态变化的问题，于是Virtual DOM出现了
- Virtual DOM的好处是当前状态改变时不需要立即更新DOM，只需要创建一个虚拟树来描述DOM，Virtual DOM内部将弄清楚如何有效（diff）的更新DOM
- 参考GitHub上的Virtual DOM的描述
- Virtual DOM可以维护程序的状态，跟踪上一次的状态
- 通过比较前后两次状态的差异更新真实的DOM
三、虚拟DOM的作用
- 维护视图和状态的关系
- （只有）在复杂视图的情况下（才会）提升性能
- 除了渲染DOM以外，还可以实现服务端渲染如SSR（Nuxt.js/Next.js），或可以通过特殊手段把虚拟DOM转化成原生应用（Weex/React Native）以及小程序（mpvue/uni-app）等
四、Virtual DOM开源库
- Snabbdom
- Vue2.x内部使用的Virtual DOM就是改造的Snabbdom
- 大约2000SLOC（single line of code）
- 通过模块可扩展
- 源码使用TypeScript（基于TypeScript开发的）
- 最快的Virtual DOM之一
- virtual-dom