vue 和 react 里的key的作用是什么? 为什么不能用Index？用了会怎样? 如果不加key会怎样?

原文链接：https://blog.csdn.net/weixin_45525653/article/details/124169686

1、什么是key
key是虚拟Dom对象的标识，在更新显示时key起着极其重要的作用。

2、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，随后渲染到页面

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

3、如果只是数据单纯的展示，不做增删改，使用index也没关系

4、如果不加key会怎样?

当不带Key的时候，采用的是遍历的方式来对比新旧节点，从而达到更新节点的效果。

带key的时候使用的是map映射来更新节点。

在模板简单的时候使用就地复用（就是不使用key）效率会更高。

所以使用key并不意味着一定可以提高diff算法的效率。

key的作用主要是为每个节点设置一个唯一的标识，可以更快，更准确的拿到节点。

在一些情况下，还可以避免就地复用带来的副作用（表单数据错位）

 

结论：

一、如果只是单纯的展示，不做任何的增加删除操作，那我们可以直接使用 index作为唯一标识，或者不加key(一般会报警告)

二、如果要做增加删除的操作，最好使用每条数据的唯一标识：如id号，手机号，身份证号等