2021/03/03 - 虚拟DOM的理解

[lxinr]

Virtual DOM 是什么?

Virtual DOM 其实就是一棵以 JavaScript 对象( VNode 节点)作为基础的树，用对象属性来描述节点，实际上它只是一层对真实 DOM 的抽象，可以通过一系列的操作使我这棵树映射成真实DOM

实现过程：

1. 用 JavaScript 对象模拟真实 DOM 树，对真实 DOM 进行抽象
2. diff 算法 — 比较两棵虚拟 DOM 树的差异
3. patch 算法 — 将两个虚拟 DOM 对象的差异应用到真正的 DOM 树

Virtual DOM的优点

• 保证性能下限： 框架内的虚拟DOM需要适配任何真实DOM API可能的操作，所以它的性能不会是最优，但依然比简单直接的DOM操作性能要好很多，因此框架内的虚拟DOM可以保证在开发者没有进行手动优化的情况下，依然能提供不错的性能
• 不需要手动操作DOM： 我们不再需要手动去操作 DOM，只需要写好 View-Model 的代码逻辑，框架会根据虚拟 DOM 和 数据双向绑定，帮我们以可预期的方式更新视图，极大提高我们的开发效率
• 跨平台： 虚拟 DOM 本质上是 JavaScript 对象,而 DOM 与平台强相关，相比之下虚拟 DOM 可以进行更方便地跨平台操作，例如服务器渲染、weex 开发等等