Full analysis of Vue diff algorithm

Preface
Vue update view
patch
sameVnode
patchVnode
updateChildren

Preface

We know that Vue uses virtual DOM to reduce the number of operations on the real DOM to improve the efficiency of page operation. Today we'll look at how Vue updates the DOM when the page data changes. Vue and React use basically the same algorithm when updating DOM, both based on snabbdom. When data on the page changes, Vue does not render immediately. Instead, the diff algorithm is used to determine which parts do not need to be changed and which parts need to be changed and updated. Only the DOM parts that need to be updated need to be updated. This reduces a lot of unnecessary DOM operations and greatly improves performance. Vue uses such an abstract node VNode, which is an abstraction of the real DOM and does not rely on a certain platform. It can be a browser platform, weex, or even a node platform. It can also create, delete, and modify such an abstract DOM tree, which also makes it possible for front-end and back-end isomorphism.

Vue Update View

We know that in Vue 1.x, each data corresponds to a Watcher; in Vue 2.x, a component corresponds to a Watcher. In this way, when our data changes, the set function will trigger the Dep's notify function to notify the Watcher to execute the vm._update(vm._render(), hydrating) method to update the view. Let's take a look at the _update method.

Vue.prototype._update = function (vnode: VNode, hydrating?: boolean) {
  const vm:Component = this
  const prevEl = vm.$el
  const prevVnode = vm._vnode
  const restoreActiveInstance = setActiveInstance(vm)
  vm._vnode = vnode
  // Vue.prototype.__patch__ is injected in entry points
  // based on the rendering backend used.
  /*Based on backend rendering Vue.prototype.__patch__ is used as an entry point*/
  if (!prevVnode) {
    // initial render
    vm.$el = vm.__patch__(vm.$el, vnode, hydrating, false /* removeOnly */)
  } else {
    // updates
    vm.$el = vm.__patch__(prevVnode, vnode)
  }
  restoreActiveInstance()
  // update __vue__ reference
  /*Update the __vue__ of the new instance object*/
  if (prevEl) {
    prevEl.__vue__ = null
  }
  if (vm.$el) {
    vm.$el.__vue__ = vm
  }
  // if parent is an HOC, update its $el as well
  if (vm.$vnode && vm.$parent && vm.$vnode === vm.$parent._vnode) {
    vm.$parent.$el = vm.$el
  }
  // updated hook is called by the scheduler to ensure that children are
  // updated in a parent's updated hook.
}

Obviously, we can see that the _update method will patch the old Vnode with the passed Vnode. Next, let's take a look at what happens in the patch function.

patch

The patch function compares the old and new nodes, and then determines which nodes need to be modified. Only these nodes need to be modified, which can update the DOM more efficiently. Let's take a look at the code first.

