【Vue】Vue 中的 key 有什么作用？（key 的内部原理）

虚拟 DOM 中 key 的作用

key 是虚拟 DOM 对象的标识，当状态中的数据发生变化时，Vue 会根据【新数据】生成【新的 DOM】，随后 Vue 进行【新虚拟 DOM】与【旧虚拟 DOM】的差异比较，比较规则见下文。

对比规则

1. 旧虚拟 DOM 中找到了与新虚拟 DOM 相同的 key：
   ① 若虚拟 DOM 中的内容没变，直接使用之前的真实 DOM；
   ② 若虚拟 DOM 中的内容变了，则生成新的真实 DOM，随后替换掉页面之前的真实 DOM。
2. 旧虚拟 DOM 中未找到与新虚拟 DOM 相同的 key
   ① 创建新的真实 DOM，随后渲染到页面中。

遍历列表时用 index 作为 key

若遍历时用 index 作为 key，因为 Vue 使用虚拟 DOM 对比算法以后，发现 input 并没有更新，而 input 里面输入的内容残留在真实 DOM 里面，故 input 里的内容并没有跟随列表更新。

用 index 作为 key 可能会引发的问题：

1. 若对数据进行逆序添加、逆序删除等破坏顺序操作：会产生没有必要的真实 DOM 更新（界面效果没有问题，但是效率低）
2. 如果结构中还包含输入类的 DOM：会产生错误的 DOM 更新（界面有问题）

遍历列表时用 id 作为 key

若用 id 作为 key，那么在使用虚拟 DOM 对比算法时，会发现新增的那条数据 key 与之前的不一样，那么就会新增一条 DOM。然后再对比后面的 DOM，发现 key 一样而且里面的内容也完全一样，故不需要进行更新。遗留在 input 里面的输入内容也就跟随之前的内容移动了。

开发中如何选择 key？

综上所述，我们进行 key 赋值时一定要保证 key 的唯一性，并且不会因为后续列表的错乱而导致 key 值与内容不对应的情况出现。否则就会有意想不到的 bug！

1. 最好使用每条数据的唯一标识作为 key，比如 id、手机号、身份证号、学号等唯一值（看项目具体情况）
2. 如果不存在对数据的逆序添加、逆序删除等破坏顺序操作，仅用于渲染列表用于展示，使用 index 作为 key 是没有问题的
3. 若没有指定 key，则默认使用 index 作为 key