likes
comments
collection
share

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

作者站长头像
站长
· 阅读数 279

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