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可以优化查找速度。