return function patch (oldVnode, vnode, hydrating, removeOnly) {
  /*vnode does not exist, call the destruction hook to delete the node*/
  if (isUndef(vnode)) {
    if (isDef(oldVnode)) invokeDestroyHook(oldVnode)
    return
  }

  let isInitialPatch = false
  const insertedVnodeQueue = []

  /*oldVnode does not exist, create a new node directly*/
  if (isUndef(oldVnode)) {
    // empty mount (likely as component), create new root element
    isInitialPatch = true
    createElm(vnode, insertedVnodeQueue)
  } else {
    /*Mark whether the old VNode has a nodeType*/
    const isRealElement = isDef(oldVnode.nodeType)
    if (!isRealElement && sameVnode(oldVnode, vnode)) {
      // patch existing root node
      /*When it is the same node, directly modify the existing node*/
      patchVnode(oldVnode, vnode, insertedVnodeQueue, null, null, removeOnly)
    } else {
      if (isRealElement) {
        // mounting to a real element
        // check if this is server-rendered content and if we can perform
        // a successful hydration.
        if (oldVnode.nodeType === 1 && oldVnode.hasAttribute(SSR_ATTR)) {
          /*When the old VNode is a server-rendered element, hydrating is set to true*/
          oldVnode.removeAttribute(SSR_ATTR)
          hydrating = true
        }
        if (isTrue(hydrating)) {
          /*Need to be merged into the real Dom*/
          if (hydrate(oldVnode, vnode, insertedVnodeQueue)) {
            /*Call insert hook*/
            invokeInsertHook(vnode, insertedVnodeQueue, true)
            return oldVnode
          } else if (process.env.NODE_ENV !== 'production') {
            warn(
              'The client-side rendered virtual DOM tree is not matching ' +
              'server-rendered content. This is likely caused by incorrect ' +
              'HTML markup, for example nesting block-level elements inside ' +
              '<p>, or missing <tbody>. Bailing hydration and performing ' +
              'Full client-side render.'
            )
          }
        }
        // Either not server-rendered, or hydration failed.
        // create an empty node and replace it
        /*If it is not server-side rendering or merging into the real Dom fails, create an empty VNode node to replace it*/
        oldVnode = emptyNodeAt(oldVnode)
      }

      // replacing existing element
      /*Replace existing element*/
      const oldElm = oldVnode.elm
      const parentElm = nodeOps.parentNode(oldElm)

      // create new node
      createElm(
        vnode,
        insertedVnodeQueue,
        // extremely rare edge case: do not insert if old element is in a
        // leaving transition. Only happens when combining transition +
        // keep-alive + HOCs. (#4590)
        oldElm._leaveCb ? null : parentElm,
        nodeOps.nextSibling(oldElm)
      )

      // update parent placeholder node element, recursively
      if (isDef(vnode.parent)) {
        /*The component root node is replaced, traversing and updating the parent node element*/
        let ancestor = vnode.parent
        const patchable = isPatchable(vnode)
        while (ancestor) {
          for (let i = 0; i < cbs.destroy.length; ++i) {
            cbs.destroy[i](ancestor)
          }
          ancestor.elm = vnode.elm
          if (patchable) {
            /*Call create callback*/
            for (let i = 0; i < cbs.create.length; ++i) {
              cbs.create[i](emptyNode, ancestor)
            }
            //#6513
            // invoke insert hooks that may have been merged by create hooks.
            // eg for directives that uses the "inserted" hook.
            const insert = ancestor.data.hook.insert
            if (insert.merged) {
              // start at index 1 to avoid re-invoking component mounted hook
              for (let i = 1; i < insert.fns.length; i++) {
                insert.fns[i]()
              }
            }
          } else {
            registerRef(ancestor)
          }
          ancestor = ancestor.parent
        }
      }

      // destroy old node
      if (isDef(parentElm)) {
        /*Remove old nodes*/
        removeVnodes([oldVnode], 0, 0)
      } else if (isDef(oldVnode.tag)) {
        /*Call destroy hook*/
        invokeDestroyHook(oldVnode)
      }
    }
  }

  /*Call insert hook*/
  invokeInsertHook(vnode, insertedVnodeQueue, isInitialPatch)
  return vnode.elm
}

Vue's diff algorithm compares nodes on the same layer, so its time complexity is only O(n), and its algorithm is very efficient. We can also see from the code that sameVnode is used in patch to determine whether the old node and the new node are the same node. If so, further patchVnode will be performed, otherwise a new DOM will be created and the old DOM will be removed.

sameVnode

Next, let's take a look at how sameVnode determines whether two nodes are the same node.

/*
  To determine whether two VNode nodes are the same node, the following conditions must be met: key is the same tag (the label name of the current node) is the same isComment (whether it is a comment node) is the same whether data (the object corresponding to the current node, which contains some specific data information, is a VNodeData type, you can refer to the data information in the VNodeData type) is defined When the tag is <input>, the type must be the same*/
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)
      )
    )
  )
}

// Some browsers do not support dynamically changing type for <input>
// so they need to be treated as different nodes
/*
  Determine if the type is the same when the tag is <input>. Some browsers do not support dynamic modification of <input> types, so they are considered different types*/
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)
}

sameVnode determines whether two Node nodes are the same by comparing their key, tag, comment node, and data information. A separate judgment is made for the input tag to be compatible with different browsers.

