搞懂diff算法的时间复杂度和v-for绑定key的作用

一、理解diff算法

我们知道对于真实DOM斜体样式的操作是非常昂贵的，因此有了虚拟DOM的概念，虚拟DOM的节点被称为vnode。当DOM节点发生变化时，通过新vnode与旧vnode的比较，来减少重绘重排的操作，这样能大大提升效率。而新旧vnode的比较就是通过Diff算法实现的。

1.传统的Diff算法

当页面进行渲染后，会生成一个虚拟DOM保存在内存中，节点发生变化时又生成新的虚拟DOM，传统的Diff算法是通过遍历循环对比新的虚拟DOM与之前保存的旧的虚拟DOM之间的变化（两层嵌套时间复杂度为O（n^2） ），如果每个节点都有变化则需要更新的操作，所以传统的Diff算法的时间复杂度是O(n ^3)。如果DOM的节点非常多，显然这个代价也是非常高的。

2.优化后的Diff算法

由于传统的Diff算法的时间复杂度O(n ^3)，是对性能很不友好的复杂度。在React中，React制定了一种时间复杂度为O（n）的Diff算法（Vue同样适用）。

简单来说React通过一下方式来降低时间复杂度：

1. 只做同层比较，如果父节点不同，就直接对该节点进行更改，而不对其子节点进行比较；
2. 通过key对DOM节点进行唯一的绑定。

二、v-for绑定key的作用

在上面我们提到React对Diff算法进行了优化，其中有一点就提到了绑定key。 key相当于是给每一个vnode一个唯一的id，当节点发生变化时，可以通过key，就可以更准确也更快的找到对应的旧虚拟DOM上发生改变的节点。

但需要注意的一点是，并不是所有情况下使用key值都能提升效率。当使用简单模板且时，其实不带key的情况下可以对节点就地复用，这比使用key的情况下性能更高。这在Vue2.x官方文档中也提到了这一点：