写 React / Vue 项目时为什么要在列表组件中写 key，其作用是什么

怼一波，在项目中有很多经常用到，但又含糊不清的知识点

框架中的key：

1. 为啥在遍历元素时要用 key ：在开发过程中为了保证遍历同级元素的唯一性，用来提高更新 dom 的性能；

2. 凭啥要保证元素的唯一性：从原理上来说就是框架会通过 key 来判断元素是否需要重新渲染，即 key 唯一则可保证元素唯一，key的作用就是更新组件时判断两个节点是否相同。相同就复用，不相同就删除旧的创建新的。；

3. 硬刚会有啥的问题：

1. 如果遍历渲染的数据变化量大，例如通过 socket 推送的实时数据，会导致数据最前一列数据展示为空，对于大多数场景来说，列表组件都有自己的状态。；
2. 如果遍历渲染数据输入框 <input /> , 可能导致无法准确定位到 input，获取不到预计的value值；
3. 如果是导致第一次执行循环体，可能会导致初始化失败，第一次执行初始化循环体失败是什么鬼，我反正没遇到过；

4. 总结：如果你非要正面刚，除非你能保证遍历的元素值是不会发生变化的，用户不输入或者服务器数据也不变化；

　　欢迎关注博主：微信公众号交流