vue2 diff算法

首先我们先整明白 diff 算法的本质
diff算法的本质是找出两个对象之间的差异，目的是尽可能复用节点。
此处说到的对象其实就对应 vue中的 virtual dom,即使用 js 对象来表示页面中的 dom 结构。

<div id='app'>
   <span id='child'>1</span>
 </div>
其实仔细思考下，一个dom节点主要包含三个部分

自身的标签名（div）
自身的属性（id='app'）
子节点(span)
所以我们可以设计如下的对象结构表示一个 dom 节点

const vnode = {
  tag:'div',
  attrs:{id:'app'},
  children:[{ tag:'span',attrs:{id:'child'},children:['1']}]
}
当用户对界面进行操作，比如把 div 的 id 改为 app2 ,将子节点 span 的文本子节点 1 改为 2,那么我们可以得到如下 vnode

const vnode2 = {
  tag:'div',
  attrs:{id:'app2'},
  children:[{ tag:'span',attrs:{id:'child'},children:['2']}]
}
上文说了这个结论,再看下

diff算法的本质是找出两个对象之间的差异，目的是尽可能复用节点。
那么我们运行 diff (vnode,vnode2),就能知道 vnode 和 vnode2 之间的差异如下：

div 的 id 改为 app2
span 的文本子节点 1 改为 2
知道了差异部分，我们就能更新视图了,伪代码如下

document.getElementById("app").setAttribute('id', 'app2')// id 改为 app2
document.getElementById("child").firstChild.textContent ='2' //1 改为 2
再思考下,当我们改变一个节点的时候，我们其实主要改了以下部分
自身的属性（style 、class等等）
子节点
那么 diff 算法可以抽象为 两部分

function diff(vnode,newVnode){
  diffAttr(vnode.attr,newVnode.attr)
  diffChildren(vnode.children,newVnode.children)
}
vue之前的源码是采用 先 diff，得到差异，然后根据差异在去 patch 真实 dom，也就是分两步骤
diff
patch
但是这样性能会有损失,因为 diff 过程中会遍历一次整棵树，patch 的时候又会遍历整棵树,其实这两次遍历可以合并成一次，也就是 在diff的同时进行patch

所以我们把流程改为

function patchVnode(oldVnode, vnode, parentElm){
  patchAttr(oldVnode.attr, vnode.attr, parentElm)
  patchChildren(parentElm, oldVnode.children, vnode.children)
}
patchAttr
function patchAttr(oldVnode = {}, vnode = {}, parentElm) {
  each(oldVnode, (key, val) => { //遍历  oldVnode 看newTreeAttr 是否还有对应的属性
    if (vnode[key]) {
      val !== vnode[key] && setAttr(parentElm, key, vnode[key])
    }
    else {
      parentElm.removeAttribute(key)
    }
  })

  each(vnode, (key, val) => {//看 oldVnode 是否还有对应的属性，没有就新增 
    !oldVnode[key] && setAttr(parentElm, key, val)
  })
}

function each(obj, fn) {//遍历对象
  if (Object.prototype.toString.call(obj) !== '[object Object]') {
    console.error('只能遍历对象！')
    return
  }

  for (var key in obj) {
    if (obj.hasOwnProperty(key)) {
      var val = obj[key];
      fn(key, val)
    }
  }
}

function setAttr(node, key, value) {
  switch (key) {
    case 'style':
      each(value, (key, val) => {
        node.style[key] = val
      })
      break
    case 'value':
      var tag = node.tag || ''
      tag = tag.toLowerCase()
      if (
        tag === 'input' || tag === 'textarea'
      ) {
        node.value = value
      } else {
        // if it is not a input or textarea, use `setAttribute` to set
        node.setAttribute(key, value)
      }
      break
    default:
      node.setAttribute(key, value)
      break
  }
}
该函数主要做了两件事
遍历 oldVnode 看 newTreeAttr 是否还有对应的属性
如果有并且不相等的，修改对应的属性，
没有的话，直接删除对应的属性
遍历oldVnode, 是否还有对应的属性，没有就新增
patchChildren
先看下源码

