在使用v-for遍历数据渲染列表时，一般会给元素添加一个key属性，这个key的作用是什么呢？

官方的解释：

key属性主要用在Vue的虚拟DOM算法，在新旧nodes对比时辨识VNodes；如果不使用key，vue会使用一种最大限度减少动态元素并且尽可能尝试就地修改/复用相同类型元素的算法；而使用key时，它会基于key的变化重新排列元素顺序，并且会移除/销毁key不存在的元素。

我们举一个例子，在a、b、c、d四个中插入f变成a、b、f、c、d，从源码的角度去理解这段话。

当没有key属性时，vue底层调用的是patchUnkeyedChildren方法，理论上c、d并无任何改动，但是却因为f的插入，导致c之后的所有内容都要进行改动，最后新增一个VNode，diff算法的效率并不高。

而当有key属性时，vue底层调用的是patchKeyedChildren方法，流程如下图所示。

1、从头部遍历旧节点，比较新旧节点，遇到key不同时跳出循环；

2、从尾部遍历旧节点，比较新旧节点，遇到key不同时跳出循环；

3、旧节点遍历完还有新节点就新增新节点；

4、新节点遍历完还有旧节点就移除旧节点；

5、如果中间存在不知道如何排序的位置序列，就是用key建立索引图最大限度地使用旧节点。

由此可以看出，在进行插入或者重置顺序时，使用key属性可以让diff算法更高效，提高渲染效率。