【Virtual DOM】

什么Virtual DOM

Virtual DOM是一个普通的js对象，是对真实DOM描述。

Vittual DOM是对真实DOM的一种抽象，以javascript对象(VNode)作为基础的树，用对象的属性来描述节点，最终可以通过一些列的操作使这棵树映射到真实DOM上。

Virtual DOM至少包含标签名、属性和子元素三个属性。

Virtual DOM和真实DOM的属性是一一照应的。

为什么要用Virtual DOM

• 手动操作DOM比较麻烦，还需要考虑兼容性的问题，而且会随着项目的复杂DOM的操作也会变得复杂
• 由于Virtual DOM是以js对象为基础的，不依赖真实平台环境，所以Virtuall DOM具有跨平台的能力，例如：浏览器平台、Weex、Node、等，是实现ssr和小程序的基础
• 提升渲染能力
  直接操作DOM有昂贵的代码，频繁的引起回流和重绘，执行速度效率太低，而js对象就会快的多，通过diff算法的比对，最大限度的减少DOM操作，从而提高性能。

如何利用Virtual DOM来更新真实DOM

通过diff算法

diff - 就是different，在构建DOM的过程中，会由比对计算DOM变动的地方，核心是由patch算法将变动映射到真实DOM上，所以视图的创建更新流程就是：

1. 用js对象来描述DOM树的结构，然后用这个树构建一个真正的DOM树，插入到文档中。
2. 当状态变更的时候，重新构造一颗新的js对象树，然后用新的树和旧的树通过diff(比对不同)，记录新旧两颗树的差异
3. 把差异应用到真正的DOM树上