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

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

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

进一步打印信息发现,其实我在子组件中拿到的数据就已经是错误的信息了,但是我在父组件打印的时候却是正确的,所以问题究竟出在哪里呢?

经过一下午的百度,似乎并没有找到好的解决方案,晚上回去了问室友室友说可能是因为key导致的,我就觉得不对啊,不是key值唯一吗,我用的是index不应该会有问题啊,事实证明我果然是个新人理解不够透彻,我把key值改成唯一的id渲染就正常了!!!

问题是index不是唯一的吗?于是今天我就去搜了一下这个问题。

原来其实是不推荐使用下标来做key值的,这其实只是我们觉得他唯一,其实并不是,他只是每次按照这个index去重新渲染,如果我们在要渲染的数组中插入一条新数据,就会因为index而直接将所有的数据都重新渲染,显然这样从性能上来讲也是不好的。这个时候的index就跟原来的位置出现了偏差,也就导致了我的错位问题,这个原因就要说到框架底层使用的diff算法了,这跟react是一样的。

其核心在于:

1. 两个相同的组件产生类似的DOM结构,不同的组件产生不同的DOM结构

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

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

diff解释

我们要探讨的就是同一层级的不同节点,因为diff算法的默认情况是从左往右一个一个的去找到你要的位置,这样的效率是十分底下的

目标 --->结果

因此就会需要一个唯一的key值标识来让diff算法直接找到正确的位置插入新的节点,这个时候也就说明了index是不合适的,因为他的默认算法本身就是根据index来来寻找位置的,因此key值如果给的是index其实是没有意义的。

总之经过这次的踩坑,以后我就再也不用index来做key值了,谁知道什么时候会突然出点莫名其妙的错

原文地址:https://www.cnblogs.com/fdd-111/p/11803380.html