# vue 的 Diff 算法

数据发生变化，Vue 是如何工作，更新 DOM 的

通常界面的 DOM 很少会出现大量的修改，都是局部的Ui的变化，

diff 算法之前 ：这时如果要修改其中一个DOM元素。直接渲染到真实dom上会引起整个dom树的重绘和重排。

diff 算法：解决这个问题，帮我们精准的查找到了，那个需要修改的 dom。实现了局部更新。

比喻：有两个人名 notdiff 和 diff, 他们都刚洗好澡，手都同时脏了。notdiff 他重新洗了个澡，但是 diff 有思想了，只把手给洗干净了。

真实工作流程：在组件运行过程中，框架首先根据真实 DOM 构建一棵 Virtual DOM（虚拟节点树）。当组件数据发生变化时，会生成一个新的 Virtual DOM（newVnode）。随后，框架将新旧虚拟节点（newVnode 与 oldVnode）进行对比（diff），找出变更部分，并以最小化的方式更新真实 DOM。最后，将 newVnode 替换为 oldVnode，用于下一次对比。

diff算法的过程就是调用名为patch的函数，比较新旧节点，一边比较一边给真实的DOM打补丁。

Virtual DOM和真实DOM的区别

virtual DOM是将真实的DOM的数据抽取出来，以对象的形式模拟树形结构。比如dom是这样的：

<div>
    <p>123</p>
</div>

对应的virtual DOM（伪代码）：

var Vnode = {
    tag: 'div',
    children: [
        { tag: 'p', text: '123' }
    ]
};

diff 算法的比较方式

在采取diff算法比较新旧节点的时候，比较只会在同层级进行, 不会跨层级比较。这样的做法是为了降低比较的复杂程度。

<div>
    <p>123</p>
</div>

<div>
    <span>456</span>
</div>

上面的代码会分别比较同一层的两个div以及第二层的p和span，但是不会拿div和span作比较。

diff 算法流程图

当数据发生改变时，set方法会让调用Dep.notify通知所有订阅者(Watcher)，订阅者就会调用patch给真实的DOM打补丁，更新相应的视图。

具体分析

看看patch是怎么打补丁的（代码只保留核心部分）

function patch (oldVnode, vnode) {
    // some code
    if (sameVnode(oldVnode, vnode)) {
    	patchVnode(oldVnode, vnode)
    } else {
    	const oEl = oldVnode.el // 当前oldVnode对应的真实元素节点
    	let parentEle = api.parentNode(oEl)  // 父元素
    	createEle(vnode)  // 根据Vnode生成新元素
    	if (parentEle !== null) {
            api.insertBefore(parentEle, vnode.el, api.nextSibling(oEl)) // 将新元素添加进父元素
            api.removeChild(parentEle, oldVnode.el)  // 移除以前的旧元素节点
            oldVnode = null
    	}
    }
    // some code 
    return vnode
}

sameVnode

• 判断两节点是否相同，相同则执行patchVnode 进行深入检查他们的子节点比较

  function sameVnode (a, b) {
    return (
      a.key === b.key &&  // key值
      a.tag === b.tag &&  // 标签名
      a.isComment === b.isComment &&  // 是否为注释节点
      // 是否都定义了data，data包含一些具体信息，例如onclick , style
      isDef(a.data) === isDef(b.data) &&  
      sameInputType(a, b) // 当标签是<input>的时候，type必须相同
    )
  }
  
  

• 不相同比较则用Vnode替换oldVnode

虽然这两个节点不一样但是他们的子节点一样怎么办？别忘了，diff可是逐层比较的，如果第一层不一样那么就不会继续深入比较第二层了。（我在想这算是一个缺点吗？相同子节点不能重复利用了...）不算，这是在性能上的取舍，为了降低对比的复杂程度。

patchVnode

当确定两个节点是一致后，需要进一步对其子节点进行比较patchVnode方法。那么这个方法做了什么呢？

patchVnode (oldVnode, vnode) {
    const el = vnode.el = oldVnode.el
    let i, oldCh = oldVnode.children, ch = vnode.children
    if (oldVnode === vnode) return
    if (oldVnode.text !== null && vnode.text !== null && oldVnode.text !== vnode.text) {
        api.setTextContent(el, vnode.text)
    }else {
        updateEle(el, vnode, oldVnode)
    	if (oldCh && ch && oldCh !== ch) {
            updateChildren(el, oldCh, ch)
    	}else if (ch){
            createEle(vnode) //create el's children dom
    	}else if (oldCh){
            api.removeChildren(el)
    	}
    }
}

这个函数做了以下事情：

• 找到对应的真实dom，称为el
• 判断Vnode和oldVnode是否指向同一个对象，如果是，那么直接return
• 如果他们都有文本节点并且不相等，那么将el的文本节点设置为Vnode的文本节点。
• 如果oldVnode有子节点而Vnode没有，则删除el的子节点
• 如果oldVnode没有子节点而Vnode有，则将Vnode的子节点真实化DOM之后添加到el
• 如果两者都有子节点，则执行updateChildren函数比较子节点，这一步很重要

其他几个点都很好理解，我们详细来讲一下updateChildren

updateChildren

代码量很大，不方便一行一行的讲解，所以下面结合一些示例图来描述一下。

• 代码

  updateChildren (parentElm, oldCh, newCh) {
      let oldStartIdx = 0, newStartIdx = 0
      let oldEndIdx = oldCh.length - 1
      let oldStartVnode = oldCh[0]
      let oldEndVnode = oldCh[oldEndIdx]
      let newEndIdx = newCh.length - 1
      let newStartVnode = newCh[0]
      let newEndVnode = newCh[newEndIdx]
      let oldKeyToIdx
      let idxInOld
      let elmToMove
      let before
      while (oldStartIdx <= oldEndIdx && newStartIdx <= newEndIdx) {
          if (oldStartVnode == null) {   // 对于vnode.key的比较，会把oldVnode = null
              oldStartVnode = oldCh[++oldStartIdx] 
          }else if (oldEndVnode == null) {
              oldEndVnode = oldCh[--oldEndIdx]
          }else if (newStartVnode == null) {
              newStartVnode = newCh[++newStartIdx]
          }else if (newEndVnode == null) {
              newEndVnode = newCh[--newEndIdx]
          }else if (sameVnode(oldStartVnode, newStartVnode)) {
              patchVnode(oldStartVnode, newStartVnode)
              oldStartVnode = oldCh[++oldStartIdx]
              newStartVnode = newCh[++newStartIdx]
          }else if (sameVnode(oldEndVnode, newEndVnode)) {
              patchVnode(oldEndVnode, newEndVnode)
              oldEndVnode = oldCh[--oldEndIdx]
              newEndVnode = newCh[--newEndIdx]
          }else if (sameVnode(oldStartVnode, newEndVnode)) {
              patchVnode(oldStartVnode, newEndVnode)
              api.insertBefore(parentElm, oldStartVnode.el, api.nextSibling(oldEndVnode.el))
              oldStartVnode = oldCh[++oldStartIdx]
              newEndVnode = newCh[--newEndIdx]
          }else if (sameVnode(oldEndVnode, newStartVnode)) {
              patchVnode(oldEndVnode, newStartVnode)
              api.insertBefore(parentElm, oldEndVnode.el, oldStartVnode.el)
              oldEndVnode = oldCh[--oldEndIdx]
              newStartVnode = newCh[++newStartIdx]
          }else {
             // 使用key时的比较
              if (oldKeyToIdx === undefined) {
                  oldKeyToIdx = createKeyToOldIdx(oldCh, oldStartIdx, oldEndIdx) // 有key生成index表
              }
              idxInOld = oldKeyToIdx[newStartVnode.key]
              if (!idxInOld) {
                  api.insertBefore(parentElm, createEle(newStartVnode).el, oldStartVnode.el)
                  newStartVnode = newCh[++newStartIdx]
              }
              else {
                  elmToMove = oldCh[idxInOld]
                  if (elmToMove.sel !== newStartVnode.sel) {
                      api.insertBefore(parentElm, createEle(newStartVnode).el, oldStartVnode.el)
                  }else {
                      patchVnode(elmToMove, newStartVnode)
                      oldCh[idxInOld] = null
                      api.insertBefore(parentElm, elmToMove.el, oldStartVnode.el)
                  }
                  newStartVnode = newCh[++newStartIdx]
              }
          }
      }
      if (oldStartIdx > oldEndIdx) {
          before = newCh[newEndIdx + 1] == null ? null : newCh[newEndIdx + 1].el
          addVnodes(parentElm, before, newCh, newStartIdx, newEndIdx)
      }else if (newStartIdx > newEndIdx) {
          removeVnodes(parentElm, oldCh, oldStartIdx, oldEndIdx)
      }
  }
  
  

先说一下这个函数做了什么

• 将Vnode的子节点Vch，和oldVnode的子节点oldCh提取出来
• oldCh和vCh各有两个头尾的变量StartIdx和EndIdx，它们的2个变量相互比较，一共有4种比较方式。如果4种比较都没匹配上，如果设置了key，就会用key进行比较，在比较的过程中，变量会往中间靠，一旦StartIdx>EndIdx表明oldCh和vCh至少有一个已经遍历完了，就会结束比较。

图解updateChildren

上面的总结相信很多人也看得一脸懵逼，下面我们好好说道说道。

灰色的部分为 oldVNode 和 白色 nVNode

它们取出来并分别用 s 和 e 指针 指向它们的 头 child 和 尾 child

现在分别对oldS、oldE、S、E做组合比较sameVnode比较，有四种比较方式 头头、尾尾、头尾、尾头

匹配成功：当某一个节点通过了 sameVnode 比较那么即认为它们代表同一个真实 DOM 节点时，

Diff 算法不会重新创建新的 DOM 元素，而是复用旧节点对应的真实 DOM

并将这个旧节点对应的真实 DOM 通过 patch 操作更新成新节点的状态（属性、子节点等）

最终新节点 nVnode.el 会指向这个复用的真实 DOM 元素。

匹配失败：（头尾指针对应的节点都不能复用，需要更灵活地在“中间区域”寻找可以复用的节点。）

如果四种匹配没有一对是成功的，分为两种情况

如果新旧子节点都存在key，那么会根据oldChild的key生成一张hash表，用S的key与hash表做匹配，匹配成功就判断S和匹配节点是否为sameNode，如果是，就在真实 dom 中将成功的节点移到最前面，匹配失败否则，将S生成对应的真实DOM插入到dom中对应的oldS位置，S指针向中间移动。在这个过程中被匹配old中的节点置为null。如果没有key,则直接将S生成新的节点插入真实DOM （ps：这下可以解释为什么v-for的时候需要设置key了，如果没有key那么就只会做四种匹配，就算指针中间有可复用的节点都不能被复用了）

当这些节点sameVnode成功后就会紧接着执行patchVnode了，可以看一下上面的代码

if (sameVnode(oldStartVnode, newStartVnode)) {
    patchVnode(oldStartVnode, newStartVnode)
}

就这样层层递归下去，直到将oldVnode和Vnode中的所有子节点比对完。也将dom的所有补丁都打好啦。那么现在再回过去看updateChildren的代码会不会容易很多呢？

本文地址：www.notion.so/vue-Diff-21… 参考地址：文章 ：详解vue的diff算法

视频地址：www.bilibili.com/video/BV1nD…