组件更新

在组件化章节，我们介绍了 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