跟着大佬学习vue的diff算法

时间  2020-06-09
标签 跟着 大佬 学习 vue diff 算法 繁體版
原文   原文链接

前言

本文旨在理一下vue中diff算法的主要逻辑和关键细节。javascript

从一个简单的demo切入： p标签渲染一个items数组html

<div id="demo">
    <p v-for="item in items" :key="item">{{ item }}</p>
</div>
<script src="../vue-source/dist/vue.js"></script>
<script> const app = new Vue({ el: "#demo", data: { items: ["a", "b", "c", "d", "e"] }, mounted() { setTimeout(() => { this.items.splice(2, 0, "f") }, 2000) } }) </script>
复制代码

先把实际顺序说明：
vue

  1. items数据发生变化 Dep.notify
  2. patch(oldVNode, vnode, ...)
  3. patchVnode(oldVnode, vnode, insertedVnodeQueue, ...) ps: diff从这里就开始了 insertedVnodeQueue是patch函数中定义的常量，在后期的diff里面一直维护着，典型的闭包结构。
  4. updateChildren() diff的核心方法

sameVnode

sameVnode函数贯穿着整个diff过程，其中首要的必要条件就是key要相等java

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)
      ) || (
        isTrue(a.isAsyncPlaceholder) &&
        a.asyncFactory === b.asyncFactory &&
        isUndef(b.asyncFactory.error)
      )
    )
  )
}
复制代码

key

众所周知，key在patch中发挥着相当重要的做用，key能够在不少状况下可以有效地减小没必要要的从新渲染。 当不设置key时，那么渲染列表数据中的子元素key就是undefined, 显然undefined === undefined。那么sameVNode永远都是相同的(一般状况下)，同时形成没必要要的渲染（若是是开头的demo中不设置key的话将会多形成3次的没必要要渲染）。

若是设置了key，a.key !== b.key的状况下就立刻终止了判断，sameVnode直接返回false，不跟你多bb。
避免用数组的下标做为key
由于当数组发生变化时，下标也可能会发生变化，这可能致使一些隐蔽的bug。node

patch

  • 不存在 oldVnode,则进行createElm
  • 存在 oldVnode 和 vnode，可是 sameVnode 返回 false, 则进行createElm
  • 存在 oldVnode 和 vnode，可是 sameVnode 返回 true, 则进行patchVnode

patchVnode

能够将Vnode分为3种：算法

  • 纯文本Vnode
  • 含Children的Vnode
  • 不含Children的Vnode

因此状况能够分红3*3种
数组

oldVnode.text oldCh !oldCh
vnode.text setTextContent setTextContent setTextContent
ch addVnodes updateChildren addVnodes
!ch setTextContent removeVnodes setTextContent 
function patchVnode (oldVnode, vnode, insertedVnodeQueue, ownerArray, index, removeOnly) {
  // 节点相同则直接返回，不做处理
  if (oldVnode === vnode) {
      return
  }
  // ...
  const elm = vnode.elm = oldVnode.elm
  // ...
  const oldCh = oldVnode.children
  const ch = vnode.children
  // ...
  if (isUndef(vnode.text)) {
    if (isDef(oldCh) && isDef(ch)) {
    // 当新老Vnode.length都存在且不相等 进入updateChildren
      if (oldCh !== ch) updateChildren(elm, oldCh, ch, insertedVnodeQueue, removeOnly)
    } else if (isDef(ch)) {
      if (isDef(oldVnode.text)) nodeOps.setTextContent(elm, '')
      addVnodes(elm, null, ch, 0, ch.length - 1, insertedVnodeQueue)
    } 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

insertedVnodeQueue 是维护的一个数组队列，diff完成后将队列中的数据逐个更新浏览器

function updateChildren (parentElm, oldCh, newCh, insertedVnodeQueue, removeOnly) {
    // 双指针
    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
    // 首首 => 尾尾 => 首尾 => 尾首 => 遍历old用key查找index替换位置
    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)) {
        patchVnode(oldStartVnode, newStartVnode, insertedVnodeQueue, newCh, newStartIdx)
        oldStartVnode = oldCh[++oldStartIdx]
        newStartVnode = newCh[++newStartIdx]
      } else if (sameVnode(oldEndVnode, newEndVnode)) {
        patchVnode(oldEndVnode, newEndVnode, insertedVnodeQueue, newCh, newEndIdx)
        oldEndVnode = oldCh[--oldEndIdx]
        newEndVnode = newCh[--newEndIdx]
      } else if (sameVnode(oldStartVnode, newEndVnode)) { // Vnode moved right
        patchVnode(oldStartVnode, newEndVnode, insertedVnodeQueue, newCh, newEndIdx)
        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, insertedVnodeQueue, newCh, newStartIdx)
        canMove && nodeOps.insertBefore(parentElm, oldEndVnode.elm, oldStartVnode.elm)
        oldEndVnode = oldCh[--oldEndIdx]
        newStartVnode = newCh[++newStartIdx]
      } else {
        if (isUndef(oldKeyToIdx)) oldKeyToIdx = createKeyToOldIdx(oldCh, oldStartIdx, oldEndIdx)
        idxInOld = isDef(newStartVnode.key)
          ? oldKeyToIdx[newStartVnode.key]
          : findIdxInOld(newStartVnode, oldCh, oldStartIdx, oldEndIdx)
        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, newCh, newStartIdx)
            oldCh[idxInOld] = undefined
            canMove && nodeOps.insertBefore(parentElm, vnodeToMove.elm, oldStartVnode.elm)
          } else {
            // same key but different element. treat as new element
            createElm(newStartVnode, insertedVnodeQueue, parentElm, oldStartVnode.elm, false, newCh, newStartIdx)
          }
        }
        newStartVnode = newCh[++newStartIdx]
      }
    }
    // 跳出while循环 也就是先后指针交错了
    // 若是是老节点的指针先交错那就说明是新增了节点 => addVnodes
    // 反之 => removeVnodes
    if (oldStartIdx > oldEndIdx) {
      refElm = isUndef(newCh[newEndIdx + 1]) ? null : newCh[newEndIdx + 1].elm
      addVnodes(parentElm, refElm, newCh, newStartIdx, newEndIdx, insertedVnodeQueue)
    } else if (newStartIdx > newEndIdx) {
      removeVnodes(oldCh, oldStartIdx, oldEndIdx)
    }
