虚拟DOM（Virtual DOM）

一、虚拟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