前端vue、react中key的作用，以及为什么不能用index作为key的值（面试常考）

什么是key

key是虚拟Dom对象的标识，在更新显示时key起着极其重要的作用。
当Vue中data或React中state的数据发生变化时，react会根据新数据生成新的虚拟Dom，随后Vue/React会对「新虚拟Dom」和「旧虚拟Dom」进行diff比较，比较规则如下：

1⃣️ 旧虚拟Dom中找到与新虚拟Dom相同的key：
（1）若虚拟Dom中的内容没变，则直接使用之前的真实Dom
（2）若虚拟Dom中的内容变了，则生成新的真实Dom，随后替换掉页面中之前的真实Dom

2⃣️ 旧虚拟Dom中没有找到与新虚拟Dom相同的key：
（1）根据数据创建新的真实Dom，随后渲染到页面

为什么遍历列表时，key最好不要用index

用index作为key，可能引发的问题如下：

1⃣️ 若对数据进行逆序添加，逆序删除等破坏顺序的操作，会产生虚拟DOM和旧的真实DOM中的部分key（甚至所有Key）都对不上的问题，接着会产生很多没有必要的真实DOM更新，渲染效率低下。
2⃣️ 如果列表行结构中还包含输入类的DOM，则会产生错误的DOM更新，使得界面出现问题

开发中如何选择Key

1⃣️ 最好使用每条数据的唯一标识：如id号，手机号，身份证号等

参考视频资料：

🎬 参考视频直通车