function patchChildren(parentElm, oldCh, newCh) {
  let oldStartIdx = 0;
  let oldEndIdx = oldCh.length - 1;
  let oldStartVnode = oldCh[0];
  let oldEndVnode = oldCh[oldEndIdx];

  let newStartIdx = 0;
  let newEndIdx = newCh.length - 1;
  let newStartVnode = newCh[0];
  let newEndVnode = newCh[newEndIdx];
  let oldKeyToIdx, idxInOld, elmToMove, refElm;

  while (oldStartIdx <= oldEndIdx && newStartIdx <= newEndIdx) {
    if (!oldStartVnode) {
      oldStartVnode = oldCh[++oldStartIdx];
    } else if (!oldEndVnode) {
      oldEndVnode = oldCh[--oldEndIdx];
    }

    else if (sameVnode(oldStartVnode, newStartVnode)) { //旧首 和 新首相同
      patchVnode(oldStartVnode.elm, oldStartVnode, newStartVnode);
      oldStartVnode = oldCh[++oldStartIdx];
      newStartVnode = newCh[++newStartIdx];
    }

    else if (sameVnode(oldEndVnode, newEndVnode)) { //旧尾 和 新尾相同
      patchVnode(oldEndVnode.elm, oldEndVnode, newEndVnode);
      oldEndVnode = oldCh[--oldEndIdx];
      newEndVnode = newCh[--newEndIdx];
    }

    else if (sameVnode(oldStartVnode, newEndVnode)) { //旧首 和 新尾相同,将旧首移动到 最后面
      patchVnode(oldStartVnode.elm, oldStartVnode, newEndVnode);
      nodeOps.insertBefore(parentElm, oldStartVnode.elm, oldEndVnode.elm.nextSibling)//将 旧首 移动到最后一个节点后面
      oldStartVnode = oldCh[++oldStartIdx];
      newEndVnode = newCh[--newEndIdx];
    }

    else if (sameVnode(oldEndVnode, newStartVnode)) {//旧尾 和 新首相同 ,将 旧尾 移动到 最前面
      patchVnode(oldEndVnode.elm, oldEndVnode, newStartVnode);
      nodeOps.insertBefore(parentElm, oldEndVnode.elm, oldStartVnode.elm);
      oldEndVnode = oldCh[--oldEndIdx];
      newStartVnode = newCh[++newStartIdx];
    }

    else {//首尾对比 都不 符合 sameVnode 的话
      //1. 尝试 用 newCh 的第一项在 oldCh 内寻找 sameVnode
      let elmToMove = oldCh[idxInOld];
      if (!oldKeyToIdx) oldKeyToIdx = createKeyToOldIdx(oldCh, oldStartIdx, oldEndIdx);
      idxInOld = newStartVnode.key ? oldKeyToIdx[newStartVnode.key] : null;
      if (!idxInOld) {//如果 oldCh 不存在 sameVnode 则直接创建一个
        nodeOps.createElm(newStartVnode, parentElm);
        newStartVnode = newCh[++newStartIdx];
      } else {
        elmToMove = oldCh[idxInOld];
        if (sameVnode(elmToMove, newStartVnode)) {
          patchVnode(elmToMove, newStartVnode);
          oldCh[idxInOld] = undefined;
          nodeOps.insertBefore(parentElm, newStartVnode.elm, oldStartVnode.elm);
          newStartVnode = newCh[++newStartIdx];
        } else {
          nodeOps.createElm(newStartVnode, parentElm);
          newStartVnode = newCh[++newStartIdx];
        }
      }
    }
  }

  if (oldStartIdx > oldEndIdx) {
    refElm = (newCh[newEndIdx + 1]) ? newCh[newEndIdx + 1].elm : null;
    nodeOps.addVnodes(parentElm, refElm, newCh, newStartIdx, newEndIdx);
  } else if (newStartIdx > newEndIdx) {
    nodeOps.removeVnodes(parentElm, oldCh, oldStartIdx, oldEndIdx);
  }


}
上述代码的本质是找出两个数组的差异
举个栗子

