key 是什么

简单来说key是给每一个vnode的唯一id,同时也是diff的一种优化策略,可以根据key,更准确, 更快的找到对应的vnode节点

详细来说的话
1.vue中使用for循环的话要加上:key 他的值是唯一的标识,这个唯一标识最好是item的id。因为vue组件高度复用的原因,增加key可以标识组件的唯一性,也是为了更好的区分个别组件

2.key主要的作用是高效更新虚拟DOM和diff算法用的,diff算法是同级进行比较,比较当前标签上的key和标签名,如果key和标签名都一样时只做一个移动的操作,不会重新创建元素和删除元素。

3.在我们for循环时,没有key的话,会默认使用“就地复用”策略。这时如果数据的顺序被改变,vue不是移动DOM元素来匹配数据的改变,而是复用原来位置的元素。比如这时删除第一个元素,在进行比较时发现标签一样但值不一样,就会复用之前的位置,将新值直接放到该位置,以此类推,最后多出一个时就会把最后一个删掉。

4.要注意的是,在对key进行赋值时,最好不要使用索引值index作为key值。因为如果我们使用index为key值,这时在数组中指定位置插入一个新元素,就会重新更新index,以及后边对应虚拟DOM的key也会更新。因此在项目中index虽然能够解决key不冲突的问题,但是并不能解决复用的情况。如果是静态数据的话 ,使用索引index做key值是没有问题的。

Logo

前往低代码交流专区

更多推荐