本文详细介绍了Vue中v-for指令在遍历数组和对象时的用法，特别是针对对象的v-for操作。文章指出，Vue在渲染列表时采用“就地复用”策略，可能导致元素错位。为了解决这个问题，需要为列表项提供唯一的key值，以确保Vue能准确跟踪并更新每个节点。此外，文章还讨论了绑定key值与不绑定key的性能差异，建议根据场景选择合适的方式。最后，通过代码分析解释了绑定key值如何帮助Vue更高效地更新DOM。
数组的v-for
item in items
item of items
item,index in items
(item，index) in items
对象的v-for(键值，键名，索引)
value in object
(value, key) in object
(value, key, index) in object
v-for渲染的列表的结构采用“就地复用”的策略，也就说当数据重新排列数据时，会复用已在页面渲染好的元素，不会移动 DOM 元素来匹配数据项的顺序，这种模式是高效的，改变现有位置的结构的数据即可
eg：
问题：点击翻转数组哦，高亮并没有跟随1 在最后，而是直接复用在4上
原因：点击翻转数组哦，高亮并没有跟随1 在最后，而是直接复用在4上
解决：需要提供一个唯一的key值(常用ID)，以便它能跟踪每个节点的身份，从而重用和重新排序现有元素
补充知识：vue---绑定key值与不绑定key的作用及其优点
vue—key值绑定的作用及优点
**
本文基于vue2x版本进行解析：
绑定key值：可以更快速和更精确的确定变化数据的位置，并进行响应式操作，在一定量的数据之上时，是高性能的，更多的情况下与v-for一起使用；</
最低0.47元/天 解锁文章
扫一扫
2060
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
