v-for key && index && item.id

以前对v-for中key的处理,一直直接::key=’index’,也没觉得有啥问题。直到小雪指出..

原来和虚拟dom有关,首先 index 这个顺序是永远不会变的:0123..,所以当我们修改某个节点,会产生两个相同的key,这样的话vue需要比较两个相同key的dom元素。使用唯一的key值(如item的id);当某个节点改变,拿到这个key,就能找到节点,只渲染当前节点,提高效率;另外,假如不加key的话,当改变某个节点,全部节点都要重新渲染,因为不知道是哪个变了。

总结:使用v-for渲染元素时,使用元素自身的id属性去指定渲染元素的key值有利于单个元素的重新渲染,若采用其他如v-for提供的index, key等值,在改变渲染出来的DOM结构时,会触发所有元素的重新渲染,当数据过大时,可能会造成性能负担。