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

首先了解一下虚拟dom和diff算法

• 虚拟dom：用一个简单的对象去替代复杂的dom对象，该对象存储了对应dom的一些重要参数，在改变dom之前，会先比较相应的虚拟dom，如果需要改变，才会将相应的改变应用到真实dom上
• diff算法（差异算法）：用新渲染的对象树和旧的树进行对比，记录这两颗树的差异，记录下来的不同就是我们需要对页面正真的dom操作，然后把他们应用到正真的dom操作中，进行页面的变更；虽然每次视图结构都是整个全新的渲染，但是最后操作的只是dom不同的地方

写key的作用相当于给每一个vnode绑定一个id，可以根据这个key，更准确，更快的拿到oldVNode对应的VNode（diff算法中比较的对象）

• 更准确：带key就不是就地复用，在sameNode函数 a.key === b.key对比中可以避免就地复用的情况。所以会更加准确。
• 更快：利用key的唯一性生成map对象来获取对应节点，比遍历方式更快。

其实我们在正真写循环的时候，有时候不写key也不会出现什么问题，页面也会正常的渲染，我们的一些操作也能正确的得到相应，只是会跳出警告让你加上key，有时候我们为了省事直接让key = index，其实这些做法都是有一定的弊端的；

在一些情况下，不加key的速度会比加上key的速度更快，但是这并不是不加key的作用，而实没有key的情况下对节点的就地复用，可能提高性能；所谓