v-for为什么要加上key字段

v-for 在渲染完毕之后，如果有了新的改动，比如是在数组中间添加了一个元素，这个时候会执行diff算法去判断，拿到两个数组之后获取两个数组的长度，用较短的 length 去进行遍历比较，以当前条件下效率最高的方式执行更改。此时，如果元素没有添加 key 字段，遍历渲染如下：看图我们可以发现，从匹配到不同元素之后就开始替换和新增造成了资源浪费，然后我们看一下，加了key 之后的遍历流程，通过对key的匹配，实现最大程度上的复用：如果理解有误，欢迎指正！