Vue - v-for “为什么要用key”&“为什么不能用index作为key” 看完这些文章就懂得差不多啦 站在巨人的肩膀上前进前进前进咧咧咧

（1）vue中使用v-for时“为什么要用key”&“为什么不能用index作为key”△
（2）VUE中演示v-for为什么要加key
关于Vue v-for中的:key作用
（4）v-for指令循环中key属性有什么作用？
Vue2.0 v-for 中 :key 到底有什么用？
（6）v-for中：key的作用总结
特殊 attribute：key
（7）列表渲染

摘自文章（1）（2）（4）（6）：

【总】：
key 的特殊 attribute 主要用在 Vue 的虚拟 DOM 算法，在新旧 nodes 对比时辨识 VNodes。如果不使用 key，Vue 会使用一种最大限度减少动态元素并且尽可能的尝试就地修改/复用相同类型元素的算法。而使用 key 时，它会基于 key 的变化重新排列元素顺序，并且会移除 key 不存在的元素。

【分】：
①不设key：就地复用
当Vue用 v-for 正在更新已渲染过的元素列表是，它默认用“就地复用”策略。如果数据项的顺序被改变，Vue将不是移动DOM元素来匹配数据项的改变，而是简单复用此处每个元素，并且确保它在特定索引下显示已被渲染过的每个元素。

②设置key：
为了给Vue一个提示，以便它能跟踪每个节点的身份，从而重用和重新排序现有元素，你需要为每项提供一个唯一 key 属性。key属性的类型只能为 string或者number类型。

可以简单的这样理解：加了key(一定要具有唯一性) id的checkbox跟内容进行了一个关联。是我们想达到的效果。

【总】
（1）为什么设置key：
①主要是为了高效的更新虚拟DOM；
Vue是不直接操作DOM的，是通过js的Object对象来模拟DOM中的节点，比较虚拟DOM是用的diff的算法。
diff算法的图：

总体意思来说：只会同级比较，不会跨级比较。
举例：

如上图：在同级A,B,C,D四个节点中，在B和C之间插入E,没有key的时候：C更新成了E，D更新成了C，最后插入D，这样效率很低。
加上key之后，就能准确的找到节点的位置：发现ABCD都没变化，直接插入E就可以了。
所以key的作用主要是为了高效的更新虚拟DOM
②【分】的举例：可以简单的这样理解：加了key(一定要具有唯一性) id的checkbox跟内容进行了一个关联，是我们想达到的效果。

（2）设置key为什么不直接用index：
①更新DOM的时候会出现性能问题；
②直接用index会发生一些状态bug