Vue2源码解析系列-渲染系统（待更新）

Patch

简介

patch是vnode最核心的部分，它将vnode渲染成真实的DOM。

Vue可以直接将所有vnode渲染成真实DOM，但是这样性能消耗太大，需要大量地操作DOM，而如果用JavaScript找出哪些node需要更改，哪些不用更改，然后再操作DOM的话，可以大幅度提高性能。

Patch流程

对现有的DOM修改其实就只要做三件事 - 创建新增的节点 - 删除已经废弃的节点 - 修改需要更新的节点

而对于vnode，我们需要关注三种节点类型： - 元素节点：特有tag属性 - 文本节点： text保存着文本内容 - 注释节点：特有isComment属性

创建新增的节点

当遍历完oldVnode都没有找到对应的节点时，就说明此节点是新增的节点，我们需要创建真实的节点并添加到视图上。

事实上，只有三种节点才会被创建：元素节点、文本节点和注释节点。

判断这些节点的依据是：如果vnode有tag属性就是元素节点，就用document.createElement方法创建；如果没有就看是否有isComment属性，有且为true则表明这是一个注释节点，则用document.createComment方法创建；如果没有isComment属性，就只能是文本节点，这时候调用document.createTextNode方法创建文本节点。添加视图只需要调用parentNode.appendChild()方法即可。

对于元素节点特别要注意children(子节点)，应当递归地创建子节点并添加到父节点上，最后将最上层的节点添加到DOM上。

删除节点

当oldVnode存在该节点，而vnode没有，则说明这是一个废弃的节点，应当删掉；或者是替换节点时删除旧节点。

删除节点非常简单，调用parent.removeChild方法即可将节点从视图中删除。

更新节点

当vnode和oldVnode节点是同一个节点时，不是暴力地用新节点覆盖旧节点，而是比对两个节点，找出不一样的地方进行更新。

在更新节点时应当注意“静态节点”，这种节点不会随状态的改变而更新，应当跳过判断以加快速度。如 <p>我是静态节点</p>

新旧vnode比对流程

更新节点先看是否有text属性，如果text不同则修改text，然后更新子节点。

更新子节点有三种情况：

只有oldVnode有子节点：清空DOM中的子节点
只有vnode有子节点：进一步判断oldVnode是否有text,若无则添加子节点,若有则清空DOM的文本
oldVnode和vnode都有子节点：更新子节点

更新子节点

在前面的更新节点中，如果oldVnode和vnode都有children，则需要进一步的操作来更新子节点。

更新子节点的操作有四种：创建、删除、更新、替换。

新旧两个子节点列表是通过循环进行比对的，所以创建节点的操作是在循环体内执行的，其具体实现是在oldChildren（旧子节点列表）中寻找本次循环所指向的新子节点。

创建子节点

如果在oldChildren中没有找到与本次循环所指向的新子节点相同的节点，那么说明本次循环所指向的新子节点是一个新增节点。对于新增节点，我们需要执行创建节点的操作，并将新创建的节点插入到oldChildren中所有未处理节点（未处理就是没有进行任何更新操作的节点）的前面。

删除子节点

删除子节点，本质上是删除那些oldChildren中存在但newChildren中不存在的节点。

当newChildren中的所有节点都被循环了一遍后，也就是循环结束后，如果oldChildren中还有剩余的没有被处理的节点，那么这些节点就是被废弃、需要删除的节点。

移动子节点

通过Node.insertBefore()方法，我们可以成功地将一个已有节点移动到一个指定的位置。

但怎么得知新虚拟节点的位置是哪里呢？换句话说，怎么知道应该把节点移动到哪里呢？其实得到这个位置并不难。对比两个子节点列表是通过从左到右循环newChildren这个列表，然后每循环一个节点，就去oldChildren中寻找与这个节点相同的节点进行处理。也就是说，newChildren中当前被循环到的这个节点的左边都是被处理过的。那就不难发现，这个节点的位置是所有未处理节点的第一个节点，所以，只要把需要移动的节点移动到所有未处理节点的最前面。

