Vue2-diff算法原理

虚拟DOM

虚拟DOM（Virtual DOM）是对真实DOM的JS抽象表现，能够描述DOM结构和关系，在合适的时机将虚拟dom转化为真实dom节点。
优点：

DOM发生变化时，通过新旧虚拟DOM对比可以得到最小的操作量，从而提升性能。
跨平台，将虚拟DOM转换为不同运行时实现跨平台。
Vue的diff算法是基于snabbdom改造过来的，仅在同级的vnode间做diff，最终实现整个DOM树的更新。这样可以大大降低时间复杂度(从O(n3)变成O(n)）。
兼容性：还可以加入兼容性代码增强操作的兼容性

// 真实DOM

  Hello World


// 虚拟DOM
let vnode = {
  tag: 'div',
  children:[ {tag:'p', text:'Hello World'}]
}

虚拟节点中所包含的属性

// 虚拟节点中所包含的属性
export default class VNode {
  tag: string | void; // 标签名
  data: VNodeData | void; // 数据
  children: ?Array; // 子节点数组
  text: string | void;  // 真实节点所对应的文本
  elm: Node | void;  // 对应的真实dom
  key: string | number | void; // 元素上定义的key
  parent: VNode | void; // component placeholder node
  isStatic: boolean; // hoisted static node  // 是否是静态节点
  isComment: boolean; // 是否是注释节点
  isCloned: boolean; // is a cloned node?
  isOnce: boolean; // is a v-once node?  // 是否是v-once的节点
}

diff算法

patch方法

所在文件 patch core\vdom\patch.js
树级别的比较，可能有三种情况：增删改。

new VNode 不存在就删；
old VNode 不存在就增；
都存在就执行 diff 执行更新

function patch (oldVnode, vnode) {
  // 新节点不存存在，删除
  if (isUndef(vnode)) {
    if (isDef(oldVnode)) invokeDestroyHook(oldVnode)
    return
  }
  // 老节点不存在为第一次渲染，新增
  if (isUndef(oldVnode)) {
    // empty mount (likely as component), create new root element
    isInitialPatch = true
    // 根据vnode生成新元素
    createElm(vnode)
  } else {
    // 判断是否相同节点
    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
      }
    }
  }
}

// 判断新老节点是否相同
// key节点唯一标识 tag(标签名)  isComment(是否为注释节点)
function sameVnode (a, b) {
  return (
    a.key === b.key && (
      (
        a.tag === b.tag &&
        a.isComment === b.isComment &&
        isDef(a.data) === isDef(b.data) &&
        sameInputType(a, b)
      )
    )
  )
}

patchVnode方法

比较两个vNode包括三种操作类型：属性更新、文本更新、子节点更新

新老节点均有 children 子节点，则对子节点进行 diff 操作，调用 updateChildren
如果老节点没有子节点而新节点有子节点，先清空老节点的文本内容，然后为其新增子节点。
新节点没有子节点而老节点有子节点的时候，则移除该节点的所有子节点。
新老节点都无子节点的时候，只是文本的替换。

function patchVnode (oldVnode, vnode) {
  if (oldVnode === vnode) {
    return
  }

  
let i
    const data = vnode.data
    if (isDef(data) && isDef(i = data.hook) && isDef(i = i.prepatch)) {
      i(oldVnode, vnode)
    }

  // 找到老节点的真实dom, elm
  const elm = vnode.elm = oldVnode.elm
  // 找到新老节点的孩子节点 
  const oldCh = oldVnode.children
  const ch = vnode.children

  // 属性更新
  if (isDef(data) && isPatchable(vnode)) {
    for (i = 0; i < cbs.update.length; ++i) cbs.update[i](oldVnode, vnode)
    if (isDef(i = data.hook) && isDef(i = i.update)) i(oldVnode, vnode)
  }

  // 判断是否是元素， 没有文本则是Element
  if (isUndef(vnode.text)) {
    // 新老节点都有孩子
    if (isDef(oldCh) && isDef(ch)) {
      if (oldCh !== ch) 
          // 比较两个孩子节点差异并更新
          updateChildren(elm, oldCh, ch)
    } else if (isDef(ch)) { // 只有新节点有孩子
      // 老节点有文本 清空文本
      if (isDef(oldVnode.text)) nodeOps.setTextContent(elm, '')
      // 将新节点的孩子节点加入到真实dom上
      addVnodes(elm, null, ch, 0, ch.length - 1)
    } else if (isDef(oldCh)) {
      // 只有老节点有孩子 删除老节点
      removeVnodes(elm, oldCh, 0, oldCh.length - 1)
    } else if (isDef(oldVnode.text)) {
      // 老节点有文本 清空文本
      nodeOps.setTextContent(elm, '')
    }
  } else if (oldVnode.text !== vnode.text) {
    // 新老节点都是文本且不同，直接使用新文本替换老文本
    nodeOps.setTextContent(elm, vnode.text)
  }
}

updateChildren方法

对比新旧children得出最小操作补丁，有四种情况

老头结点和新头结点相同，直接patchVnode
老尾结点和新尾巴结点相同，直接patchVnode
老头结点和新尾结点相同，patchVnode的同时还要把老头结点放到老尾结点后面去
老尾结点和新头结点相同，patchVnode的同时将老尾结点放到老头结点前面去

