什么是虚拟dom

Virtual DOM（虚拟DOM） 就是由普通的 JS 对象来描述DOM对象，因为不是真实的DOM对象，所以叫 Virtual DOM。
虚拟DOM就是使用一个虚拟的 DOM 树来描述真实的 DOM 树结构和节点属性，通过比较新旧两颗虚拟 DOM 树的差异，最终只需要对修改的部分进行实际的 DOM 操作。

使用步骤：

虚拟DOM就是将当前页面的 DOM 树映射为一个 JavaScript 对象形式的虚拟 DOM。
然后当应用程序状态发生改变时，根据新状态生成一个新的虚拟 DOM。
比较新旧两个虚拟 DOM 的差异，得到需要进行修改的 DOM 元素。
根据差异列表，对有修改的 DOM 元素进行实际的 DOM 操作，使浏览器重新渲染。

二、真实DOM和虚拟DOM对比 

  通过打印一个真实DOM的成员（div的属性）发现，一个DOM对象（div）的成员非常多，所以创建一个DOM对象的成本是非常高的。

三、为什么使用 Virtual DOM

1.手动操作 DOM 比较麻烦，还需要考虑浏览器兼容性问题。
2.虽然有 jQuery 等库简化 DOM 操作并解决了兼容性问题。
3.但是随着项目的复杂，DOM操作复杂提升，既要考虑操作数据，又要考虑操作 DOM。
4.为了简化 DOM 的复杂操作，于是出现了各种 MVVM框架，MVVM 框架解决了视图和状态的同  步问题，也就是：
 当数据发生变化，自动更新视图
 当视图发生变化，自动更新数据
过去，为了简化视图的操作，可以使用模板引擎。但是模板引擎没有解决跟踪状态变化的问题，即当数据发生变化的时候，无法获取上一次的状态。只好把页面中的元素删除，然后重新创建。无法最小范围更新视图。于是 Virtual DOM 出现了。

5.Virtual DOM 的好处是，当状态改变时不需要立即更新 DOM，只需要创建一个虚拟 DOM 树来描述 DOM

6.Virtual DOM 内部将弄清楚如何有效（diff）的更新 DOM。
7.内部使用 diff 算法，找到状态的差异，只更新变化的部分。

原创作者：吴小糖
创作时间：2024.3.19