[Vue基础实战]v-for key的作用

vue的v-for中不加：key貌似也能正常显示，为什么要加：key呢？

我们知道vue可以动态的改变页面的结构，比如在一个div里面插入一个span标签，看似简单的操作，底层还是很复杂的，它是如何实现的呢？因为页面的html代码是dom树形结构，所以这个问题可以理解为将一棵树形结构转换为另一棵树形结构，diff算法就是用来干这个事的。要想把一棵树转换为另一棵树首先要解决的问题就是比较这两棵树之间的区别Vue对diff算法进行了优化，它是这样做的。

现在要把左边的dom树转换为右边的dom树，对每层去比较，找出每层节点的不同之处做相应的处理。

对于每一层节点是如何处理的呢？上面的一排A,B,C是原来的节点，下面的一排C,B,A是转换后要成为的节点。

原来的节点A(也可以为一组节点)去和转换后的节点C(也可以为一组节点)比较发现并不相同，则会创建节点C并删除节点A，节点B(也可以为一组节点)比较发现相同不变化，节点C和A比较发现不同，创建节点A，删除节点C.如此，该层的节点就由A B C转化成了 C B A 。

如此这番折腾，cpu估计会累的够呛，既然这些节点本身没有发生变化，只是位置变了，有没有可能只是去调整节点的位置而不用去做如此之多的创建，删除操作呢？必然是有的。

我们可以对同一层级的同组节点添加一个唯一的key进行区分，此处的key就好比数据库里面主键的概念，通过它可以唯一的确定一组节点。

这样vue就可以识别出每一组节点，经过比较key发现，A,B,C都是相同的。只是位置发生了变化，于是他就只是去做移动操作调整位置，而不是去做创建和删除的操作了，效率大大提高。

从这里可以看出，在做for循环的时候加入：key,可以让vue能够识别每一组节点，在一些场合中让我们的代码效率更高。

还有一个问题就是key的取值，很多伙伴习惯这里取索引index,能行吗？索引是按位置排序的，这里C的key变成了1，A的key变成了3，失去了key的功能，没有办法唯一确定一组节点了。