vue 虚拟dom的patch源码分析

 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    const canMove = !removeOnly  while (oldStartIdx <= oldEndIdx && newStartIdx <= newEndIdx) { // 开始索引大于结束索引，进不了   if (isUndef(oldStartVnode)) {    oldStartVnode = oldCh[++oldStartIdx] // Vnode已经被移走了。   } else if (isUndef(oldEndVnode)) {    oldEndVnode = oldCh[--oldEndIdx]   } else if (sameVnode(oldStartVnode, newStartVnode)) {    patchVnode(oldStartVnode, newStartVnode, insertedVnodeQueue)    oldStartVnode = oldCh[++oldStartIdx] // 索引加1。是去对比下一个节点。比如之前start=a[0]，那现在start=a[1],改变start的值后再去对比start这个vnode    newStartVnode = newCh[++newStartIdx]        } else if (sameVnode(oldEndVnode, newEndVnode)) {     patchVnode(oldEndVnode, newEndVnode, insertedVnodeQueue)    oldEndVnode = oldCh[--oldEndIdx]    newEndVnode = newCh[--newEndIdx]   } else if (sameVnode(oldStartVnode, newEndVnode)) {     patchVnode(oldStartVnode, newEndVnode, insertedVnodeQueue)    canMove && nodeOps.insertBefore(parentElm, oldStartVnode.elm, nodeOps.nextSibling(oldEndVnode.elm))// 把节点b移到树的最右边    oldStartVnode = oldCh[++oldStartIdx]    newEndVnode = newCh[--newEndIdx]        } else if (sameVnode(oldEndVnode, newStartVnode)) {  old.end.d=new.start.d    patchVnode(oldEndVnode, newStartVnode, insertedVnodeQueue)    canMove && nodeOps.insertBefore(parentElm, oldEndVnode.elm, oldStartVnode.elm)// Vnode moved left,把d移到c的左边。=old.start->old.end    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)) {      createElm(newStartVnode, insertedVnodeQueue, parentElm, oldStartVnode.elm) // 创建新节点，后面执行了nodeOps.insertBefore(parent, elm, ref)    } else {     vnodeToMove = oldCh[idxInOld]     /* istanbul ignore if */     if (process.env.NODE_ENV !== 'production' && !vnodeToMove) {      warn(       'It seems there are duplicate keys that is causing an update error. ' +       'Make sure each v-for item has a unique key.'      )     }     if (sameVnode(vnodeToMove, newStartVnode)) {      patchVnode(vnodeToMove, newStartVnode, insertedVnodeQueue)      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)     }    }    newStartVnode = newCh[++newStartIdx]       }  }  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(parentElm, oldCh, oldStartIdx, oldEndIdx) // 删除旧的c,removeNode(ch.elm)  } }

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)   )  ) )}/**   * 比较新旧vnode节点，根据不同的状态对dom做合理的更新操作（添加，移动，删除）整个过程还会依次调用prepatch,update,postpatch等钩子函数，在编译阶段生成的一些静态子树，在这个过程   * @param oldVnode 中由于不会改变而直接跳过比对，动态子树在比较过程中比较核心的部分就是当新旧vnode同时存在children，通过updateChildren方法对子节点做更新，   * @param vnode   * @param insertedVnodeQueue   * @param removeOnly   */ function patchVnode (oldVnode, vnode, insertedVnodeQueue, removeOnly) {  if (oldVnode === vnode) {   return  }  const elm = vnode.elm = oldVnode.elm  if (isTrue(oldVnode.isAsyncPlaceholder)) {   if (isDef(vnode.asyncFactory.resolved)) {    hydrate(oldVnode.elm, vnode, insertedVnodeQueue)   } else {    vnode.isAsyncPlaceholder = true   }   return  }   // 用于静态树的重用元素。    // 注意，如果vnode是克隆的，我们只做这个。    // 如果新节点不是克隆的，则表示呈现函数。    // 由热重加载api重新设置，我们需要进行适当的重新渲染。  if (isTrue(vnode.isStatic) &&   isTrue(oldVnode.isStatic) &&   vnode.key === oldVnode.key &&   (isTrue(vnode.isCloned) || isTrue(vnode.isOnce))  ) {   vnode.componentInstance = oldVnode.componentInstance   return  }  let i  const data = vnode.data  if (isDef(data) && isDef(i = data.hook) && isDef(i = i.prepatch)) {   i(oldVnode, vnode)  }  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)  }  if (isUndef(vnode.text)) {   if (isDef(oldCh) && isDef(ch)) {    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)  }  if (isDef(data)) {   if (isDef(i = data.hook) && isDef(i = i.postpatch)) i(oldVnode, vnode)  } }function insertBefore (parentNode, newNode, referenceNode) { parentNode.insertBefore(newNode, referenceNode);}/**   *   * @param vnode根据vnode的数据结构创建真实的dom节点，如果vnode有children则会遍历这些子节点，递归调用createElm方法，   * @param insertedVnodeQueue记录子节点创建顺序的队列，每创建一个dom元素就会往队列中插入当前的vnode，当整个vnode对象全部转换成为真实的dom 树时，会依次调用这个队列中vnode hook的insert方法   * @param parentElm   * @param refElm   * @param nested   */   let inPre = 0 function createElm (vnode, insertedVnodeQueue, parentElm, refElm, nested) {  vnode.isRootInsert = !nested // 过渡进入检查  if (createComponent(vnode, insertedVnodeQueue, parentElm, refElm)) {   return  }  const data = vnode.data  const children = vnode.children  const tag = vnode.tag  if (isDef(tag)) {   if (process.env.NODE_ENV !== 'production') {    if (data && data.pre) {     inPre++    }    if (     !inPre &&     !vnode.ns &&     !(      config.ignoredElements.length &&      config.ignoredElements.some(ignore => {       return isRegExp(ignore)        ? ignore.test(tag)        : ignore === tag      })     ) &&     config.isUnknownElement(tag)    ) {     warn(      'Unknown custom element: <' + tag + '> - did you ' +      'register the component correctly? For recursive components, ' +      'make sure to provide the "name" option.',      vnode.context     )    }   }   vnode.elm = vnode.ns    ? nodeOps.createElementNS(vnode.ns, tag)    : nodeOps.createElement(tag, vnode)   setScope(vnode)   /* istanbul ignore if */   if (__WEEX__) {    // in Weex, the default insertion order is parent-first.    // List items can be optimized to use children-first insertion    // with append="tree".    const appendAsTree = isDef(data) && isTrue(data.appendAsTree)    if (!appendAsTree) {     if (isDef(data)) {      invokeCreateHooks(vnode, insertedVnodeQueue)     }     insert(parentElm, vnode.elm, refElm)    }    createChildren(vnode, children, insertedVnodeQueue)    if (appendAsTree) {     if (isDef(data)) {      invokeCreateHooks(vnode, insertedVnodeQueue)     }     insert(parentElm, vnode.elm, refElm)    }   } else {    createChildren(vnode, children, insertedVnodeQueue)    if (isDef(data)) {     invokeCreateHooks(vnode, insertedVnodeQueue)    }    insert(parentElm, vnode.elm, refElm)   }   if (process.env.NODE_ENV !== 'production' && data && data.pre) {    inPre--   }  } else if (isTrue(vnode.isComment)) {   vnode.elm = nodeOps.createComment(vnode.text)   insert(parentElm, vnode.elm, refElm)  } else {   vnode.elm = nodeOps.createTextNode(vnode.text)   insert(parentElm, vnode.elm, refElm)  } }function insert (parent, elm, ref) {  if (isDef(parent)) {   if (isDef(ref)) {    if (ref.parentNode === parent) {     nodeOps.insertBefore(parent, elm, ref)    }   } else {    nodeOps.appendChild(parent, elm)   }  } }function removeVnodes (parentElm, vnodes, startIdx, endIdx) {  for (; startIdx <= endIdx; ++startIdx) {   const ch = vnodes[startIdx]   if (isDef(ch)) {    if (isDef(ch.tag)) {     removeAndInvokeRemoveHook(ch)     invokeDestroyHook(ch)    } else { // Text node     removeNode(ch.elm)    }   }  } }