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

Question

题目来源及自己的思路

1. 加入了唯一的key的具体作用是什么？
2. 在初次渲染列表的时候，key是否有优化的效果?
3. key是在什么时候产生优化的效果的?

希望看到这个小问题，能促进思考。### 题目描述

相关代码

<ul>
    <li v-for="(item, index) in itemList" key="index">{{item.name}}</li>
</ul>

Answer 1

1、加入key的作用

当 Vue.js 用 v-for 正在更新已渲染过的元素列表时，它默认用“就地复用”策略。如果数据项的顺序被改变，Vue 将不会移动 DOM 元素来匹配数据项的顺序， 而是简单复用此处每个元素，并且确保它在特定索引下显示已被渲染过的每个元素。这个类似 Vue 1.x 的 track-by="$index"

引入Vue的官网回答，大概意思就是说，对已经渲染的dom节点，在源列表数据部分变化的时候，不用全部重新渲染dom，只是重新渲染数据变化的部分。

---

2、在初次渲染列表的时候，key是否有优化的效果?
没有优化效果。

---

3、key是在什么时候产生优化的效果的?
key是在源数据发生改变的时候，如果有key，就能追踪到具体是哪一项或哪几项数据发生了改变，就能只更新改变数据对应的dom。如果你key不唯一的话，vue就很难精确的追踪到改变的数据是哪些了，这也是为什么key必须唯一的原因。

---

另外，最好不要用列表渲染的index去作为key使用，因为当源数据发生位置变换，比如说，第一项的数据挪到了第二项，但是你的key还是不变的，vue为了更新对视图，就必须整个dom重新渲染，等于说白白消耗了很多性能。所以把index当做key使用，是完全没有意义的。

Answer 2

key的作用

1. key 帮助确定list中哪些item已更改，添加或删除。
2. 便于在dom变化后，对比新旧DOM具体哪些item已变化，加快虚拟dom渲染和性能提升

Answer 3

简单说key值是浏览器 DOM 首次渲染的时候会用到。
也就是说你循环的数据首次渲染到页面上，数据也就会绑定到DOM上。

假如说 这个时候你操作的数据，使数据位置发生了变化，恰好这个时候如果你用了下标当key值的话。会出现key值的重叠，你会发现你取得值会跟绑定的dom上的值有不同。

解决办法，用一个唯一的值。比如说 后端返给你的id

这也是我理解的。不对的话 也希望大神们指出，相互学习