vue中Diff算法、key的作用原理

1、Diff算法步骤：

• 用js对象结构（虚拟DOM）表示 DOM 树的结构；然后用这个树构建一个真正的 DOM 树，插到文档当中
• 当状态变更的时候，重新构造一棵新的对象树。然后用新的树和旧的树进行比较，记录两棵树差异
• 把所记录的差异应用到所构建的真正的DOM树上，视图就更新了

Diff 算法： 仅在同级的vnode间做diff，递归地进行同级vnode的diff，最终实现整个DOM树的更新

2、key的作用原理：

• 唯一标识，为了高效的更新虚拟DOM
• transition过渡时，使用key属性，可以区分它们是否变化，否则vue只会替换其内部属性而不会触发过渡效果

添加key唯一标识后Diff算法就可以正确的识别此节点，找到正确的位置区插入新的节点。

key 是为 Vue 中 vnode 的唯一标记，通过这个 key，我们的 diff 操作可以更准确、更快速

• 更准确：因为带 key 就不是就地复用了，在 sameNode 函数a.key === b.key对比中可以避免就地复用的情况。所以会更加准确。
• 更快速：利用 key 的唯一性生成 map 对象来获取对应节点，比遍历方式更快

<transition>
  <span :key="text">{{ text }}</span>
</transition>

text发生变化时，span会被replaced，而不会patched，因此transition会被触发

列表节点时：在B和C之间加一个F

无key时：

• Diff算法默认执行把C更新成F，D更新成C，E更新成D，最后再插入E。
• 第二层级：Diff算法默认执行B1更新B2，B2更新B1，第三层级：EF节点删除，重新新建EF节点

有key时：
Diff算法就可以t通过唯一的标识key正确的识别此节点，复用key不变的节点，找到正确的位置区只插入需要更新的节点。

3、用index作为key会出现什么问题

• 一般情况下，只是展示list，没有太大问题
• list会动态变化删除、添加、排序等操作，就会出现错乱

比如，你明明删了第一行，但是视图上却删了第二行。
解析问题源于key的重复，当你删了第一行，那么第二行的key就变成了第一行的key，这两个key是相同的。