为什么如Vue/小程序/React中都建议在类似于v-for的渲染列表中加入一个唯一的key？

Question

题目来源及自己的思路加入了唯一的key的具体作用是什么？在初次渲染列表的时候，key是否有优化的效果?key是在什么时候产生优化的效果的?希望看到这个小问题，能促进思考。###题目描述相关代码{{item.name}}

Answer 1

1、加入key的作用
当Vue.js用v-for正在更新已渲染过的元素列表时，它默认用“就地复用”策略。如果数据项的顺序被改变，Vue将不会移动DOM元素来匹配数据项的顺序，而是简单复用此处每个元素，并且确保它在特定索引下显示已被渲染过的每个元素。这个类似Vue1.x的track-by="$index"
引入Vue的官网回答，大概意思就是说，对已经渲染的dom节点，在源列表数据部分变化的时候，不用全部重新渲染dom，只是重新渲染数据变化的部分。
2、在初次渲染列表的时候，key是否有优化的效果?没有优化效果。
3、key是在什么时候产生优化的效果的?key是在源数据发生改变的时候，如果有key，就能追踪到具体是哪一项或哪几项数据发生了改变，就能只更新改变数据对应的dom。如果你key不唯一的话，vue就很难精确的追踪到改变的数据是哪些了，这也是为什么key必须唯一的原因。
另外，最好不要用列表渲染的index去作为key使用，因为当源数据发生位置变换，比如说，第一项的数据挪到了第二项，但是你的key还是不变的，vue为了更新对视图，就必须整个dom重新渲染，等于说白白消耗了很多性能。所以把index当做key使用，是完全没有意义的。