Vue中的diff算法

Vue中的diff算法

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

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

virtual DOM和真实DOM的区别

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

代码理解

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

diff是如何比较的?

源码地址https://github.com/vuejs/vue/blob/a702d1947b856cf3b9d6ca5fb27b2271a78a9a5b/src/core/vdom/patch.js#L70

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

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

image.png

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

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