【Vue | 补洞 | 23】为何不推荐用 index 作为 key

Vue 中的 key，如同身份证一样起作用。但为何说 v-for 中尽量不用 index 作为 key 呢？

1. key 的作用

  标识模板中的 DOM 元素

  注意！一个很重要的结论：在 v-for 中，拿 index 作为 key 的前提，是该数组数据的顺序不会被改变（即只是单纯地展示，而不涉及删除等会打乱数组排序的操作）

2. 如何起作用

  Vue2 的模板语法，即被写在 <template> 标签内的所有 HTML 标签，并非直接展示在页面上，而是会先被 Vue 进行解析，生成虚拟DOM节点，之后再由虚拟DOM转为真实DOM，真实DOM才会真正显示在页面上。

  在虚拟DOM转换的过程中，如何提升解析效率？便是通过 key。先来一个容易理解的小常识：

  每个人的DNA都不同。从理论上讲，要真正识别 “你” 是不是 “你” 这个问题，进行DNA鉴定是最准确的方法。

  但是DNA鉴定很麻烦，效率很低，因此人们通过 身份证号 来标识，在大部分情况下，身份证就是 “你” 的标识，方便快速。

---

  虽然使用身份证很方便，但也有不足：如果身份证落入他人手里，他们一样能冒充你的身份。

  上面的小常识，对于 key 的作用来说也是类似

  如果每次数据发生修改，引起了模板的重新解析，就会 重新走一遍 虚拟DOM转为真实DOM的操作，效率极低。

  因此 Vue 设计了 key，用于标识虚拟DOM，这里的 key 就如同 身份证。

  当每次模板重新解析时，会 对比新旧两次的虚拟DOM，若 key 存在且对比结果相同，就直接复用旧的虚拟DOM来生成界面了，效率大大加快；这个过程，就犹如通过身份证来识别身份。

---

  但是，和身份证的不足一样：一旦修改了数组顺序，Vue 才不会管是谁拿着 key，它只要把 key 对应上了就复用，而不会管你内部的数据是怎么样的。所以，可能会出现这样一种情况：原先 key=2 的数据，对应 index=2；后来修改顺序后，key=2的数据，对应着 index=1。这就会 导致数据对应关系错乱！

  从伪代码的角度上看，虚拟DOM对比算法如下：

if(旧虚拟DOM === 新虚拟DOM) {
	// 复用DOM节点
} else {
	// 将虚拟DOM转为真实DOM
}

3. 总结

• 尽量不用 index 作为 key，用 数据本身的标识 作为 key 更合适
• 如果列表数据 不涉及到顺序改变，用 index 作为 key 是没问题的
• key 只在 虚拟DOM 的对比算法中起作用，为了 提高模板解析效率