Vue-虚拟DOM

Vue-虚拟DOM

什么是虚拟DOM？

学js的我们都知道html 的基本就是DOM树，那什么是虚拟DOM呢？顾名思义，就是虚拟的DOM树，那他是用来干嘛的呢？不知道大家还记不记得js中的文档碎片，createDocumentFragment()，当我们需要频繁的向父元素中追加子元素时，会频繁的操作dom节点，增加内存的消耗，我们用文档碎片可以先将子元素添加到文档碎片中，等追加完毕在一次性加入到父元素中。虚拟DOM就类似与js中的文档碎片先对虚拟DOM进行操作，最后操作完毕一次性在页面中渲染出来，不用频繁的渲染页面。

Vue中的虚拟DOM(Virtual DOM)

Vue.js 2.0引入Virtual DOM,比Vue.js 1.0的初始渲染速度提升了2-4倍，并大大降低了内存消耗。那么，什么是Virtual DOM？为什么需要Virtual DOM？它是通过什么方式去提升页面渲染效率的呢？

1. 什么是Virtual DOM？

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

   简单来说，可以把Virtual DOM 理解为一个简单的JS对象，并且最少包含标签名( tag)、属性(attrs)和子元素对象( children)三个属性。不同的框架对这三个属性的命名会有点差别。

2. Virtual DOM作用是什么?

   虚拟DOM的最终目标是将虚拟节点渲染到视图上。但是如果直接使用虚拟节点覆盖旧节点的话，会有很多不必要的DOM操作。例如，一个ul标签下很多个li标签，其中只有一个li有变化，这种情况下如果使用新的ul去替代旧的ul,因为这些不必要的DOM操作而造成了性能上的浪费。

   为了避免不必要的DOM操作，虚拟DOM在虚拟节点映射到视图的过程中，将虚拟节点与上一次渲染视图所使用的旧虚拟节点（oldVnode）做对比，找出真正需要更新的节点来进行DOM操作，从而避免操作其他无需改动的DOM。

   其实虚拟DOM在Vue.js主要做了两件事：

   • 提供与真实DOM节点所对应的虚拟节点vnode
   • 将虚拟节点vnode和旧虚拟节点oldVnode进行对比，然后更新视图

3. 为何需要Virtual DOM?

   • 具备跨平台的优势

   由于 Virtual DOM 是以 JavaScript 对象为基础而不依赖真实平台环境，所以使它具有了跨平台的能力，比如说浏览器平台、Weex、Node 等。

   • 操作 DOM 慢，js运行效率高。我们可以将DOM对比操作放在JS层，提高效率。

   因为DOM操作的执行速度远不如Javascript的运算速度快，因此，把大量的DOM操作搬运到Javascript中，运用patching算法来计算出真正需要更新的节点，最大限度地减少DOM操作，从而显著提高性能。

   Virtual DOM 本质上就是在 JS 和 DOM 之间做了一个缓存。可以类比 CPU 和硬盘，既然硬盘这么慢，我们就在它们之间加个缓存：既然 DOM 这么慢，我们就在它们 JS 和 DOM 之间加个缓存。CPU（JS）只操作内存（Virtual DOM），最后的时候再把变更写入硬盘（DOM）

   • 提升渲染性能

   Virtual DOM的优势不在于单次的操作，而是在大量、频繁的数据更新下，能够对视图进行合理、高效的更新。