patchVnode

 // diff algorithm compares nodes function patchVnode (
  oldVnode,
  vnode,
  insertedVnodeQueue,
  ownerArray,
  index,
  removeOnly
) {
  /*If two VNode nodes are the same, return directly*/
  if (oldVnode === vnode) {
    return
  }

  if (isDef(vnode.elm) && isDef(ownerArray)) {
    // clone reused vnode
    vnode = ownerArray[index] = cloneVNode(vnode)
  }

  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
  }

  // reuse element for static trees.
  // note we only do this if the vnode is cloned -
  // if the new node is not cloned it means the render functions have been
  // reset by the hot-reload-api and we need to do a proper re-render.
  /*
    If both the old and new VNodes are static and their keys are the same (representing the same node),
    And the new VNode is clone or marked with once (marked with v-once attribute, only rendered once),
    Then you just need to replace elm and componentInstance.
  */
  if (isTrue(vnode.isStatic) &&
    isTrue(oldVnode.isStatic) &&
    vnode.key === oldVnode.key &&
    (isTrue(vnode.isCloned) || isTrue(vnode.isOnce))
  ) {
    vnode.componentInstance = oldVnode.componentInstance
    return
  }

  // Execute some component hooks/*If data.hook.prepatch exists, execute it first*/
  let i
  const data = vnode.data
  if (isDef(data) && isDef(i = data.hook) && isDef(i = i.prepatch)) {
    /*i = data.hook.prepatch, if present, see "./create-component componentVNodeHooks". */
    i(oldVnode, vnode)
  }

  // Check if the old and new nodes have children const oldCh = oldVnode.children
  const ch = vnode.children

  // Property update if (isDef(data) && isPatchable(vnode)) {
    // Take out the array of attribute updates in cbs [attrFn, classFn, ...]
    /*Call update callback and update hook*/
    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)
  }

  // Determine whether the element if (isUndef(vnode.text)) { /*If this VNode node has no text*/
    // Both parties have children if (isDef(oldCh) && isDef(ch)) {
      /*If both the old and new nodes have children nodes, perform a diff operation on the child nodes and call updateChildren*/
      if (oldCh !== ch) updateChildren(elm, oldCh, ch, insertedVnodeQueue, removeOnly)
    } else if (isDef(ch)) {
      /*If the old node has no child nodes and the new node has child nodes, first clear the text content of elm, and then add child nodes to the current node*/
      if (process.env.NODE_ENV !== 'production') {
        checkDuplicateKeys(ch)
      }
      if (isDef(oldVnode.text)) nodeOps.setTextContent(elm, '')
      addVnodes(elm, null, ch, 0, ch.length - 1, insertedVnodeQueue)
    } else if (isDef(oldCh)) {
      /*When the new node has no child nodes and the old node has child nodes, remove all child nodes of ele*/
      removeVnodes(oldCh, 0, oldCh.length - 1)
    } else if (isDef(oldVnode.text)) {
      /*When both the new and old nodes have no child nodes, only the text is replaced. Since the new node text does not exist in this logic, the text of ele is directly removed*/
      nodeOps.setTextContent(elm, '')
    }
  } else if (oldVnode.text !== vnode.text) {
    /*When the text of the new and old nodes is different, directly replace this text*/
    nodeOps.setTextContent(elm, vnode.text)
  }
  /*Call postpatch hook*/
  if (isDef(data)) {
    if (isDef(i = data.hook) && isDef(i = i.postpatch)) i(oldVnode, vnode)
  }
}

The process of patchVnode is as follows:

If oldVnode and Vnode are the same object, then they are returned directly without updating.
If the old and new VNodes are both static, and their keys are the same (representing the same node), and the new VNode is cloned or marked with once (marked with the v-once attribute, rendered only once), then you only need to replace elm and componentInstance.
If vnode.text is not a text node, and both the old and new nodes have children nodes, and the child nodes of the old and new nodes are different, a diff operation is performed on the child nodes, calling updateChildren, which is also the core of diff.
If the old node has no child nodes and the new node has child nodes, first clear the text content of the old node DOM, and then add child nodes to the current DOM node
When the new node has no child nodes and the old node has child nodes, all child nodes of the DOM node are removed.
When both the new and old nodes have no child nodes, only the text is replaced.

updateChildren

The DOM of our page is a tree structure. The patchVnode method mentioned above reuses the same DOM element. If both the new and old VNnode objects have child elements, how should we compare the reused elements? This is what our updateChildren method does.

