vue项目种为什么要在列表组件中加key，其作用是什么？

vue和react的虚拟dom的diff算法大致相同，其核心是基于两个简单的假设。diff算法的处理方法，是对操作前后的dom树同一层节点进行对比，如图：

before  

当某一层有很多相平节点时，也就是列表节点时，diff算法的更新过程默认也是遵循以上原则。

比如一下这种情况：

example

我们希望在b-c之间加一个f，diff算法默认是这样的。

diff默认算法

即把c更新成f，e更新成d在插入e。是不是很没效率。

所以我们需要使用key来给每个节点做一个唯一标识，diff算法就可以正确的识别此节点，找到正确的位置区插入节点。

key的作用