作用
简述:
向数组某个位置中插入一个元素
- 不使用key:
数据插入后,后面的不同的所有数据都要替换,最后还需要插入一次数据 - 使用key:
相比较,如果值相同,不做任何操作,只做一次插入操作
结论
- key的作用主要是为了高效的更新虚拟DOM,其原理是在vue在patch过程中通过key精准判断两个节点是否是同一个,从而避免频繁更新不同的元素,使得整个patch过程更加高效,减少dom操作量,提高性能
- 另外,若不设置key还可能在列表更新时引发一些隐藏的bug
- vue中在使用相同标签名元素的过渡切换时,也会使用到key属性,其目的也是为了让vue可以区分它们,否则vue只会替换其他内部属性而不会触发过渡效果