v-for中为什么要用key

311 阅读1分钟
  1. 因为vue组件高度复用增加key可以标识组件的唯一性,为了更好的区别各个组件key主要是为了高效的更新虚拟DOM
  2. key主要用来做diff算法使用,diff算法是同级比较,比较当前标签上的key还有它当前的标签名,如果key和标签名都一样只是做了移动操作,不会重新创建元素和删除元素。
  3. 没有key的时候默认使用的是,“就地复用”策略。如果项的顺序被改变,vue不是移动Dom元素来匹配数据项的改变,而是简单服用原来位置的每个元素。如果删除第一元素,在进行比较时发现标签一样值不一样时,就会复用之前的位置,将新值直接放到该位置,以此类推,最后多出一个就会把最后一个删除掉。
  4. 尽量不要使用索引index作key值,一定要用唯一标识的值,如id等。因为若用数组索引index为key,当回数组中指定位置插入一个新元素后,因为这时候会重新更新index索引,对应着后面的虚拟DOM等key值全部更新了,这个时候还是会做不必要的更新,就像没有加key一样,因此index虽然能解决key不冲突的问题,但是并不能解决复用的情况。如果是静态数据,用索引号index做key值是没有问题的。