vue v-for学习

v-for中key的作用

一、不设置key的情况下选中中间项，进行增、删操作数据会出错。

添加前

1.添加一项选中项由关羽变成张飞

添加后

2.删除一项的情况，选中项由张飞变成关羽

删除前

删除后

二、设置key的情况，无论添加、删除都不会导致数据出错

1.添加一项

2.删除一项

这里删除的是第二项，所以删除后没有选中项。

总结：

1.key的主要作用是为了高效的更新虚拟DOM,其原理是vue在patch过程中通过key可以精准判断两个节点是否是同一个,从而避免频繁更新不同元素,使得整个patch过程 更加高效,减少DOM操作量,提高性能。

2.另外,若不设置key还可能在列表更新时引发一些隐藏的bug

3.vue中在使用相同标签名元素的过渡切换时,也会使用到key属性,其目的也是为了让vue可以区分它们,否则vue只会替换其内部属性