diff算法和虚拟节点

持续创作，加速成长！这是我参与「掘金日新计划 · 10 月更文挑战」的第2天，点击查看活动详情

diff算法个人理解 就是对比两个虚拟节点，找出不同的差异，对应到真实的dom上去，去做打补丁的工作， 我们用diff就是想用最小的代价，去操作dom，dom本身的操作是很操作性能，尤其是我们新建一个dom节点，创建一个dom节点需要创建很多属性，性能消耗很大相对新建一个字符串来说，所以diff还有一个作用就是尽量复用已有dom，

用到diff算法，我们就需要用到虚拟节点，先对比两个新老的虚拟节点，找到差异，然后在去匹配真实dom并且去打补丁

市面上的 不管vue还是react，他们的模版最终都会先转化为虚拟节点(最原始的虚拟节点)，更改之后模版会形成一个新的虚拟节点，初始化为老的虚拟节点，更改之后为新的虚拟节点，进行对比，可以看下面的示意图

这个图是一个新老虚拟dom的一个对比图

diff 算法只会平级对比，以上面的图为例，不会第二行的节点和第三行的去对比 请看图

在形成虚拟节点的时候都会有一个标号，新老节点只有标号相同才会去对比。(下图显示)

diff是深度优先遍历，可以先看下图 会按照图上面的数字顺序进行遍历然后去做对比，红色的数字就是形成虚拟don时的索引，做对比的也会用到。 可以简单看下虚拟dom代码层面的怎么表示(简单表示)事件情况肯定会更加复杂

   {
      tag:tag, // 标签
      attr: attr, // 属性
      children:children, // 自节点
      el: null // 根root
  }

其实就是一段json，后面会继续介绍实现