• 组件更新
    • 新旧节点不同
    • 新旧节点相同
    • updateChildren
    • 总结

    组件更新

    在组件化章节，我们介绍了 Vue 的组件化实现过程，不过我们只讲了 Vue 组件的创建过程，并没有涉及到组件数据发生变化，更新组件的过程。而通过我们这一章对数据响应式原理的分析，了解到当数据发生变化的时候，会触发渲染 watcher 的回调函数，进而执行组件的更新过程，接下来我们来详细分析这一过程。

    1. updateComponent = () => {
    2.   vm._update(vm._render(), hydrating)
    3. }
    4. new Watcher(vm, updateComponent, noop, {
    5.   before () {
    6.     if (vm._isMounted) {
    7.       callHook(vm, 'beforeUpdate')
    8.     }
    9.   }
    10. }, true /* isRenderWatcher */)

    组件的更新还是调用了 vm._update 方法，我们再回顾一下这个方法，它的定义在 src/core/instance/lifecycle.js 中：

    1. Vue.prototype._update = function (vnode: VNode, hydrating?: boolean) {
    2.   const vm: Component = this
    3.   // ...
    4.   const prevVnode = vm._vnode
    5.   if (!prevVnode) {
    6.      // initial render
    7.     vm.$el = vm.__patch__(vm.$el, vnode, hydrating, false /* removeOnly */)
    8.   } else {
    9.     // updates
    10.     vm.$el = vm.__patch__(prevVnode, vnode)
    11.   }
    12.   // ...
    13. }

    组件更新的过程，会执行 vm.$el = vm.patch(prevVnode, vnode)，它仍然会调用 patch 函数，在 src/core/vdom/patch.js 中定义：

    1. return function patch (oldVnode, vnode, hydrating, removeOnly) {
    2.   if (isUndef(vnode)) {
    3.     if (isDef(oldVnode)) invokeDestroyHook(oldVnode)
    4.     return
    5.   }
    7.   let isInitialPatch = false
    8.   const insertedVnodeQueue = []
    10.   if (isUndef(oldVnode)) {
    11.     // empty mount (likely as component), create new root element
    12.     isInitialPatch = true
    13.     createElm(vnode, insertedVnodeQueue)
    14.   } else {
    15.     const isRealElement = isDef(oldVnode.nodeType)
    16.     if (!isRealElement && sameVnode(oldVnode, vnode)) {
    17.       // patch existing root node
    18.       patchVnode(oldVnode, vnode, insertedVnodeQueue, removeOnly)
    19.     } else {
    20.       if (isRealElement) {
    21.          // ...
    22.       }
    24.       // replacing existing element
    25.       const oldElm = oldVnode.elm
    26.       const parentElm = nodeOps.parentNode(oldElm)
    28.       // create new node
    29.       createElm(
    30.         vnode,
    31.         insertedVnodeQueue,
    32.         // extremely rare edge case: do not insert if old element is in a
    33.         // leaving transition. Only happens when combining transition +
    34.         // keep-alive + HOCs. (#4590)
    35.         oldElm._leaveCb ? null : parentElm,
    36.         nodeOps.nextSibling(oldElm)
    37.       )
    39.       // update parent placeholder node element, recursively
    40.       if (isDef(vnode.parent)) {
    41.         let ancestor = vnode.parent
    42.         const patchable = isPatchable(vnode)
    43.         while (ancestor) {
    44.           for (let i = 0; i < cbs.destroy.length; ++i) {
    45.             cbs.destroy[i](ancestor)
    46.           }
    47.           ancestor.elm = vnode.elm
    48.           if (patchable) {
    49.             for (let i = 0; i < cbs.create.length; ++i) {
    50.               cbs.create[i](emptyNode, ancestor)
    51.             }
    52.             // #6513
    53.             // invoke insert hooks that may have been merged by create hooks.
    54.             // e.g. for directives that uses the "inserted" hook.
    55.             const insert = ancestor.data.hook.insert
    56.             if (insert.merged) {
    57.               // start at index 1 to avoid re-invoking component mounted hook
    58.               for (let i = 1; i < insert.fns.length; i++) {
    59.                 insert.fns[i]()
    60.               }
    61.             }
    62.           } else {
    63.             registerRef(ancestor)
    64.           }
    65.           ancestor = ancestor.parent
    66.         }
    67.       }
    69.       // destroy old node
    70.       if (isDef(parentElm)) {
    71.         removeVnodes(parentElm, [oldVnode], 0, 0)
    72.       } else if (isDef(oldVnode.tag)) {
    73.         invokeDestroyHook(oldVnode)
    74.       }
    75.     }
    76.   }
    78.   invokeInsertHook(vnode, insertedVnodeQueue, isInitialPatch)
    79.   return vnode.elm
    80. }

    这里执行 patch 的逻辑和首次渲染是不一样的，因为 oldVnode 不为空，并且它和 vnode 都是 VNode 类型，接下来会通过 sameVNode(oldVnode, vnode) 判断它们是否是相同的 VNode 来决定走不同的更新逻辑：

    1. function sameVnode (a, b) {
    2.   return (
    3.     a.key === b.key && (
    4.       (
    5.         a.tag === b.tag &&
    6.         a.isComment === b.isComment &&
    7.         isDef(a.data) === isDef(b.data) &&
    8.         sameInputType(a, b)
    9.       ) || (
    10.         isTrue(a.isAsyncPlaceholder) &&
    11.         a.asyncFactory === b.asyncFactory &&
    12.         isUndef(b.asyncFactory.error)
    13.       )
    14.     )
    15.   )
    16. }

    sameVnode 的逻辑非常简单，如果两个 vnode 的 key 不相等，则是不同的；否则继续判断对于同步组件，则判断 isComment、data、input 类型等是否相同，对于异步组件，则判断 asyncFactory 是否相同。

    所以根据新旧 vnode 是否为 sameVnode，会走到不同的更新逻辑，我们先来说一下不同的情况。

    新旧节点不同

    如果新旧 vnode 不同，那么更新的逻辑非常简单，它本质上是要替换已存在的节点，大致分为 3 步

    • 创建新节点
    1. const oldElm = oldVnode.elm
    2. const parentElm = nodeOps.parentNode(oldElm)
    3. // create new node
    4. createElm(
    5.   vnode,
    6.   insertedVnodeQueue,
    7.   // extremely rare edge case: do not insert if old element is in a
    8.   // leaving transition. Only happens when combining  transition +
    9.   // keep-alive + HOCs. (#4590)
    10.   oldElm._leaveCb ? null : parentElm,
    11.   nodeOps.nextSibling(oldElm)
    12. )

    以当前旧节点为参考节点，创建新的节点，并插入到 DOM 中，createElm 的逻辑我们之前分析过。

    • 更新父的占位符节点
    1. // update parent placeholder node element, recursively
    2. if (isDef(vnode.parent)) {
    3.   let ancestor = vnode.parent
    4.   const patchable = isPatchable(vnode)
    5.   while (ancestor) {
    6.     for (let i = 0; i < cbs.destroy.length; ++i) {
    7.       cbs.destroy[i](ancestor)
    8.     }
    9.     ancestor.elm = vnode.elm
    10.     if (patchable) {
    11.       for (let i = 0; i < cbs.create.length; ++i) {
    12.         cbs.create[i](emptyNode, ancestor)
    13.       }
    14.       // #6513
    15.       // invoke insert hooks that may have been merged by create hooks.
    16.       // e.g. for directives that uses the "inserted" hook.
    17.       const insert = ancestor.data.hook.insert
    18.       if (insert.merged) {
    19.         // start at index 1 to avoid re-invoking component mounted hook
    20.         for (let i = 1; i < insert.fns.length; i++) {
    21.           insert.fns[i]()
    22.         }
    23.       }
    24.     } else {
    25.       registerRef(ancestor)
    26.     }
    27.     ancestor = ancestor.parent
    28.   }
    29. }

    我们只关注主要逻辑即可，找到当前 vnode 的父的占位符节点，先执行各个 module 的 destroy 的钩子函数，如果当前占位符是一个可挂载的节点，则执行 module 的 create 钩子函数。对于这些钩子函数的作用，在之后的章节会详细介绍。

    • 删除旧节点
    1. // destroy old node
    2. if (isDef(parentElm)) {
    3.   removeVnodes(parentElm, [oldVnode], 0, 0)
    4. } else if (isDef(oldVnode.tag)) {
    5.   invokeDestroyHook(oldVnode)
    6. }

    把 oldVnode 从当前 DOM 树中删除，如果父节点存在，则执行 removeVnodes 方法：

    1. function removeVnodes (parentElm, vnodes, startIdx, endIdx) {
    2.   for (; startIdx <= endIdx; ++startIdx) {
    3.     const ch = vnodes[startIdx]
    4.     if (isDef(ch)) {
    5.       if (isDef(ch.tag)) {
    6.         removeAndInvokeRemoveHook(ch)
    7.         invokeDestroyHook(ch)
    8.       } else { // Text node
    9.         removeNode(ch.elm)
    10.       }
    11.     }
    12.   }
    13. }
    15. function removeAndInvokeRemoveHook (vnode, rm) {
    16.   if (isDef(rm) || isDef(vnode.data)) {
    17.     let i
    18.     const listeners = cbs.remove.length + 1
    19.     if (isDef(rm)) {
    20.       // we have a recursively passed down rm callback
    21.       // increase the listeners count
    22.       rm.listeners += listeners
    23.     } else {
    24.       // directly removing
    25.       rm = createRmCb(vnode.elm, listeners)
    26.     }
    27.     // recursively invoke hooks on child component root node
    28.     if (isDef(i = vnode.componentInstance) && isDef(i = i._vnode) && isDef(i.data)) {
    29.       removeAndInvokeRemoveHook(i, rm)
    30.     }
    31.     for (i = 0; i < cbs.remove.length; ++i) {
    32.       cbs.remove[i](vnode, rm)
    33.     }
    34.     if (isDef(i = vnode.data.hook) && isDef(i = i.remove)) {
    35.       i(vnode, rm)
    36.     } else {
    37.       rm()
    38.     }
    39.   } else {
    40.     removeNode(vnode.elm)
    41.   }
    42. }
    44. function invokeDestroyHook (vnode) {
    45.   let i, j
    46.   const data = vnode.data
    47.   if (isDef(data)) {
    48.     if (isDef(i = data.hook) && isDef(i = i.destroy)) i(vnode)
    49.     for (i = 0; i < cbs.destroy.length; ++i) cbs.destroy[i](vnode)
    50.   }
    51.   if (isDef(i = vnode.children)) {
    52.     for (j = 0; j < vnode.children.length; ++j) {
    53.       invokeDestroyHook(vnode.children[j])
    54.     }
    55.   }
    56. }

    删除节点逻辑很简单，就是遍历待删除的 vnodes 做删除，其中 removeAndInvokeRemoveHook 的作用是从 DOM 中移除节点并执行 module 的 remove 钩子函数，并对它的子节点递归调用 removeAndInvokeRemoveHook 函数；invokeDestroyHook 是执行 module 的 destory 钩子函数以及 vnode 的 destory 钩子函数，并对它的子 vnode 递归调用 invokeDestroyHook 函数；removeNode 就是调用平台的 DOM API 去把真正的 DOM 节点移除。

    在之前介绍组件生命周期的时候提到 beforeDestroy & destroyed 这两个生命周期钩子函数，它们就是在执行 invokeDestroyHook 过程中，执行了 vnode 的 destory 钩子函数，它的定义在 src/core/vdom/create-component.js 中：

    1. const componentVNodeHooks = {
    2.   destroy (vnode: MountedComponentVNode) {
    3.     const { componentInstance } = vnode
    4.     if (!componentInstance._isDestroyed) {
    5.       if (!vnode.data.keepAlive) {
    6.         componentInstance.$destroy()
    7.       } else {
    8.         deactivateChildComponent(componentInstance, true /* direct */)
    9.       }
    10.     }
    11.   }
    12. }

    当组件并不是 keepAlive 的时候，会执行 componentInstance.$destroy() 方法，然后就会执行 beforeDestroy & destroyed 两个钩子函数。

    新旧节点相同

    对于新旧节点不同的情况，这种创建新节点 -> 更新占位符节点 -> 删除旧节点的逻辑是很容易理解的。还有一种组件 vnode 的更新情况是新旧节点相同，它会调用 patchVNode 方法，它的定义在 src/core/vdom/patch.js 中：

    1. function patchVnode (oldVnode, vnode, insertedVnodeQueue, removeOnly) {
    2.   if (oldVnode === vnode) {
    3.     return
    4.   }
    6.   const elm = vnode.elm = oldVnode.elm
    8.   if (isTrue(oldVnode.isAsyncPlaceholder)) {
    9.     if (isDef(vnode.asyncFactory.resolved)) {
    10.       hydrate(oldVnode.elm, vnode, insertedVnodeQueue)
    11.     } else {
    12.       vnode.isAsyncPlaceholder = true
    13.     }
    14.     return
    15.   }
    17.   // reuse element for static trees.
    18.   // note we only do this if the vnode is cloned -
    19.   // if the new node is not cloned it means the render functions have been
    20.   // reset by the hot-reload-api and we need to do a proper re-render.
    21.   if (isTrue(vnode.isStatic) &&
    22.     isTrue(oldVnode.isStatic) &&
    23.     vnode.key === oldVnode.key &&
    24.     (isTrue(vnode.isCloned) || isTrue(vnode.isOnce))
    25.   ) {
    26.     vnode.componentInstance = oldVnode.componentInstance
    27.     return
    28.   }
    30.   let i
    31.   const data = vnode.data
    32.   if (isDef(data) && isDef(i = data.hook) && isDef(i = i.prepatch)) {
    33.     i(oldVnode, vnode)
    34.   }
    36.   const oldCh = oldVnode.children
    37.   const ch = vnode.children
    38.   if (isDef(data) && isPatchable(vnode)) {
    39.     for (i = 0; i < cbs.update.length; ++i) cbs.update[i](oldVnode, vnode)
    40.     if (isDef(i = data.hook) && isDef(i = i.update)) i(oldVnode, vnode)
    41.   }
    42.   if (isUndef(vnode.text)) {
    43.     if (isDef(oldCh) && isDef(ch)) {
    44.       if (oldCh !== ch) updateChildren(elm, oldCh, ch, insertedVnodeQueue, removeOnly)
    45.     } else if (isDef(ch)) {
    46.       if (isDef(oldVnode.text)) nodeOps.setTextContent(elm, '')
    47.       addVnodes(elm, null, ch, 0, ch.length - 1, insertedVnodeQueue)
    48.     } else if (isDef(oldCh)) {
    49.       removeVnodes(elm, oldCh, 0, oldCh.length - 1)
    50.     } else if (isDef(oldVnode.text)) {
    51.       nodeOps.setTextContent(elm, '')
    52.     }
    53.   } else if (oldVnode.text !== vnode.text) {
    54.     nodeOps.setTextContent(elm, vnode.text)
    55.   }
    56.   if (isDef(data)) {
    57.     if (isDef(i = data.hook) && isDef(i = i.postpatch)) i(oldVnode, vnode)
    58.   }
    59. }

    patchVnode 的作用就是把新的 vnodepatch 到旧的 vnode 上，这里我们只关注关键的核心逻辑，我把它拆成四步骤：

    • 执行 prepatch 钩子函数
    1. let i
    2. const data = vnode.data
    3. if (isDef(data) && isDef(i = data.hook) && isDef(i = i.prepatch)) {
    4.   i(oldVnode, vnode)
    5. }

    当更新的 vnode 是一个组件 vnode 的时候，会执行 prepatch 的方法，它的定义在 src/core/vdom/create-component.js 中：

    1. const componentVNodeHooks = {
    2.   prepatch (oldVnode: MountedComponentVNode, vnode: MountedComponentVNode) {
    3.     const options = vnode.componentOptions
    4.     const child = vnode.componentInstance = oldVnode.componentInstance
    5.     updateChildComponent(
    6.       child,
    7.       options.propsData, // updated props
    8.       options.listeners, // updated listeners
    9.       vnode, // new parent vnode
    10.       options.children // new children
    11.     )
    12.   }
    13. }

    prepatch 方法就是拿到新的 vnode 的组件配置以及组件实例，去执行 updateChildComponent 方法，它的定义在 src/core/instance/lifecycle.js 中：

    1. export function updateChildComponent (
    2.   vm: Component,
    3.   propsData: ?Object,
    4.   listeners: ?Object,
    5.   parentVnode: MountedComponentVNode,
    6.   renderChildren: ?Array<VNode>
    7. ) {
    8.   if (process.env.NODE_ENV !== 'production') {
    9.     isUpdatingChildComponent = true
    10.   }
    12.   // determine whether component has slot children
    13.   // we need to do this before overwriting $options._renderChildren
    14.   const hasChildren = !!(
    15.     renderChildren ||               // has new static slots
    16.     vm.$options._renderChildren ||  // has old static slots
    17.     parentVnode.data.scopedSlots || // has new scoped slots
    18.     vm.$scopedSlots !== emptyObject // has old scoped slots
    19.   )
    21.   vm.$options._parentVnode = parentVnode
    22.   vm.$vnode = parentVnode // update vm's placeholder node without re-render
    24.   if (vm._vnode) { // update child tree's parent
    25.     vm._vnode.parent = parentVnode
    26.   }
    27.   vm.$options._renderChildren = renderChildren
    29.   // update $attrs and $listeners hash
    30.   // these are also reactive so they may trigger child update if the child
    31.   // used them during render
    32.   vm.$attrs = parentVnode.data.attrs || emptyObject
    33.   vm.$listeners = listeners || emptyObject
    35.   // update props
    36.   if (propsData && vm.$options.props) {
    37.     toggleObserving(false)
    38.     const props = vm._props
    39.     const propKeys = vm.$options._propKeys || []
    40.     for (let i = 0; i < propKeys.length; i++) {
    41.       const key = propKeys[i]
    42.       const propOptions: any = vm.$options.props // wtf flow?
    43.       props[key] = validateProp(key, propOptions, propsData, vm)
    44.     }
    45.     toggleObserving(true)
    46.     // keep a copy of raw propsData
    47.     vm.$options.propsData = propsData
    48.   }
    50.   // update listeners
    51.   listeners = listeners || emptyObject
    52.   const oldListeners = vm.$options._parentListeners
    53.   vm.$options._parentListeners = listeners
    54.   updateComponentListeners(vm, listeners, oldListeners)
    56.   // resolve slots + force update if has children
    57.   if (hasChildren) {
    58.     vm.$slots = resolveSlots(renderChildren, parentVnode.context)
    59.     vm.$forceUpdate()
    60.   }
    62.   if (process.env.NODE_ENV !== 'production') {
    63.     isUpdatingChildComponent = false
    64.   }
    65. }

    updateChildComponent 的逻辑也非常简单，由于更新了 vnode，那么 vnode 对应的实例 vm 的一系列属性也会发生变化，包括占位符 vm.$vnode 的更新、slot 的更新，listeners 的更新，props 的更新等等。

    • 执行 update 钩子函数
    1. if (isDef(data) && isPatchable(vnode)) {
    2.   for (i = 0; i < cbs.update.length; ++i) cbs.update[i](oldVnode, vnode)
    3.   if (isDef(i = data.hook) && isDef(i = i.update)) i(oldVnode, vnode)
    4. }

    回到 patchVNode 函数，在执行完新的 vnode 的 prepatch 钩子函数，会执行所有 module 的 update 钩子函数以及用户自定义 update 钩子函数，对于 module 的钩子函数，之后我们会有具体的章节针对一些具体的 case 分析。

    • 完成 patch 过程
    1. const oldCh = oldVnode.children
    2. const ch = vnode.children
    3. if (isDef(data) && isPatchable(vnode)) {
    4.   for (i = 0; i < cbs.update.length; ++i) cbs.update[i](oldVnode, vnode)
    5.   if (isDef(i = data.hook) && isDef(i = i.update)) i(oldVnode, vnode)
    6. }
    7. if (isUndef(vnode.text)) {
    8.   if (isDef(oldCh) && isDef(ch)) {
    9.     if (oldCh !== ch) updateChildren(elm, oldCh, ch, insertedVnodeQueue, removeOnly)
    10.   } else if (isDef(ch)) {
    11.     if (isDef(oldVnode.text)) nodeOps.setTextContent(elm, '')
    12.     addVnodes(elm, null, ch, 0, ch.length - 1, insertedVnodeQueue)
    13.   } else if (isDef(oldCh)) {
    14.     removeVnodes(elm, oldCh, 0, oldCh.length - 1)
    15.   } else if (isDef(oldVnode.text)) {
    16.     nodeOps.setTextContent(elm, '')
    17.   }
    18. } else if (oldVnode.text !== vnode.text) {
    19.   nodeOps.setTextContent(elm, vnode.text)
    20. }

    如果 vnode 是个文本节点且新旧文本不相同，则直接替换文本内容。如果不是文本节点，则判断它们的子节点，并分了几种情况处理：

    • oldCh 与 ch 都存在且不相同时，使用 updateChildren 函数来更新子节点，这个后面重点讲。
      2.如果只有 ch 存在，表示旧节点不需要了。如果旧的节点是文本节点则先将节点的文本清除，然后通过 addVnodes 将 ch 批量插入到新节点 elm 下。

    3.如果只有 oldCh 存在，表示更新的是空节点，则需要将旧的节点通过 removeVnodes 全部清除。

    4.当只有旧节点是文本节点的时候，则清除其节点文本内容。

    • 执行 postpatch 钩子函数
    1. if (isDef(data)) {
    2.   if (isDef(i = data.hook) && isDef(i = i.postpatch)) i(oldVnode, vnode)
    3. }

    再执行完 patch 过程后，会执行 postpatch 钩子函数，它是组件自定义的钩子函数，有则执行。

    那么在整个 pathVnode 过程中，最复杂的就是 updateChildren 方法了，下面我们来单独介绍它。

    updateChildren

    1. function updateChildren (parentElm, oldCh, newCh, insertedVnodeQueue, removeOnly) {
    2.   let oldStartIdx = 0
    3.   let newStartIdx = 0
    4.   let oldEndIdx = oldCh.length - 1
    5.   let oldStartVnode = oldCh[0]
    6.   let oldEndVnode = oldCh[oldEndIdx]
    7.   let newEndIdx = newCh.length - 1
    8.   let newStartVnode = newCh[0]
    9.   let newEndVnode = newCh[newEndIdx]
    10.   let oldKeyToIdx, idxInOld, vnodeToMove, refElm
    12.   // removeOnly is a special flag used only by <transition-group>
    13.   // to ensure removed elements stay in correct relative positions
    14.   // during leaving transitions
    15.   const canMove = !removeOnly
    17.   if (process.env.NODE_ENV !== 'production') {
    18.     checkDuplicateKeys(newCh)
    19.   }
    21.   while (oldStartIdx <= oldEndIdx && newStartIdx <= newEndIdx) {
    22.     if (isUndef(oldStartVnode)) {
    23.       oldStartVnode = oldCh[++oldStartIdx] // Vnode has been moved left
    24.     } else if (isUndef(oldEndVnode)) {
    25.       oldEndVnode = oldCh[--oldEndIdx]
    26.     } else if (sameVnode(oldStartVnode, newStartVnode)) {
    27.       patchVnode(oldStartVnode, newStartVnode, insertedVnodeQueue)
    28.       oldStartVnode = oldCh[++oldStartIdx]
    29.       newStartVnode = newCh[++newStartIdx]
    30.     } else if (sameVnode(oldEndVnode, newEndVnode)) {
    31.       patchVnode(oldEndVnode, newEndVnode, insertedVnodeQueue)
    32.       oldEndVnode = oldCh[--oldEndIdx]
    33.       newEndVnode = newCh[--newEndIdx]
    34.     } else if (sameVnode(oldStartVnode, newEndVnode)) { // Vnode moved right
    35.       patchVnode(oldStartVnode, newEndVnode, insertedVnodeQueue)
    36.       canMove && nodeOps.insertBefore(parentElm, oldStartVnode.elm, nodeOps.nextSibling(oldEndVnode.elm))
    37.       oldStartVnode = oldCh[++oldStartIdx]
    38.       newEndVnode = newCh[--newEndIdx]
    39.     } else if (sameVnode(oldEndVnode, newStartVnode)) { // Vnode moved left
    40.       patchVnode(oldEndVnode, newStartVnode, insertedVnodeQueue)
    41.       canMove && nodeOps.insertBefore(parentElm, oldEndVnode.elm, oldStartVnode.elm)
    42.       oldEndVnode = oldCh[--oldEndIdx]
    43.       newStartVnode = newCh[++newStartIdx]
    44.     } else {
    45.       if (isUndef(oldKeyToIdx)) oldKeyToIdx = createKeyToOldIdx(oldCh, oldStartIdx, oldEndIdx)
    46.       idxInOld = isDef(newStartVnode.key)
    47.         ? oldKeyToIdx[newStartVnode.key]
    48.         : findIdxInOld(newStartVnode, oldCh, oldStartIdx, oldEndIdx)
    49.       if (isUndef(idxInOld)) { // New element
    50.         createElm(newStartVnode, insertedVnodeQueue, parentElm, oldStartVnode.elm, false, newCh, newStartIdx)
    51.       } else {
    52.         vnodeToMove = oldCh[idxInOld]
    53.         if (sameVnode(vnodeToMove, newStartVnode)) {
    54.           patchVnode(vnodeToMove, newStartVnode, insertedVnodeQueue)
    55.           oldCh[idxInOld] = undefined
    56.           canMove && nodeOps.insertBefore(parentElm, vnodeToMove.elm, oldStartVnode.elm)
    57.         } else {
    58.           // same key but different element. treat as new element
    59.           createElm(newStartVnode, insertedVnodeQueue, parentElm, oldStartVnode.elm, false, newCh, newStartIdx)
    60.         }
    61.       }
    62.       newStartVnode = newCh[++newStartIdx]
    63.     }
    64.   }
    65.   if (oldStartIdx > oldEndIdx) {
    66.     refElm = isUndef(newCh[newEndIdx + 1]) ? null : newCh[newEndIdx + 1].elm
    67.     addVnodes(parentElm, refElm, newCh, newStartIdx, newEndIdx, insertedVnodeQueue)
    68.   } else if (newStartIdx > newEndIdx) {
    69.     removeVnodes(parentElm, oldCh, oldStartIdx, oldEndIdx)
    70.   }
    71. }

    updateChildren 的逻辑比较复杂，直接读源码比较晦涩，我们可以通过一个具体的示例来分析它。

    1. <template>
    2.   <div id="app">
    3.     <div>
    4.       <ul>
    5.         <li v-for="item in items" :key="item.id">{{ item.val }}</li>
    6.       </ul>
    7.     </div>
    8.     <button @click="change">change</button>
    9.   </div>
    10. </template>
    12. <script>
    13.   export default {
    14.     name: 'App',
    15.     data() {
    16.       return {
    17.         items: [
    18.           {id: 0, val: 'A'},
    19.           {id: 1, val: 'B'},
    20.           {id: 2, val: 'C'},
    21.           {id: 3, val: 'D'}
    22.         ]
    23.       }
    24.     },
    25.     methods: {
    26.       change() {
    27.         this.items.reverse().push({id: 4, val: 'E'})
    28.       }
    29.     }
    30.   }
    31. </script>

    当我们点击 change 按钮去改变数据，最终会执行到 updateChildren 去更新 li 部分的列表数据，我们通过图的方式来描述一下它的更新过程：

    第一步：组件更新 - 图1

    第二步：组件更新 - 图2

    第三步：组件更新 - 图3

    第四步：组件更新 - 图4

    第五步：组件更新 - 图5

    第六步：组件更新 - 图6

    总结

    组件更新的过程核心就是新旧 vnode diff，对新旧节点相同以及不同的情况分别做不同的处理。新旧节点不同的更新流程是创建新节点->更新父占位符节点->删除旧节点；而新旧节点相同的更新流程是去获取它们的 children，根据不同情况做不同的更新逻辑。最复杂的情况是新旧节点相同且它们都存在子节点，那么会执行 updateChildren 逻辑，这块儿可以借助画图的方式配合理解。

    原文: https://ustbhuangyi.github.io/vue-analysis/reactive/component-update.html