更新子节点

当一个节点同时存在于newChildren和oldChildren中时需要更新子节点。

如果newChildren和oldChild中有对应的节点，那么除了要进行更新操作外，还得看他们位置是否相同，如果不同还得进行移动子节点操作。

更新节点操作前面讲过了。

优化策略

针对位置不变的或者说位置可以预测的节点，我们不需要循环来查找，因为我们有一个更快捷的查找方式。它共有4种查找方式，分别是：

新前与旧前
新后与旧后
新后与旧前
新前与旧后

新前指的是newChildren第一个未处理的节点，旧后指的是oldChildren最后一个未处理的节点，其他的以此类推。

如果前面这4种方式对比之后都没找到相同的节点，这时再通过循环的方式去oldChildren中详细找一圈，看看能否找到。大部分情况下，通过前面这4种方式就可以找到相同的节点，所以节省了很多次循环操作。

新前和旧前

对比它们俩是不是同一个节点。如果是同一个节点，则说明我们不费吹灰之力就在oldChildren中找到了这个虚拟节点。

新后与旧后

当“新前”与“旧前”对比后发现不是同一个节点，这时可以尝试用“新后”与“旧后”的方式来比对它们俩是否是同一个节点。

“新后”与“旧后”的意思是使用“新后”这个节点和“旧后”这个节点对比，对比它们俩是不是同一个节点。如果是同一个节点，就将这两个节点进行对比并更新视图

新后与旧前

“新后”与“旧前”的意思是使用“新后”这个节点与“旧前”这个节点进行对比，通过对比来分辨它们俩是不是同一个节点。如果是同一个节点，就对比它们俩并更新视图

如果“新后”与“旧前”是同一个节点，那么由于它们的位置不同，所以除了更新节点外，还需要执行移动节点的操作

新前与旧后

“新前”与“旧后”的意思是使用“新前”与“旧后”这两个节点进行对比，对比它们是否是同一个节点，如果是同一个节点，则进行更新节点的操作

由于“新前”与“旧后”这两个节点的位置不同，所以除了更新节点的操作外，还需要进行移动节点的操作

哪些是未处理的节点

你可能会发现，所有的对比都是针对未处理的节点的，已处理过的节点忽略不计。那么，怎么分辨哪些节点是处理过的，哪些节点是未处理过的呢？

正常来说，我们可以循环newChildren，每次循环都去oldChildren循环找对应的节点，但是因为前面的优化策略可能会使节点在后面进行比对，因此正确的做法是从两边向中间循环。

那么，怎样实现从两边向中间循环呢？首先，我们先准备4个变量：oldStartIdx、oldEndIdx、newStartIdx和newEndIdx。这4个变量分别表示oldChildren的开始位置的下标（oldStartIdx）和结束位置的下标（oldEndIdx），以及newChildren的开始位置的下标（newStartIdx）和结束位置的下标（newEndIdx）。在循环体内，每处理一个节点，就将下标向指定的方向移动一个位置，通常情况下是对新旧两个节点进行更新操作，就相当于一次性处理两个节点，将新旧两个节点的下标都向指定方向移动一个位置。

diff流程

更新节点

旧节点是否存在，不存在则创造节点插入视图
如果旧节点存在，则将新节点和旧节点进行更详细的比对
新节点全部遍历完后，如果还存在未被匹配到的旧节点，则从视图中删除这些旧节点。

详细比对节点

旧节点和新节点完全相同，则退出
旧节点和新节点都是静态节点，则退出
新节点有没有text属性，即判断新节点是否是文本节点
1. 新节点与旧节点的文本相同则退出
2. 不同则更改对应视图里的文本
判断新节点有没有子节点（判断元素节点）
1. 都有子节点，此时进行更新子节点操作
2. 只有新节点有子节点，清空旧节点的文本(如果有的话)，然后讲新节点的子节点添加到DOM中
3. 只有旧节点有子节点，清空DOM中的子节点

