vue v-for key的原理

著作权归作者所有。
商业转载请联系作者获得授权,非商业转载请注明出处。
链接:http://caibaojian.com/vue2-0-rule.html
来源:http://caibaojian.com

提到v-for需要设置键值，许多人第一反应会从diff算法的角度去讲原因，我更喜欢举一个例子来演示一下原因
假设有这样的一个页面，页面的列表是通过遍历数组得来的，如下图所示

示例代码如下

现在需要删除第二个元素。下面我们分别在渲染列表是 不使用key,使用索引作为key, 使用唯一值id作为key,看三种场景删除第二个元素之后的效果

可以看到，不使用key，删除第二个元素之后，输入框前面的数字显示正确的，但是数字3后面的输入框的内容显示错了，应该显示 我是第三个

可以看到，使用索引作为key之后，与不使用key的效果一样，删除第二个元素之后，输入框前面的数字显示正确的，但是数字3后面的输入框的内容显示错了，应该显示 我是第三个

使用id作为key,显示正确

为什么v-for需要设置key，原因很简单。 对比数组 [1,2,3]和[1,3]，我们很容易发现删掉了2，但是计算机不是这样的逻辑

计算机对比新旧数组，发现1===1，保持不变
然后再对比2，发现2变成了3，那么就把2修改为3，原来第二行的元素都可以复用，只把数字改一下就可以了
然后在对比3与undefined，发现3被删了，索引把第三行的元素删掉
那么为什么不能用索引作为key呢？ 当删掉[1,2,3]中的2之后，数组的长度由3变成了2，那么原来数字3的索引就变成了数字2的索引了。

1.计算机对比key为0的值，发现都是1，保持不变
2.计算机对比key为1的值，发现从2变成了3，元素复用， 修改元素上面的文字
3.计算机对比key为2的值，发现被删掉了，所以删掉第三行元素
而对于使用id作为key,那么每条数据都有了唯一的标识，当删掉[{id:‘1’,value: 1},{id: ‘2’,value: 2}, {id: ‘3’, value:3}]中的第二个，整个过程如下

1.计算机取出新数据第一项的id，然后在原来数据里面寻找，发现存在相同id的数据，而且数据没有变化，所以保持不变
2.计算机继续取第二项的id，发现是3，然后从原来数据里面也找到了3，所以3保留
3.这时候旧数据里面剩了id为2的数据，而新的里面没有了，所以删掉。