博主:DongJiang
码龄:7年
等级:LV.22级
内容:316
今日访问:2312
访问总量:5936
博客简介:学习与分享
博客创建时间:2018-04-12
博客主页 立即前往
赞助位
成为赞助商

v-for循环为什么一定要绑定key?

来源: 2024-05-19 17:39:08 播报

vue中列表循环需加:key="唯一标识" 唯一标识可以是item里面id index等,因为vue组件高度复用增加Key可以标识组件的唯一性,为了更好地区别各个组件 key的作用主要是为了高效的更新虚拟DOM

1、vue更新已渲染过的元素时,默认使用就地复用策略(如果该元素dom未修改,则复用之前的元素,否则重新渲染这一项)。

2、key的作用是唯一标识组件元素,辅助判断新旧vdom节点在逻辑上是不是同一个对象,是否有更新

vue是通过比对组件自身新旧vdom进行更新的。

key的作用是唯一标识组件元素,辅助判断新旧vdom节点在逻辑上是不是同一个对象。

比如说数组里插入了一项,这就是很经典的例子。当没有key时,在某个节点位置插入一个元素,vue会认为不是同一个虚拟dom,会进行更新。如果key唯一标志了组件元素就不回出现这种问题。

提高效率,如果我们给列表增加了一条数据,页面只渲染了这数据

总结:

1、key的主要作用就是用来提高渲染性能

2、key属性可以避免数据混乱的情况出现

注意:

尽量不要使用索引值index作key值,一定要用唯一标识的值,如id等。因为若用数组索引index为key,当向数组中指定位置插入一个新元素后,因为这时候会重新更新index索引,对应着后面的虚拟DOM的key值全部更新了,这个时候还是会做不必要的更新,就像没有加key一样,因此index虽然能够解决key不冲突的问题,但是并不能解决复用的情况。如果是静态数据,用索引号index做key值是没有问题的。

原文出处:
版权声明:本文来源地址若非本站均为转载,若侵害到您的权利,请及时联系我们,我们会在第一时间进行处理。