更新子节点

快速查找
1. 新节点未处理的第一个节点和旧节点未处理的最后一个节点比对（需要移动节点）
2. 新节点未处理的第一个节点和旧节点未处理的第一个节点比对
3. 新节点未处理的最后一个节点和旧节点未处理的第一个节点比对（需要移动节点）
4. 新节点未处理的最后一个节点和旧节点未处理的最后一个节点比对
如果有建立key与节点index的对应关系
1. 新节点与key查找到的那个旧节点匹配，则进行比对
2. 不匹配，则循环旧节点列表查找对应的旧节点
没有则循环遍历旧节点列表中未处理的节点

遍历未处理的节点

由于快速查找，因此应该从节点列表的两边向中间变量。

并且应该让新节点和旧节点同时遍历，这样有个好处，就是可以节省遍历时间，如果是遍历完后还剩一些新节点，那么这些新节点就是要新增的节点，相反，如果还剩旧节点，那么这些旧节点就是要被删除的节点。

源码解析

updateChildren

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

    // removeOnly 是一个特殊的标志，仅在<transition-group>中被使用
    // 确保在leaving期间被删除的元素停留在正确的相对位置上
    const canMove = !removeOnly

    if (process.env.NODE_ENV !== 'production') {
      checkDuplicateKeys(newCh)
    }

    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 {
        // 建立旧vnode的key与index的关系表
        if (isUndef(oldKeyToIdx)) oldKeyToIdx = createKeyToOldIdx(oldCh, oldStartIdx, oldEndIdx)
        idxInOld = isDef(newStartVnode.key)
          ? oldKeyToIdx[newStartVnode.key]
          : findIdxInOld(newStartVnode, oldCh, oldStartIdx, oldEndIdx)

        if (isUndef(idxInOld)) {
           // 如果找不到对应的oldVnode，则新建一个节点并插入
          createElm(newStartVnode, insertedVnodeQueue, parentElm, oldStartVnode.elm, false, newCh, newStartIdx)
        } else {
          vnodeToMove = oldCh[idxInOld]
          if (sameVnode(vnodeToMove, newStartVnode)) {
            // 如果通过key找到对应的节点，则直接进行patch打补丁操作
            patchVnode(vnodeToMove, newStartVnode, insertedVnodeQueue, newCh, newStartIdx)
            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]
      }
    }
    // 最后如果oldVnode先遍历完,那么剩下的newVnode就是应该被新创建的节点
    // 最后如果newVnode先遍历完,那么剩下的oldVnode就是应该被删除的节点
    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)
    }
  }

用到的一些函数方法

function sameVnode (a, b) {
  return (
    a.key === b.key &&
    a.asyncFactory === b.asyncFactory && (
      (
        a.tag === b.tag &&
        a.isComment === b.isComment &&
        isDef(a.data) === isDef(b.data) &&
        sameInputType(a, b)
      ) || (
        isTrue(a.isAsyncPlaceholder) &&
        isUndef(b.asyncFactory.error)
      )
    )
  )
}

function sameInputType (a, b) {
  if (a.tag !== 'input') return true
  let i
  const typeA = isDef(i = a.data) && isDef(i = i.attrs) && i.type
  const typeB = isDef(i = b.data) && isDef(i = i.attrs) && i.type
  return typeA === typeB || isTextInputType(typeA) && isTextInputType(typeB)
}

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
}

function findIdxInOld(node, oldCh, start, end) {
  for (let i = start; i < end; i++) {
    const c = oldCh[i]
    if (isDef(c) && sameVnode(node, c)) return i
  }
}

上一页Vue2源码解析系列-模板编译下一页Patch

最后更新于8个月前