虚拟 DOM 中 Key 的作用和好处

在前端快速发展的今天，如果不能时刻保持学习就会很快被淘汰。分享一下 Vue 虚拟 DOM 中 Key 的作用和好处。每天进步一点点。

1、 使用key可以最大程度的重用DOM，减少DOM操作；

2、 在具有相同父节点的时候，使用key可以避免渲染错误，最常见的用例是结合 v-for；

3、 用于强制替换元素/组件而不是重复使用它，比如给span标签设置key，当文本内容改变， 总是会被替换而不是被修改，因此会触发过渡。

在调用 patchVnode 进行新旧节点对比时，如果新旧节点都存在子节点，则调用 updateChildren 对子节点进行 diff 操作。在 updateChildren 方法中，遍历新旧节点，并调用 sameVnode 判断新旧节点是否为相同节点（4种情况：新旧节点的第一个节点和最后一个节点的两两对比）时，在sameVnode 方法中，时会首先判断key属性是否相同，如果key属性不同，则不是相同节点，继续进行下一组节点的判断。如果key属性相同，tag标签等等也都相同，说明是相同节点，直接递归调用 patchVnode 对比新老节点找到差异并更新到真实DOM，然后再获取下一组对比的节点。

如果四个顶点的4种情况的节点都不相同时，会先找到新开始节点的key，依次和老节点对比找到相同key的索引，这里做了优化。如果没有 oldKeyToIdx 时，遍历老节点的所有key属性并创建一个对象存放所有key属性的值为对应的老节点的索引，最后返回给 oldKeyToIdx 。判断新节点的key是否存在，如果存在去 oldKeyToIdx 对象中查找对应的相同key属性的老节点索引，如果key不存在，需要遍历老节点，依次去寻找相同节点的老节点索引。从这里也能看出设置key可以优化查找速度。