如果以上四种情况都不符合：
则在老的节点队列中寻找循环寻找与新头结点满足sameVnode的节点，然后移到老头结点前面去，新头结点下标向后移一位

也有可能找不到这样的节点，那么就新建一个节点，并且将它放到老节点队列最前面去
最后老节点队列和新节点队列长度可能不一样，就会有一个队列没有遍历完，那么就会有有一下两种情况：
批量增加（老节点遍历完了，还有没遍历的新节点就批量创建增加上去）
批量删除（新节点遍历完了，还有没遍历的老节点就批量删除掉）

function updateChildren (parentElm, oldCh, newCh) {
  // 定义两个指针分别指向两个子节点数组的开始
  let oldStartIdx = 0
  let 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, idxInOld, vnodeToMove, refElm
  // 当新老节点都没有对比完一直循环
  while (oldStartIdx <= oldEndIdx && newStartIdx <= newEndIdx) {
    // 老节点的开始节点不存在，则直接进行下次循环，下标向后移一位
    if (isUndef(oldStartVnode)) {
      oldStartVnode = oldCh[++oldStartIdx] // Vnode has been moved left
      
    }
    // 老节点的结束节点不存在，则直接进行下次循环，下标向前移一位
    else if (isUndef(oldEndVnode)) {
      oldEndVnode = oldCh[--oldEndIdx]
    }
    // 新旧节点相同
    else if (sameVnode(oldStartVnode, newStartVnode)) {
      // 递归比较两个节点，同时+1
      patchVnode(oldStartVnode, newStartVnode, insertedVnodeQueue)
      oldStartVnode = oldCh[++oldStartIdx]
      newStartVnode = newCh[++newStartIdx]
    }
    // 新旧的结束节点相同， 同时-1
    else if (sameVnode(oldEndVnode, newEndVnode)) {
      patchVnode(oldEndVnode, newEndVnode)
      oldEndVnode = oldCh[--oldEndIdx]
      newEndVnode = newCh[--newEndIdx]
    }
    // 老的头节点与新的尾巴节点相同，把老的头节点移动到老的尾巴去，提高相同度
    else if (sameVnode(oldStartVnode, newEndVnode)) { // Vnode moved right
      patchVnode(oldStartVnode, newEndVnode)
      canMove && nodeOps.insertBefore(parentElm, oldStartVnode.elm, nodeOps.nextSibling(oldEndVnode.elm))
      oldStartVnode = oldCh[++oldStartIdx]
      newEndVnode = newCh[--newEndIdx]
    }
    // 老的尾节点与新的头节点相同
    else if (sameVnode(oldEndVnode, newStartVnode)) { // Vnode moved left
      patchVnode(oldEndVnode, newStartVnode)
      canMove && nodeOps.insertBefore(parentElm, oldEndVnode.elm, oldStartVnode.elm)
      oldEndVnode = oldCh[--oldEndIdx]
      newStartVnode = newCh[++newStartIdx]
    }
    // 4种猜想都没有找到相同的，才被迫进行循环查找
    else {
      if (isUndef(oldKeyToIdx)) 
          // createKeyToOldIdx会返回一个map key就是老元素的key值是老元素的索引(oldKeyToIdx)
          oldKeyToIdx = createKeyToOldIdx(oldCh, oldStartIdx, oldEndIdx)
      // findIdxInOld方法 (查找在老的数组中的索引key)
      idxInOld = isDef(newStartVnode.key)
        ? oldKeyToIdx[newStartVnode.key]
        : findIdxInOld(newStartVnode, oldCh, oldStartIdx, oldEndIdx)
      // idxInOld (老的子节点数组中没有这个元素，则新建)
      if (isUndef(idxInOld)) { // New element
        createElm(newStartVnode, insertedVnodeQueue, parentElm, oldStartVnode.elm, false, newCh, newStartIdx)
      } else {
        vnodeToMove = oldCh[idxInOld]
        // 如果找到元素可以复用，则进一步比较
        if (sameVnode(vnodeToMove, newStartVnode)) {
          patchVnode(vnodeToMove, newStartVnode, insertedVnodeQueue)
          oldCh[idxInOld] = undefined
          canMove && nodeOps.insertBefore(parentElm, vnodeToMove.elm, oldStartVnode.elm)
        } else {
          // 只有key相同，但是内容不相同
          createElm(newStartVnode, insertedVnodeQueue, parentElm, oldStartVnode.elm, false, newCh, newStartIdx)
        }
      }
      // 移动指针
      newStartVnode = newCh[++newStartIdx]
    }
  }
  // 最后收尾，进行整理工作
  // 新的子节点数组长度长 添加新增的
  if (oldStartIdx > oldEndIdx) {
    refElm = isUndef(newCh[newEndIdx + 1]) ? null : newCh[newEndIdx + 1].elm
    addVnodes(parentElm, refElm, newCh, newStartIdx, newEndIdx)
  } else if (newStartIdx > newEndIdx) {
    //老的子节点数组长度长 删除多余的
    removeVnodes(parentElm, oldCh, oldStartIdx, oldEndIdx)
  }
}