/*
  diff core method, comparison optimization*/
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 is a special flag used only by <transition-group>
  // to ensure removed elements stay in correct relative positions
  // during leaving transitions
  const canMove = !removeOnly

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

  while (oldStartIdx <= oldEndIdx && newStartIdx <= newEndIdx) {
    if (isUndef(oldStartVnode)) {
      /*Move to the right*/
      oldStartVnode = oldCh[++oldStartIdx] // Vnode has been moved left
    } else if (isUndef(oldEndVnode)) {
      /*Move to the left*/
      oldEndVnode = oldCh[--oldEndIdx]
    } else if (sameVnode(oldStartVnode, newStartVnode)) {
      /*The first four cases are actually when the key is specified, if it is determined to be the same VNode, then patch Vnode directly, and compare the two head nodes of oldCh and newCh respectively 2*2=4 cases*/
      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 {
      /*
        Generate a hash table with the key corresponding to the key of the old VNode (it will only be generated when undefined comes in for the first time, and it also paves the way for detecting duplicate key values later)
        For example, childre is like this [{xx: xx, key: 'key0'}, {xx: xx, key: 'key1'}, {xx: xx, key: 'key2'}] beginIdx = 0 endIdx = 2  
        The result is {key0: 0, key1: 1, key2: 2}
      */
      if (isUndef(oldKeyToIdx)) oldKeyToIdx = createKeyToOldIdx(oldCh, oldStartIdx, oldEndIdx)

      /*If the new VNode node newStartVnode has a key and this key can be found in oldVnode, then return the idxInOld of this node (that is, the node number, subscript)*/
      idxInOld = isDef(newStartVnode.key)
        ? oldKeyToIdx[newStartVnode.key]
        : findIdxInOld(newStartVnode, oldCh, oldStartIdx, oldEndIdx)
      if (isUndef(idxInOld)) { // New element
        /*NewStartVnode has no key or the key is not found in the old node, so create a new node*/
        createElm(newStartVnode, insertedVnodeQueue, parentElm, oldStartVnode.elm, false, newCh, newStartIdx)
      } else {
        /*Get the old node with the same key*/
        vnodeToMove = oldCh[idxInOld]
        if (sameVnode(vnodeToMove, newStartVnode)) {
          /*If the new VNode and the obtained node with the same key are the same VNode, patch Vnode*/
          patchVnode(vnodeToMove, newStartVnode, insertedVnodeQueue, newCh, newStartIdx)
          /*Because patchVnode has been entered, the old node is assigned undefined. If there is a new node with the same key as this node, it can be detected and prompted that there is a duplicate key*/
          oldCh[idxInOld] = undefined
          /*When there is a flag canMove, it can be directly inserted in front of the real Dom node corresponding to oldStartVnode*/
          canMove && nodeOps.insertBefore(parentElm, vnodeToMove.elm, oldStartVnode.elm)
        } else {
          // same key but different element. treat as new element
          /*When the new VNode is not the same VNode as the VNode with the same key (for example, the tags are different or the input tags have different types), create a new node*/
          createElm(newStartVnode, insertedVnodeQueue, parentElm, oldStartVnode.elm, false, newCh, newStartIdx)
        }
      }
      newStartVnode = newCh[++newStartIdx]
    }
  }
  if (oldStartIdx > oldEndIdx) {
    /*After all comparisons are completed, if oldStartIdx > oldEndIdx, it means that the old nodes have been traversed and there are more new nodes than old nodes, so the extra new nodes need to be created one by one and added to the real Dom*/
    refElm = isUndef(newCh[newEndIdx + 1]) ? null : newCh[newEndIdx + 1].elm
    addVnodes(parentElm, refElm, newCh, newStartIdx, newEndIdx, insertedVnodeQueue)
  } else if (newStartIdx > newEndIdx) {
    /*If newStartIdx > newEndIdx after all comparisons are completed, it means that the new node has been traversed and there are more old nodes than new nodes. At this time, the redundant old nodes need to be removed from the real Dom*/
    removeVnodes(oldCh, oldStartIdx, oldEndIdx)
  }
}

The following is a copy of other bloggers' articles, which I think are well written: github.com/liutao/vue2…

At first glance, this block of code may be a bit confusing. The specific content is actually not complicated. Let's first take a general look at the entire judgment process, and then go through it in detail through several examples.

oldStartIdx, newStartIdx, oldEndIdx, and newEndIdx are all pointers. I believe everyone knows what each one refers to. During the entire comparison process, we will continue to move the pointer.

oldStartVnode, newStartVnode, oldEndVnode, and newEndVnode correspond one-to-one to the above pointers and are the VNode nodes they point to.

The while loop stops after the traversal of oldCh or newCh is completed, otherwise the loop process will continue to execute. The whole process is divided into the following situations:

1. If oldStartVnode is not defined, the starting pointer of the oldCh array traversal is moved back one position.

  if (isUndef(oldStartVnode)) {
    oldStartVnode = oldCh[++oldStartIdx] // Vnode has been moved left
  }

Note: See the seventh case, the same key value may be set to undefined

2. If oldEndVnode is not defined, the starting pointer of the oldCh array traversal is moved forward one position.

  else if (isUndef(oldEndVnode)) {
    oldEndVnode = oldCh[--oldEndIdx]
  }

Note: See the seventh case, the same key value may be set to undefined

3. sameVnode(oldStartVnode, newStartVnode), here it is determined whether the objects pointed to by the two array start pointers can be reused. If it returns true, the patchVnode method is called first to reuse the DOM element and recursively compare the child elements, and then the starting pointers of oldCh and newCh are moved back one position respectively.

  else if (sameVnode(oldStartVnode, newStartVnode)) {
    patchVnode(oldStartVnode, newStartVnode, insertedVnodeQueue)
    oldStartVnode = oldCh[++oldStartIdx]
    newStartVnode = newCh[++newStartIdx]
  }

