vue的key值引起渲染错位的血案

原本小程序都已经完成的几乎完美了，昨天市场部的小伙伴拿去测试，过了一下子又扔给我一张图上面写着密密麻麻的问题，能够说是把我吓得够呛，结果看完了以后发现都是问卷数据的问题，本想着这些都与我无瓜了，可是不当心瞟到一眼好几个地方出现了选项错位的问题，本身拿来一测发现真的是这样的。

问题就在于根据一道题级联出许多类型的题，当我按照顺序点击那道特定的题的时候不会出现错位的状况，可是当我反着顺序来的时候就会出现错位的现象

进一步打印信息发现，其实我在子组件中拿到的数据就已是错误的信息了，可是我在父组件打印的时候倒是正确的，因此问题究竟出在哪里呢？

通过一下午的百度，彷佛并无找到好的解决方案，晚上回去了问室友室友说多是由于key致使的，我就以为不对啊，不是key值惟一吗，我用的是index不该该会有问题啊，事实证实我果真是个新人理解不够透彻，我把key值改为惟一的id渲染就正常了！！！

问题是index不是惟一的吗？因而今天我就去搜了一下这个问题。

原来实际上是不推荐使用下标来作key值的，这其实只是咱们以为他惟一，其实并非，他只是每次按照这个index去从新渲染，若是咱们在要渲染的数组中插入一条新数据，就会由于index而直接将全部的数据都从新渲染，显然这样从性能上来说也是很差的。这个时候的index就跟原来的位置出现了误差，也就致使了个人错位问题，这个缘由就要说到框架底层使用的diff算法了，这跟react是同样的。

其核心在于：

1. 两个相同的组件产生相似的DOM结构，不一样的组件产生不一样的DOM结构

2. 同一层级的一组节点，他们能够经过惟一的id进行区分。基于以上这两点假设，使得虚拟DOM的Diff算法的复杂度从O()降到了O(n)

什么意思呢？下面这张图就表达的更为清楚一些

咱们要探讨的就是同一层级的不一样节点，由于diff算法的默认状况是从左往右一个一个的去找到你要的位置，这样的效率是十分底下的

 --->

所以就会须要一个惟一的key值标识来让diff算法直接找到正确的位置插入新的节点，这个时候也就说明了index是不合适的，由于他的默认算法自己就是根据index来来寻找位置的，所以key值若是给的是index实际上是没有意义的。

总之通过此次的踩坑，之后我就不再用index来作key值了，谁知道何时会忽然出点莫名其妙的错