因为vue/react组件的高度复用性,增加key可以标识组件的唯一性,key的主要作用是为了高效更新虚拟dom。(不推荐使用index,因为数组的索引是不稳定的,如果数据项的顺序被改变,Vue 将不会移动 DOM 元素来匹配数据项的顺序, 而是简单复用此处每个元素)
这里顺便提一下虚拟dom(vnode)和diff
Vue/react之所以运行高效,因为采用了虚拟dom,减少了对真实的dom操作
虚拟dom相当于在js和真实dom间加了个缓存,绑定的key可以让diff算法快速准确的定位到差异,避免了真实的dom操作,从而提高性能。(用 JavaScript 对象结构表示 DOM 树的结构;然后用这个树构建一个真正的 DOM 树,插到文档当中当状态变更的时候,重新构造一棵新的对象树。然后用新的树和旧的树进行比较,记录两棵树差异把 2 所记录的差异应用到步骤 1 所构建的真正的 DOM 树上,视图就更新了)
真实的dom操作会使得页面进行重新计算和渲染,因为js是单线程,频繁的调用dom会占用主线程太久,使得用户不能及时触发回调事件,引起页面卡顿。