1、定义：
虚拟DOM其实就是用一个原生的JS对象去描述一个DOM节点，实际上它只是对真实 DOM 的一层抽象。最终可以通过一系列操作使这棵树映射到真实环境上。
相当于在js与DOM之间做了一个缓存，利用patch（diff算法）对比新旧虚拟DOM记录到一个对象中按需更新， 最后创建真实的DOM
2、虚拟dom原理流程
模板 ==> 渲染函数 ==> 虚拟DOM树 ==> 真实DOM
- vuejs通过编译将模板（template）转成渲染函数（render），执行渲染函数可以得到一个虚拟节点树
- 在对 Model 进行操作的时候，会触发对应 Dep 中的 Watcher 对象。Watcher 对象会调用对应的 update 来修改视图。
虚拟 DOM 的实现原理主要包括以下 3 部分：
- 用 JavaScript 对象模拟真实 DOM 树，对真实 DOM 进行抽象；
diff 算法— 比较两棵虚拟 DOM 树的差异；pach 算法— 将两个虚拟 DOM 对象的差异应用到真正的 DOM 树。
图解：
- 渲染函数： 渲染函数是用来生成
Virtual DOM的。- VNode虚拟节点： 它可以代表一个真实的dom节点。通过
createElement方法能将VNode渲染成 dom 节点。简单地说，vnode可以理解成节点描述对象，它描述了应该怎样去创建真实的DOM节点- patch(也叫做patching算法)： 虚拟DOM最核心的部分，它可以将vNode渲染成真实的DOM，这个过程是
对比新旧虚拟节点之间有哪些不同，然后根据对比结果找出需要更新的的节点进行更新
3、虚拟DOM好处
- 具备跨平台的优势–由于 Virtual DOM 是以
JavaScript 对象为基础而不依赖真实平台环境，所以使它具有了跨平台的能力，比如说浏览器平台、Weex、Node 等。 - 操作 DOM 慢，js运行效率高。我们可以将DOM对比操作
放在JS层，提高效率。运用patching算法来计算出真正需要更新的节点，最大限度地减少DOM操作，从而显著提高性能。Virtual DOM 本质上就是在 JS 和 DOM 之间做了一个缓存。 - 提升渲染性能 Virtual DOM的优势不在于单次的操作，而是在大量、频繁的数据更新下，能够对视图进行合理、
高效的更新 - 虚拟DOM就是为了
解决浏览器性能问题而被设计出来的
版权声明：本文内容由互联网用户自发贡献，该文观点仅代表作者本人。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容， 请联系我们举报，一经查实，本站将立刻删除。
发布者：全栈程序员-站长，转载请注明出处：https://javaforall.net/233812.html原文链接：https://javaforall.net