复制代码

测试

回到例子，为了能走更多的状况，改一下demo。闭包

<body>
  <div id="demo">
    <p v-for="item in items" :key="item">{{ item }}</p>
  </div>
  <div>
    ["a", "b", "c", "d", "e", "f", "g"] => ["f", "d", "a", "h", "e", "c", "b", "g"]
  </div>
  <script src="../vue/dist/vue.js"></script>
  <script> const app = new Vue({ el: "#demo", data: { items: ["a", "b", "c", "d", "e", "f", "g"] }, mounted() { setTimeout(() => { this.items = ["f", "d", "a", "h", "e", "c", "b", "g"] }, 2000) } }) </script>
</body>
复制代码

在vue.js中的updateChildren打下断点以便观察。app

第一次while

尾尾gg匹配成功

newStartVnode都是g, 进入 patchVnode。 我本来觉得会判断 if (oldVnode.text !== vnode.text)而后不做处理，结果居然又进去了updateChildren。
不由让我 console.log("oldStartIdx", oldStartIdx, oldCh[oldStartIdx])

误区

其中结构为

我本来觉得这个 VNode.text = a; VNode.children = undefined ...
这个 <p>a</p>中的a仍是一个 VNode...

好在纠正了错误，下面就无论那个纯text的VNode了。

不会只有我如今才知道吧...

那么在debugger加个条件以便观察 oldStartVnode.tag === 'p'

继续

第二次while

尾首匹配成功，参考节点为a节点执行nodeOps.insertBefore

abcdefg => fabcdeg

oldStartVnode = oldCh[++oldStartIdx]; newEndVnode = newCh[--newEndIdx];

第三次while

首尾四次匹配都没有匹配到，进入该代码块。

  1. 对剩下的oldVnode进行createKeyToOldIdx(oldCh, oldStartIdx, oldEndIdx)(值见下图)
  2. 若是idxInOld不存在，则代表是new element => createElm
  3. 若是idxInOld存在 => oldCh[idxInOld] = undefined => 参考节点为a节点执行nodeOps.insertBefore
  4. 此时界面上也从 fabcdeg => fdabceg

第四次while

首首aa对比成功

第五次while

首尾bb对比成功，参考节点为g节点执行nodeOps.insertBefore

fdabceg => fdacebg

第六次while

首尾cc对比成功，参考节点为b节点执行nodeOps.insertBefore

fdacebg => fdaecbg

第七次while

此时的oldStartVnode === undefined => oldStartVnode = oldCh[++oldStartIdx];

第八次while

尾尾ee匹配成功

此时oldEndIdx < oldStartIdx 跳出while，进入下面代码块。

oldEndIdx < oldStartIdx => 新增了节点 => 参考节点为E节点执行addVnodes()(addVnodes执行最终也是nodeOps.insertBefore)，将newCh剩余的节点（H）依次插入E(下面的refElm)节点以前。

再在debugger中按一次F8就完成了整个diff过程了，如今呈现的就是最终的fdahecbg

参考连接

总结

强烈建议用Chrome浏览器进行调试，配合图简直不要太好理解

  1. 渲染列表的diff关键函数updateChildren
  2. 注意VNode结构 => <p>a<p> => VNode{tag: 'p', children: VNode{tag: undefined, children: undefined, text: 'a'}, text: undefined}
  3. 每一次循环: 首首 => 尾尾 => 首尾 => 尾首 => findIndex => createElm(!idxInOld) | nodeOps.insertBefore(idxInOld)
  4. 跳出循环 => addVnodes(oldStartIdx > oldEndIdx) | removeVnodes(newStartIdx > newEndIdx)

最后

我深知本身的理解还不够透彻，不少棘手的问题还有待研究。但愿后面有新的理解能够持续在本文添加或修改，大佬轻喷，还望不吝赐教。

相关文章
相关标签/搜索
每日一句
    每一个你不满意的现在，都有一个你没有努力的曾经。
本站公众号
   欢迎关注本站公众号,获取更多信息
联系我们 最近搜索 最新文章 沪ICP备13005482号-10 MyBatis教程 SQL 教程 MySQL教程 Java 教程 Thymeleaf 教程 Hibernate教程 Spring教程 Redis教程