vue的v-for中为什么要加：key

声明：此文章不是原创，在百度一下发现的，我认为它清晰的解释了vue的v-for中为什么要加：key的原因。内容精炼且条理清晰，易读性强，所以想在这里分享给大家，让学习变得多元化。

注：大家也可以再提炼一下精粹，让它变得生动形象，有趣，短小精悍。

在评论区可以展现自己学识才华哦

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

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

DOM树

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

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

转换目标

没有key(创建删除过程)

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

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

有key(调整位置过程)

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

转换过程

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

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

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

索引不唯一

对于这个key值问题，建议有唯一标识时，使用唯一标识，不用index做key值。

今天了解一个思考小方法感觉不错

1-----问题的技术点是什么？

2-----有什么作用？

3-----怎么用？

4-----原理？

按照这个过程思考应该是比较有条理的！

欢迎大家多多留言和私信