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值是没有问题的。