vue中的虚拟dom和diff算法

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

　　下面就是一个真实DOM映射到虚拟DOM的例子：

</ul>

var element = {

tagName: 'ul', // 节点标签名

props: { // DOM的属性，用一个对象存储键值对

id: 'list'

children: [ // 该节点的子节点

{tagName: 'li', props: {class: 'item'}, children: ["Item 1"]},

{tagName: 'li', props: {class: 'item'}, children: ["Item 2"]},

{tagName: 'li', props: {class: 'item'}, children: ["Item 3"]},

]

}

　　在补充点虚拟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的优势不在于单次的操作，而是在大量、频繁的数据更新下，能够对视图进行合理、高效的更新。

　　diff算法

　　vdom因为是纯粹的JS对象，所以操作它会很高效，但是vdom的变更最终会转换成DOM操作，为了实现高效的DOM操作，一套高效的虚拟DOM diff算法显得很有必要

　　diff算法包括一下几个步骤：

　　用 JavaScript 对象结构表示 DOM 树的结构;然后用这个树构建一个真正的 DOM 树，插到文

　　档当中

　　当状态变更的时候，重新构造一棵新的对象树。然后用新的树和旧的树进行比较(diff)，记录两棵树差异

　　把2所记录的差异应用到步骤1所构建的真正的DOM树上(patch)，视图就更新了

　　diff算法是通过同层的树节点进行比较而非对树进行逐层搜索遍历的方式，所以时间复杂度只有O(n)，是一种相当高效的算法

　　实现虚拟DOM的过程