vue中key值的作用及虚拟DOM和虚拟DOM的diff算法

Virtual DOM的产生原因

由于在浏览器中操作DOM是很昂贵的。频繁的操作DOM，会产生一定的性能问题。这就是虚拟Dom的产生原因。

虚拟dom的本质就是用一个原生的JS对象去描述一个DOM节点。这是对真实DOM的一层抽象。也就是源码中的VNode类 - 定义在src/core/vdom/vnode.js中。

Virtual DOM的diff算法

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

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

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

档当中

• 当状态变更的时候，重新构造一棵新的对象树。然后用新的树和旧的树进行比较(diff)，记录两棵树差异
• 把2所记录的差异应用到步骤1所构建的真正的DOM树上(patch)，视图就更新了

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

 

key值的作用

key的作用是尽可能的复用 DOM 元素

key是给每一个vnode的唯一id,可以依靠key,更准确, 更快的拿到oldVnode中对应的vnode节点

新旧 children 中的节点只有顺序是不同的时候，最佳的操作应该是通过移动元素的位置来达到更新的目的。

需要在新旧 children 的节点中保存映射关系，以便能够在旧 children 的节点中找到可复用的节点。key也就是children中节点的唯一标识