理解虚拟dom

vue

问题

1. 随着程序越来越复杂，调用和更新页面导致DOM操作越来越多，难以维护
2. DOM是很慢的，频繁的dom操作会使得性能变差

演变

• MVVM
  减少代码中的视图更新逻辑
  状态改变了要操作相应的DOM元素==>让视图和状态进行绑定，状态变更了视图自动变更=> MVVM 模式:只要在模版中声明视图组件是和什么状态进行绑定的，双向绑定引擎就会在状态更新的时候自动更新视图。
  性价比太低
  最大的问题就是这样做会很慢，因为即使一个小小的状态变更都要重新构造整棵 DOM。

• Virtual DOM
  加了一些特别的步骤来避免了整棵 DOM 树变更
  所谓的 Virtual DOM 算法。

  包括几个步骤：

  • 用 JavaScript 对象结构表示 DOM 树的结构；
  • 然后用这个树构建一个真正的 DOM 树，插到文档当中当状态变更的时候，重新构造一棵新的对象树。
  • 然后用新的树和旧的树进行比较，记录两棵树差异把2所记录的差异应用到步骤1所构建的真正的DOM树上，视图就更新了

链接：https://www.zhihu.com/question/29504639/answer/73607810
来源：知乎
。