vue 组件v-for 绑定key属性的作用

参考:
vue的常见问题
关于vue的面试

当vue中使用 v-for 更新已经渲染过的元素列表时,默认用"就地复用"策略。

如果数据项的顺序被改变，Vue将不是移动DOM元素来匹配数据项的改变，而是简单复用此处每个元素，并且确保它在特定索引下显示已被渲染过的每个元素。

key 的作用

为了给Vue 一个提示,以便它能跟踪每个节点的身份,进行重用和重新排序现有元素,需要为每项提供一个唯一 key 属性。

key 属性主要用于Vue的虚拟算法。在对节点进行diff的过程中,判断新旧nodes是否为相同节点的一个重要条件就是 key 是否相等。如果是相同节点,则会尽可能的复用原有的DOM节点。

如果不使用key,Vue会使用一种最大限度减少动态元素并且尽可能的尝试修复/再利用相同类型元素的算法。

使用key，它会基于key的变化重新排列元素顺序，并且会移除 key 不存在的元素。