4. sameVnode(oldEndVnode, newEndVnode), here it is determined whether the objects pointed to by the two array end pointers can be reused. If true is returned, the patchVnode method is first called to reuse the DOM element and recursively compare the child elements, and then the end pointers of oldCh and newCh are moved forward one position respectively.

  else if (sameVnode(oldEndVnode, newEndVnode)) {
    patchVnode(oldEndVnode, newEndVnode, insertedVnodeQueue)
    oldEndVnode = oldCh[--oldEndIdx]
    newEndVnode = newCh[--newEndIdx]
  }

5. sameVnode(oldStartVnode, newEndVnode), here it is determined whether the object pointed to by the oldCh start pointer and the object pointed to by the newCh end pointer can be reused. If it returns true, the patchVnode method is called first to reuse the DOM element and recursively compare the child elements. Because the reused element is the element pointed to by the end pointer in newCh, it is inserted in front of oldEndVnode.elm. Finally, the starting pointer of oldCh moves back one position, and the starting pointer of newCh moves forward one position.

  else if (sameVnode(oldStartVnode, newEndVnode)) { // Vnode moved right
    patchVnode(oldStartVnode, newEndVnode, insertedVnodeQueue)
    canMove && nodeOps.insertBefore(parentElm, oldStartVnode.elm, nodeOps.nextSibling(oldEndVnode.elm))
    oldStartVnode = oldCh[++oldStartIdx]
    newEndVnode = newCh[--newEndIdx]
  }

6. sameVnode(oldEndVnode, newStartVnode), here it is determined whether the object pointed to by the end pointer of oldCh and the object pointed to by the start pointer of newCh can be reused. If it returns true, the patchVnode method is called first to reuse the DOM element and recursively compare the child elements. Because the reused element is the element pointed to by the start pointer in newCh, it is inserted in front of oldStartVnode.elm. Finally, the end pointer of oldCh moves forward one position, and the start pointer of newCh moves backward one position.

  else if (sameVnode(oldEndVnode, newStartVnode)) { // Vnode moved left
    patchVnode(oldEndVnode, newStartVnode, insertedVnodeQueue)
    canMove && nodeOps.insertBefore(parentElm, oldEndVnode.elm, oldStartVnode.elm)
    oldEndVnode = oldCh[--oldEndIdx]
    newStartVnode = newCh[++newStartIdx]
  }

7. If none of the above six conditions are met, go here. The previous comparisons are all comparisons of head and tail combinations. The situation here is a little more complicated. In fact, it is mainly based on the reuse of elements according to the key value.

① Traverse the oldCh array, find the object with key, and generate a new object oldKeyToIdx with key as the key and index value as value.

if (isUndef(oldKeyToIdx)) oldKeyToIdx = createKeyToOldIdx(oldCh, oldStartIdx, oldEndIdx)
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
}

② Check whether newStartVnode has a key value, and check whether oldKeyToIdx has the same key.

  idxInOld = isDef(newStartVnode.key) ? oldKeyToIdx[newStartVnode.key] : null

③ If newStartVnode has no key or oldKeyToIdx does not have the same key, the createElm method is called to create a new element, and the starting index of newCh is moved back one position.

  if (isUndef(idxInOld)) { // New element
    createElm(newStartVnode, insertedVnodeQueue, parentElm, oldStartVnode.elm)
    newStartVnode = newCh[++newStartIdx]
  }

④ elmToMove stores the element to be moved. If sameVnode(elmToMove, newStartVnode) returns true, it means it can be reused. At this time, the patchVnode method is called first to reuse the DOM element and recursively compare the child elements. The relative element in oldCh is reset to undefined, and then the current element is inserted in front of oldStartVnode.elm, and the starting index of newCh is moved back one position. If sameVnode(elmToMove, newStartVnode) returns false, for example, the tag names are different, the createElm method is called to create a new element, and the starting index of newCh is moved back one position.

  elmToMove = oldCh[idxInOld]
  if (sameVnode(elmToMove, newStartVnode)) {
    patchVnode(elmToMove, newStartVnode, insertedVnodeQueue)
    oldCh[idxInOld] = undefined
    canMove && nodeOps.insertBefore(parentElm, newStartVnode.elm, oldStartVnode.elm)
    newStartVnode = newCh[++newStartIdx]
  } else {
    // same key but different element. treat as new element
    createElm(newStartVnode, insertedVnodeQueue, parentElm, oldStartVnode.elm)
    newStartVnode = newCh[++newStartIdx]
  }

The above is the detailed content of the use of vue diff algorithm. For more information about vue diff algorithm, please pay attention to other related articles on 123WORDPRESS.COM!

You may also be interested in: