key的作用主要是为了高效的更新虚拟DOM;

key主要用来做dom diff算法用的,diff算法是同级比较,比较当前标签上的key与标签名,如果key和标签名都一样时,只是做了一个移动的操作,不会重新创建元素和删除元素;

同级比较;标签名不同,直接删除,不继续深度比较;标签名相同,key相同,就认为是相同结点,不继续深度比较;

在vue中,默认使用的是“就地复用”策略;

在dom操作时,如果没有key,会造成选项错乱;

如:若使用数组索引index作为key,当向数组中指定位置插入一个新元素后,这时会更新索引,对应着后面的虚拟dom的key全部更新了,这个时候还是会做不必要的更新,就像没有加key一样,因此,index只能解决key不冲突的问题,但是不能解决复用的问题,但是如果是静态数据,使用index作为key是没有问题的;

key只能是字符串或者是num类型;

Logo

前往低代码交流专区

更多推荐