旧数组 [a,b,c,d]

新数组 [e,f,g,h]

怎么找出新旧数组之间的差异呢？ 我们约定以下名词 - 旧首（旧数组的第一个元素） - 旧尾（旧数组的最后一个元素） - 新首（新数组的第一个元素） - 新尾（新数组的最后一个元素）

一些工具函数

-sameVnode--用于判断节点是否应该复用,这里做了一些简化，实际的diff算法复杂些，这里只用tag 和 key 相同，我们就复用节点，执行patchVnode，即对节点进行修改
function sameVnode(a, b) {
  return a.key === b.key && a.tag === b.tag
}
createKeyToOldIdx--建立key-index的索引,主要是替代遍历，提升性能
function createKeyToOldIdx(children, beginIdx, endIdx) {
  let i, key
  const map = {}
  for (i = beginIdx; i <= endIdx; ++i) {
    key = children[i].key
    if (isDef(key)) map[key] = i
  }
  return map
}
旧首 和 新首 对比
if (sameVnode(oldStartVnode, newStartVnode)) { 
      patchVnode(oldStartVnode.elm, oldStartVnode, newStartVnode);
      oldStartVnode = oldCh[++oldStartIdx];
      newStartVnode = newCh[++newStartIdx];
    }
旧尾 和 新尾 对比
if (sameVnode(oldEndVnode, newEndVnode)) { //旧尾 和 新尾相同
      patchVnode(oldEndVnode.elm, oldEndVnode, newEndVnode);
      oldEndVnode = oldCh[--oldEndIdx];
      newEndVnode = newCh[--newEndIdx];
    }
旧首 和 新尾 对比
if (sameVnode(oldStartVnode, newEndVnode)) { //旧首 和 新尾相同,将旧首移动到 最后面
      patchVnode(oldStartVnode.elm, oldStartVnode, newEndVnode);
      nodeOps.insertBefore(parentElm, oldStartVnode.elm, oldEndVnode.elm.nextSibling)
      oldStartVnode = oldCh[++oldStartIdx];
      newEndVnode = newCh[--newEndIdx];
    }
旧尾 和 新首 对比,将 旧尾 移动到 最前面
if (sameVnode(oldEndVnode, newStartVnode)) {//旧尾 和 新首相同 ,将 旧尾 移动到 最前面
      patchVnode(oldEndVnode.elm, oldEndVnode, newStartVnode);
      nodeOps.insertBefore(parentElm, oldEndVnode.elm, oldStartVnode.elm);
      oldEndVnode = oldCh[--oldEndIdx];
      newStartVnode = newCh[++newStartIdx];
    }
首尾对比 都不 符合 sameVnode 的话
尝试 用 newCh 的第一项在 oldCh 内寻找 sameVnode,如果在 oldCh 不存在对应的 sameVnode ，则直接创建一个，存在的话则判断
符合 sameVnode，则移动 oldCh 对应的 节点
不符合 sameVnode ,创建新节点


最后 通过 oldStartIdx > oldEndIdx ，来判断 oldCh 和 newCh 哪一个先遍历完成
oldCh 先遍历完成,则证明 newCh 还有多余节点，需要新增这些节点
newCh 先遍历完成,则证明 oldCh 还有多余节点，需要删除这些节点
总结
diff 算法的本质是找出两个对象之间的差异
diff 算法的核心是子节点数组对比,思路是通过 首尾两端对比
key 的作用 主要是
决定节点是否可以复用
建立key-index的索引,主要是替代遍历，提升性能