diff 算法

参考：https://www.infoq.cn/article/uDLCPKH4iQb0cR5wGY7f

1. 概念

概念：diff 算法是一种优化手段，将前后两个模块进行差异化对比，修补（更新）差异的过程叫做patch（打补丁）

为什么 vue，react 这些框架中都会有 diff 算法呢，我们都知道真实 dom 的开销是很大的，这个跟性能优化中的重绘意义类似。某些时候我们修改了页面中的某个数据，如果直接渲染到真实 DOM 中会引起整棵树的重绘，那么我们能不能只让我们改变过的数据映射到真实 DOM，做一个最少的重绘呢，这就是 diff 算法要解决的事情。

2. virtual DOM和真实DOM的区别

virtual DOM 是将真实的 DOM 的数据抽取出来，以对象的形式模拟树形结构，dif f算法比较的也是virtual DOM

代码理解：

<div>
  <p>Hello World</p>
</div>
// 转换成虚拟节点 类似于下面这种
const Vnode = {
  tag: 'div',
  children: [
    {tag:'p', text:'Hello World'}
  ]
}

3. diff是如何比较的

概括起来就是对操作前后的 dom 树同一层的节点进行对比，一层一层对比，然后再插入真实的 dom 中，重新渲染。

vue中列表循环需加 :key="唯一标识" 唯一标识可以是 item 里面 id index等，因为 vue 组件高度复用增加 Key 可以标识组件的唯一性，那么 key 是如何更高效的更新虚拟 DOM 的呢

我们看下面的例子

我们希望可以在 B 和 C 之间加一个 F，diff 算法默认执行起来是这样的：即把 C 更新成 F，D 更新成C ，E 更新成 D，最后再插入 E，是不是很没有效率？

所以我们需要使用 key 来给每个节点做一个唯一标识，Diff 算法就可以正确的识别此节点，找到正确的位置区插入新的节点。