Vue源码解读（六）：update和patch

Vue 的 _update 是实例上的一个私有方法，主要的作用就是把 VNode 渲染成真实的 DOM ,它在首次渲染和数据更新的时候被调用。在数据更新的时候会发生新 VNode 和旧 VNode 对比，获取差异更新视图，我们常说的 diff 就是发生在此过程中。

_update

// src/core/instance/lifecycle.js
Vue.prototype._update = function (vnode: VNode, hydrating?: boolean) {
  const vm: Component = this
  // 页面的挂载点，真实的元素
  const prevEl = vm.$el
  // 老 VNode
  const prevVnode = vm._vnode
  const restoreActiveInstance = setActiveInstance(vm)
  // 新 VNode
  vm._vnode = vnode
  // Vue.prototype.__patch__ is injected in entry points
  // based on the rendering backend used.
  if (!prevVnode) {
    // 老 VNode 不存在，表示首次渲染，即初始化页面时走这里
    vm.$el = vm.__patch__(vm.$el, vnode, hydrating, false /* removeOnly */)
  } else {
    // 响应式数据更新时，即更新页面时走这里
    vm.$el = vm.__patch__(prevVnode, vnode)
  }
  restoreActiveInstance()
  // update __vue__ reference
  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.
}

.patch

// src/platforms/web/runtime/index.js
//  web 平台的 patch 函数，不同平台的定义不相同。
Vue.prototype.__patch__ = inBrowser ? patch : noop

patch

// src/platforms/web/runtime/patch.js
import * as nodeOps from 'web/runtime/node-ops'
import { createPatchFunction } from 'core/vdom/patch'
import baseModules from 'core/vdom/modules/index'
import platformModules from 'web/runtime/modules/index'

// the directive module should be applied last, after all
// built-in modules have been applied.
const modules = platformModules.concat(baseModules)

// 传入平台特有的一些操作，然后返回一个 patch 函数
export const patch: Function = createPatchFunction({ nodeOps, modules })

patch 是 createPatchFunction 的返回值，这里传入了一个对象，nodeOps 封装了一系列相关平台 DOM的一些操作方法，modules 表示平台特有的一些操作，比如：attr、class、style、event 等，还有核心的 directive 和 ref，它们会向外暴露一些特有的方法。这里不做详细介绍了，有兴趣的老铁可以去了解了解。

createPatchFunction

// src/core/vdom/patch.js
const hooks = ['create', 'activate', 'update', 'remove', 'destroy']
/**
 * 传入相关平台一些功能操作，最后返回 patch 函数
 */
export function createPatchFunction (backend) {
  let i, j
  const cbs = {}

  const { modules, nodeOps } = backend
  /**
   * hooks = ['create', 'activate', 'update', 'remove', 'destroy']
   * 遍历这些钩子，然后从 modules 的各个模块中找到相应的方法，比如：directives 中的 create、update、destroy 方法
   *  cbs[hook] = [hook 方法]，比如: cbs.create = [fn1, fn2, ...]
   */
  for (i = 0; i < hooks.length; ++i) {
    // 比如 cbs.create = []
    cbs[hooks[i]] = []
    for (j = 0; j < modules.length; ++j) {
      if (isDef(modules[j][hooks[i]])) {
        // 遍历各个 modules，找出各个 module 中的 create 方法，然后添加到 cbs.create 数组中
        cbs[hooks[i]].push(modules[j][hooks[i]])
      }
    }
  }
  
  /**
   * ...这里定义了一大堆辅助函数，下面用到了捡重点看一下，不一一描述了。
   */
  
  /**
   * @param oldVnode  旧节点，可以不存在或是一个 DOM 对象
   * @param vnode  新节点，_render 返回的节点
   * @param hydrating  是否是服务端渲染
   * @param removeOnly  是给 transition-group 用的
   */
  return function patch (oldVnode, vnode, hydrating, removeOnly) {
    // 新节点不存在，旧节点存在，表示移除，销毁旧节点。
    if (isUndef(vnode)) {
      if (isDef(oldVnode)) invokeDestroyHook(oldVnode)
      return
    }
    let isInitialPatch = false
    const insertedVnodeQueue = []
    if (isUndef(oldVnode)) {
      // 新节点存在，旧节点不存在，表示新增。
      isInitialPatch = true
      createElm(vnode, insertedVnodeQueue)
    } else {
      // 新旧节点都存在
      
      // 旧节点是否为真实的元素
      const isRealElement = isDef(oldVnode.nodeType)
      if (!isRealElement && sameVnode(oldVnode, vnode)) {
        // patch existing root 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)) {
            oldVnode.removeAttribute(SSR_ATTR)
            hydrating = true
          }
          if (isTrue(hydrating)) {
            if (hydrate(oldVnode, vnode, insertedVnodeQueue)) {
              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 ' +
                ', or missing . Bailing hydration and performing ' +
                'full client-side render.'
              )
            }
          }
          // either not server-rendered, or hydration failed.
          // create an empty node and replace it
          // 不是服务端渲染或服务端渲染失败，把 oldVnode 转换成 VNode 对象.
          oldVnode = emptyNodeAt(oldVnode)
        }
        // replacing 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)) {
          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) {
              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.
              // e.g. 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)) {
          removeVnodes([oldVnode], 0, 0)
        } else if (isDef(oldVnode.tag)) {
          invokeDestroyHook(oldVnode)
        }
      }
    }
    invokeInsertHook(vnode, insertedVnodeQueue, isInitialPatch)
    return vnode.elm
  }
}

从 createPatchFunction 返回的 patch 方法来看，主要分为这么几种情况做处理：

新节点不存在，旧节点存在，表示移除。
新节点存在，旧节点不存在，表示新增。
新旧节点都存在，旧节点不是真实的元素且新旧节点是同一节点，表示 修改（更新） 。
新旧节点都存在，旧节点是真实的元素，一般是初始化渲染，旧节点的真实 DOM 也就是传入进来的 vm.$el 对应的元素，比如
；这里还有一个情况就是当 vnode.parent 存在，又不是同一节点，表示 替换（更新），比如异步组件。

移除节点

invokeDestroyHook

// src/core/vdom/patch.js
/**
 * 销毁节点：
 *   执行组件的 destroy 钩子，即执行 $destroy 方法 
 *   执行组件各个模块(style、class、directive 等）的 destroy 方法
 *   如果 vnode 还存在子节点，则递归调用 invokeDestroyHook
 */
function invokeDestroyHook (vnode) {
  let i, j
  const data = vnode.data
  if (isDef(data)) {
    if (isDef(i = data.hook) && isDef(i = i.destroy)) i(vnode)
    for (i = 0; i < cbs.destroy.length; ++i) cbs.destroy[i](vnode)
  }
  if (isDef(i = vnode.children)) {
    for (j = 0; j < vnode.children.length; ++j) {
      invokeDestroyHook(vnode.children[j])
    }
  }
}

初始化

在 createPatchFunction 中的 patch 方法内，由于传入的 vm.$el，实际上是一个真实的 DOM，所以 isRealElement 为 true，（服务端渲染的先跳过）然后通过 emptyNodeAt 把 oldVnode 转换成 VNode 对象。

emptyNodeAt

// src/core/vdom/patch.js
function emptyNodeAt (elm) {
  return new VNode(nodeOps.tagName(elm).toLowerCase(), {}, [], undefined, elm)
}

createElm

然后调用 createElm 方法，这个是重点：

// src/core/vdom/patch.js
function createElm (
  vnode,
  insertedVnodeQueue,
  parentElm,
  refElm,
  nested,
  ownerArray,
  index
) {
  if (isDef(vnode.elm) && isDef(ownerArray)) {
    // This vnode was used in a previous render!
    // now it's used as a new node, overwriting its elm would cause
    // potential patch errors down the road when it's used as an insertion
    // reference node. Instead, we clone the node on-demand before creating
    // associated DOM element for it.
    vnode = ownerArray[index] = cloneVNode(vnode)
  }
  vnode.isRootInsert = !nested // for transition enter check
  /**
   * 1、如果 vnode 是一个组件，则执行 init 钩子，创建组件实例并挂载，
   * 然后为组件执行各个模块的 create 钩子
   *   如果组件被 keep-alive 包裹，则激活组件
   * 2、如果是一个普通元素，则什么也不做
   */
  if (createComponent(vnode, insertedVnodeQueue, parentElm, refElm)) {
    return
  }
  // 获取 Data 对象
  const data = vnode.data
  // 获取子VNode
  const children = vnode.children
  // 判断 tag
  const tag = vnode.tag
  if (isDef(tag)) {
   // 如有有 tag 属性
    if (process.env.NODE_ENV !== 'production') {
      if (data && data.pre) {
        creatingElmInVPre++
      }
       // 未知标签
      if (isUnknownElement(vnode, creatingElmInVPre)) {
        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) {
      creatingElmInVPre--
    }
  } 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)
  }
}

createElm 的作用就是通过 VNode 创建真实的 DOM 插入到父节点中，它首先会执行 createComponent 方法，这个方法是用来创建子组件的，在初始化的时候会返回 false，后面组件新增的时候再看这个方法。然后会对判断 vnode.tag，如果存在的话，会走入下面的逻辑：

vnode.elm = vnode.ns
? nodeOps.createElementNS(vnode.ns, tag)
: nodeOps.createElement(tag, vnode)

createElementNS

// src/platforms/web/runtime/node-ops.js
// 创建带命名空间的元素节点
export function createElementNS (namespace: string, tagName: string): Element {
  return document.createElementNS(namespaceMap[namespace], tagName)
}

createElement

// src/platforms/web/runtime/node-ops.js
// 创建标签名为 tagName 的元素节点
export function createElement (tagName: string, vnode: VNode): Element {
  // 创建元素节点
  const elm = document.createElement(tagName)
  if (tagName !== 'select') {
    return elm
  }
  // false or null will remove the attribute but undefined will not
  // 如果是 select 元素，则为它设置 multiple 属性
  if (vnode.data && vnode.data.attrs && vnode.data.attrs.multiple !== undefined) {
    elm.setAttribute('multiple', 'multiple')
  }
  return elm
}

接着会判断 __WEEX__，这个是 Native 端的，跳过，接着执行 createChildren ：

createChildren

// src/core/vdom/patch.js
// 创建所有子节点，并将子节点插入父节点，形成一棵 DOM 树
function createChildren (vnode, children, insertedVnodeQueue) {
  if (Array.isArray(children)) {
    // children 是数组，表示是一组节点
    if (process.env.NODE_ENV !== 'production') {
      // 检测这组节点的 key 是否重复
      checkDuplicateKeys(children)
    }
    // 遍历这组节点，依次创建这些节点然后插入父节点，形成一棵 DOM 树
    for (let i = 0; i < children.length; ++i) {
      createElm(children[i], insertedVnodeQueue, vnode.elm, null, true, children, i)
    }
  } else if (isPrimitive(vnode.text)) {
    // 说明是文本节点，创建文本节点，并插入父节点
    nodeOps.appendChild(vnode.elm, nodeOps.createTextNode(String(vnode.text)))
  }
}

createChildren 实际就是遍历子 VNode，递归调用 createElm，深度优先的遍历算法。这里要注意的一点是在遍历过程中会把 vnode.elm 作为父容器的 DOM 节点占位符传入。

然后调用 invokeCreateHooks :

invokeCreateHooks

// src/core/vdom/patch.js
/**
  * 执行所有的 create 的钩子并把 vnode push 到 insertedVnodeQueue 中
  * 调用各个模块的 create 方法，比如创建属性的、创建样式的、指令的等等
  */
function invokeCreateHooks (vnode, insertedVnodeQueue) {
  for (let i = 0; i < cbs.create.length; ++i) {
    cbs.create[i](emptyNode, vnode)
  }
  i = vnode.data.hook // Reuse variable
  if (isDef(i)) {
    if (isDef(i.create)) i.create(emptyNode, vnode)
    if (isDef(i.insert)) insertedVnodeQueue.push(vnode)
  }
}

最后调用 insert 把 DOM 插入父节点中。

insert

// src/core/vdom/patch.js
// 向父节点插入节点 
function insert (parent, elm, ref) {
  if (isDef(parent)) {
    if (isDef(ref)) {
      if (nodeOps.parentNode(ref) === parent) {
        nodeOps.insertBefore(parent, elm, ref)
      }
    } else {
      nodeOps.appendChild(parent, elm)
    }
  }
}

// src/platforms/web/runtime/node-ops.js
// 在指定节点前插入节点
export function insertBefore (parentNode: Node, newNode: Node, referenceNode: Node) {
  parentNode.insertBefore(newNode, referenceNode)
}
// 添加子节点
export function appendChild (node: Node, child: Node) {
  node.appendChild(child)
}

到这里 createElm 中判断 vnode.tag，如果存在的的逻辑走完了，如果不存在的话，它可能是注释或者纯文本节点。

// src/core/vdom/patch.js
if (isDef(tag)) {
  // ...
} 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)
}

// src/platforms/web/runtime/node-ops.js
// 创建注释节点
export function createComment (text: string): Comment {
  return document.createComment(text)
}
// 创建文本节点
export function createTextNode (text: string): Text {
  return document.createTextNode(text)
}

到这里返回的 patch 中的 createElm （createChildren 会递归创建子节点或组件）就执行完了。接下来就是移除旧节点了。

// 移除老节点
if (isDef(parentElm)) {
  removeVnodes([oldVnode], 0, 0)
} else if (isDef(oldVnode.tag)) {
  invokeDestroyHook(oldVnode)
}

在初始化 _update 执行完，调用 mounted 声明周期钩子，初始化执行完毕

// src/core/instance/lifecycle.js
export function mountComponent (
  vm: Component,
  el: ?Element,
  hydrating?: boolean
): Component {
  // ...
  updateComponent = () => {
    vm._update(vm._render(), hydrating)
  }
  // vm.$vnode 表示 Vue 实例的父虚拟 Node，所以它为 Null 则表示当前是根 Vue 的实例
  if (vm.$vnode == null) {
    vm._isMounted = true
    callHook(vm, 'mounted')
  }
  return vm
}

新增

当新节点存在，旧节点不存在的时候，表示新增。在上面初始化说到 createChildren 方法会对子节点循环调用 createElm。当 createElm 遇到组件时的处理方式：

createElm

// src/core/vdom/patch.js
function createElm (
  vnode,
  insertedVnodeQueue,
  parentElm,
  refElm,
  nested,
  ownerArray,
  index
) {
  // ...
  if (createComponent(vnode, insertedVnodeQueue, parentElm, refElm)) {
    return
  }
  // ...
}

createComponent 的作用就是创建组件，这里对它的返回值做了个判断，如果返回 true 的话就直接结束。但是这时返回的不是 true 。

createComponent

// src/ore/dom/atch.js
/**
 * 如果 vnode 是一个组件，则执行 init 钩子，创建组件实例，并挂载
 * 然后为组件执行各个模块的 create 方法
 * @param {*} vnode 组件新的 vnode
 * @param {*} insertedVnodeQueue 数组
 * @param {*} parentElm oldVnode 的父节点
 * @param {*} refElm oldVnode 的下一个兄弟节点
 * @returns 如果 vnode 是一个组件并且组件创建成功，则返回 true，否则返回 undefined
 */
function createComponent (vnode, insertedVnodeQueue, parentElm, refElm) {
  let i = vnode.data
  if (isDef(i)) {
    // 组件实例时候已存在且keep-alive包裹
    const isReactivated = isDef(vnode.componentInstance) && i.keepAlive
    if (isDef(i = i.hook) && isDef(i = i.init)) {
      // 如果 vnode 是一个组件，条件满足，i 就是 init钩子函数。
      // 如果是被 keep-alive 包裹的组件，先执行 init 后会在执行 prepatch 钩子。
      i(vnode, false /* hydrating */)
    }
    // after calling the init hook, if the vnode is a child component
    // it should've created a child instance and mounted it. the child
    // component also has set the placeholder vnode's elm.
    // in that case we can just return the element and be done.
    if (isDef(vnode.componentInstance)) {
      // 如果 vnode 的实例存在
      // 执行各个模块的的 create 钩子，创建属性的、创建样式的、指令等
      initComponent(vnode, insertedVnodeQueue)
      // 将组件的 DOM 节点插入到父节点内
      insert(parentElm, vnode.elm, refElm)
      if (isTrue(isReactivated)) {
        // 组件被 keep-alive 包裹的情况，激活组件
        reactivateComponent(vnode, insertedVnodeQueue, parentElm, refElm)
      }
      return true
    }
  }
}

当 vnode 是一个组件 VNode，i 就是 init 钩子函数。

init

// src/ore/dom/reate-component.js
// patch 期间在组件 VNode 上调用的内联钩子
// inline hooks to be invoked on component VNodes during patch
const componentVNodeHooks = {
  // 初始化
  init (vnode: VNodeWithData, hydrating: boolean): ?boolean {
    if (
      vnode.componentInstance &&
      !vnode.componentInstance._isDestroyed &&
      vnode.data.keepAlive
    ) {
      // 被 keep-alive 包裹的组件
      // kept-alive components, treat as a patch
      const mountedNode: any = vnode // work around flow
      // 更新 VNode
      componentVNodeHooks.prepatch(mountedNode, mountedNode)
    } else {
      // 创建组件实例，即 new vnode.componentOptions.Ctor(options) => 得到 Vue 组件实例
      const child = vnode.componentInstance = createComponentInstanceForVnode(
        vnode,
        activeInstance
      )
      // 调用 $mount 方法，进入挂载阶段。
      child.$mount(hydrating ? vnode.elm : undefined, hydrating)
    }
  },
  // 更新 VNode
  prepatch (oldVnode: MountedComponentVNode, vnode: MountedComponentVNode) {
    // 新的 VNode 配置项
    const options = vnode.componentOptions
    // 旧的 VNode 组件实例
    const child = vnode.componentInstance = oldVnode.componentInstance
    // 用新的更新旧的
    updateChildComponent(
      child,
      options.propsData, // updated props
      options.listeners, // updated listeners
      vnode, // new parent vnode
      options.children // new children
    )
  }
  // ...
}

在 init 中，如果是被 keep-alive 包裹，则会调用 componentVNodeHooks.prepatch 方法用新的 vnode 配置去更新旧的 vnode 配置。
如果没有被 keep-alive 包裹，则通过 createComponentInstanceForVnode 创建 Vue 组件的实例。然后调用 $mount 挂载组件.

createComponentInstanceForVnode

// src/core/vdom/create-component.js
// new vnode.componentOptions.Ctor(options) => 得到 Vue 组件实例 
export function createComponentInstanceForVnode (
  // we know it's MountedComponentVNode but flow doesn't
  vnode: any,
  // activeInstance in lifecycle state
  parent: any
): Component {
  const options: InternalComponentOptions = {
    // 表示它是一个组件
    _isComponent: true,
    _parentVnode: vnode,
    // 表示当前激活的组件实例
    parent
  }
  // 检查内联模版渲染函数
  const inlineTemplate = vnode.data.inlineTemplate
  if (isDef(inlineTemplate)) {
    options.render = inlineTemplate.render
    options.staticRenderFns = inlineTemplate.staticRenderFns
  }
  // new VueComponent(options) => Vue 实例
  return new vnode.componentOptions.Ctor(options)
}

这里的 vnode.componentOptions.Ctor 对应的就是组件的构造函数。它实际继承于 Vue 的一个构造器 Sub。

vnode.componentOptions.Ctor

// src/core/vdom/create-component.js
// context.$options._base = Vue
const baseCtor = context.$options._base
// 当 Ctor 为配置对象时，通过 Vue.extend 将其转为构造函数
// plain options object: turn it into a constructor
if (isObject(Ctor)) {
  Ctor = baseCtor.extend(Ctor)
}

//src/coreglobal-api/extend.js
Vue.extend = function (extendOptions: Object): Function {
    extendOptions = extendOptions || {}
    const Super = this
    const SuperId = Super.cid
    /**
     * 利用缓存，如果存在则直接返回缓存中的构造函数
     */
    const cachedCtors = extendOptions._Ctor || (extendOptions._Ctor = {})
    if (cachedCtors[SuperId]) {
      return cachedCtors[SuperId]
    }
    const name = extendOptions.name || Super.options.name
    if (process.env.NODE_ENV !== 'production' && name) {
      validateComponentName(name)
    }
    // 定义 Sub 构造函数，和 Vue 构造函数一样
    const Sub = function VueComponent (options) {
      // 初始化
      this._init(options)
    }
    // 通过原型继承的方式继承 Vue
    Sub.prototype = Object.create(Super.prototype)
    Sub.prototype.constructor = Sub
    Sub.cid = cid++
    // 选项合并，合并 Vue 的配置项到 自己的配置项上来
    Sub.options = mergeOptions(
      Super.options,
      extendOptions
    )
    // 记录自己的基类
    Sub['super'] = Super
    // 初始化 props，将 props 配置代理到 Sub.prototype._props 对象上
    // 在组件内通过 this._props 方式可以访问
    if (Sub.options.props) {
      initProps(Sub)
    }
    // 初始化 computed，将 computed 配置代理到 Sub.prototype 对象上
    // 在组件内可以通过 this.computedKey 的方式访问
    if (Sub.options.computed) {
      initComputed(Sub)
    }
    // 定义 extend/mixin/use 这三个静态方法，允许在 Sub 基础上再进一步构造子类
    Sub.extend = Super.extend
    Sub.mixin = Super.mixin
    Sub.use = Super.use
    // 定义 component、filter、directive 三个静态方法
    ASSET_TYPES.forEach(function (type) {
      Sub[type] = Super[type]
    })
    // 递归组件的原理，如果组件设置了 name 属性，则将自己注册到自己的 components 选项中
    if (name) {
      Sub.options.components[name] = Sub
    }
    // 在扩展时保留对基类选项的引用。
    // 稍后在实例化时，我们可以检查 Super 的选项是否具有更新
    Sub.superOptions = Super.options
    Sub.extendOptions = extendOptions
    Sub.sealedOptions = extend({}, Sub.options)
    // 缓存
    cachedCtors[SuperId] = Sub
    return Sub
  }
}

在 new vnode.componentOptions.Ctor(options) 实例化其实就相当于 new Sub(options)。在 new Sub(options) 的过程中，调用 _init:

_init

// src/core/instance/init.js
Vue.prototype._init = function (options?: Object) {
  const vm: Component = this
  // ...
  if (options && options._isComponent) {
    // optimize internal component instantiation
    // since dynamic options merging is pretty slow, and none of the
    // internal component options needs special treatment.
    initInternalComponent(vm, options)
  } else {
    vm.$options = mergeOptions(
      resolveConstructorOptions(vm.constructor),
      options || {},
      vm
    )
  }
  //...
  if (vm.$options.el) {
    vm.$mount(vm.$options.el)
  }
}

这里因为 options._isComponent 为 true，调用 initInternalComponent 合并了一些配置，最后由于组件的初始化没有 vm.$options.el ，所以这里的挂载会跳过。

回到 init 的过程中，在完成实例化的 _init 之后，接下来回执行 child.$mount(hydrating ? vnode.elm : undefined, hydrating) ，hydrating 表示服务端渲染，所以这里相当于执行 child.$mount(undefined, false) , $mount 中调用 mountComponent，然后 mountComponent 中又会调用 updateComponent :

updateComponent = () => {
  vm._update(vm._render(), hydrating)
}

接下来又会调用 vm._render() 生成组件的 VNode ，然后执行 vm._update 去渲染 VNode ，那么回到 _update，最后就是调用 __patch__，也就是 patch :

patch

// src/core/vdom/patch.js
return function patch (oldVnode, vnode, hydrating, removeOnly) {
  // ...
 // 新节点存在，旧节点不存在
  if (isUndef(oldVnode)) {
    isInitialPatch = true
    createElm(vnode, insertedVnodeQueue)
  }
  // ...
}

到这里又开始的 createElm 方法中：

createElm

// src/core/vdom/patch.js
function createElm (
  vnode,
  insertedVnodeQueue,
  parentElm,
  refElm,
  nested,
  ownerArray,
  index
) {
  // ...
  if (createComponent(vnode, insertedVnodeQueue, parentElm, refElm)) {
    return
  }
  // 获取 Data 对象
  const data = vnode.data
  // 获取子VNode
  const children = vnode.children
  // 判断 tag
  const tag = vnode.tag
  if (isDef(tag)) {
    //...
    // 创建元素节点
    vnode.elm = vnode.ns
      ? nodeOps.createElementNS(vnode.ns, tag)
      : nodeOps.createElement(tag, vnode)
    setScope(vnode)
    /* istanbul ignore if */
    if (__WEEX__) {
      // ...
    } else {
      // 递归创建所有子节点（普通元素、组件）
      createChildren(vnode, children, insertedVnodeQueue)
      if (isDef(data)) {
        invokeCreateHooks(vnode, insertedVnodeQueue)
      }
      // 将节点插入父节点
      insert(parentElm, vnode.elm, refElm)
    }
    // ...
  } 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)
  }
}

这时候传入的 vnode 是组件的渲染 vnode ,也就是 render 之后的 vnode ，如果组件的根节点是普通元素，就创建元素节点，然后遍历子节点递归调用 createElm，过程中如果遇到的 VNode 是一个组件，则重复这个过程。这样就通过递归创建了完整的组件树。

在完成组件的整个 patch 过程后，最后执行 insert(parentElm, vnode.elm, refElm) 完成组件的 DOM 插入。

更新

还记得在响应式原理吗？但数据发生变化时，会触发 watcher 的回调函数。使组件进行更新。

updateComponent = () => {
  vm._update(vm._render(), hydrating)
}

new Watcher(vm, updateComponent, noop, {
  before () {
    if (vm._isMounted) {
      callHook(vm, 'beforeUpdate')
    }
  }
}, true /* isRenderWatcher */)

实际上还是调用了_update , patch 函数。patch 中通过 sameVnode 方法判断新节点和旧节点是否是同一节点，而进入不同的处理方式。

新旧节点不同

// src/core/vdom/patch.js
return function patch (oldVnode, vnode, hydrating, removeOnly) {
  // ...
  if (isUndef(oldVnode)) {
    // ...
  } else {
    // ...
    if (!isRealElement && sameVnode(oldVnode, vnode)) {
      // ...
    } else {
      if (isRealElement) {
        // replacing existing element
        // 旧节点的真实DOM
        const oldElm = oldVnode.elm
        // 旧节点的父元素
        const parentElm = nodeOps.parentNode(oldElm)
        
        // create new node
        // 通过虚拟节点创建真实的 DOM 并插入到它的父节点中
        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)) {
          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) {
              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.
              // e.g. 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)) {
          removeVnodes([oldVnode], 0, 0)
        } else if (isDef(oldVnode.tag)) {
          invokeDestroyHook(oldVnode)
        }
      }
    }
  }
}

新节点和旧节点不相同的更新只需要，用新的把旧的替换掉，过程大致就是：

已旧节点为参考点，使用 createElm 创建新节点，并插入 DOM 中。
更新父的占位符节点。
移除旧节点，当组件没有被 keep-alive 包裹，移除过程中，就会执行 beforeDestroy 和 destroyed 钩子函数

新旧节点相同

重头戏来了，当新旧节点相同时，会调用 patchVnode 方法，我们常说的diff算法也就发生在这个过程中。

patchVnode

// src/core/vdom/patch.js
function patchVnode (
  oldVnode,
  vnode,
  insertedVnodeQueue,
  ownerArray,
  index,
  removeOnly
) {
  // 新旧节点相同，直接返回
  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 (isTrue(vnode.isStatic) &&
    isTrue(oldVnode.isStatic) &&
    vnode.key === oldVnode.key &&
    (isTrue(vnode.isCloned) || isTrue(vnode.isOnce))
  ) {
    // 新旧节点都是静态的而且两个节点的 key 一样，并且新节点被 clone 了 或者 新节点有 v-once指令，则复用这部分节点
    vnode.componentInstance = oldVnode.componentInstance
    return
  }
  // 执行组件的 prepatch 钩子
  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
  // 全量更新新节点的属性，Vue 3.0 在这里做了很多的优化。
  if (isDef(data) && isPatchable(vnode)) {
    // 执行组件的 update 钩子
    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)
  }
  // patch 过程。
  if (isUndef(vnode.text)) {
    // 新节点不是文本节点。
    if (isDef(oldCh) && isDef(ch)) {
      // 新旧节点都有子节点，递归执行 diff 操作。
      if (oldCh !== ch) updateChildren(elm, oldCh, ch, insertedVnodeQueue, removeOnly)
    } else if (isDef(ch)) {
      // 新节点有子节点，旧节点没有子节点，先清空旧节点的文本内容，然后新增子节点。
      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)) {
      // 新节点没有子节点，旧节点有子节点，移除所有子节点。
      removeVnodes(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)) {
    // 执行组件的 postpatch 钩子
    if (isDef(i = data.hook) && isDef(i = i.postpatch)) i(oldVnode, vnode)
  }
}

在对比新旧 VNode 的时候主要包括三种类型操作：属性更新、文本更新、子节点更新。在 patchVnode 的流程中主要把其分为四个步骤：

执行 prepatch 钩子函数。
执行 update 钩子函数。
完成 patch 过程。
执行 postpatch 钩子函数。

这里重点关注 patch 过程，先是对 vnode 判断，如果 vnode 是文本节点且文本相同，则更新文本。如果不是文本节点，则做了这么几种情况的处理：

新节点旧节点都有子节点且不相同，通过 updateChildren 来更新子节点。
新节点有子节点，旧节点没有子节点，如果有文本先清空文本，然后通过 addVnodes 新增子节点。
新节点没有子节点，旧节点有子节点，通过 removeVnodes 移除所有子节点。
新节点是文本节点，且新旧文本不同，则更新文本。

在这些更新情况中，updateChildren 最为复杂，我们常说的 diff 双端比较也就发生在这里，重点关注一下。

updateChildren

// src/core/vdom/patch.js
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是一个特殊的标志，仅由  使用，以确保被移除的元素在离开转换期间保持在正确的相对位置
  const canMove = !removeOnly
  if (process.env.NODE_ENV !== 'production') {
    // 检查新节点的 key 是否重复
    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)) {
      // 旧开始节点和新开始节点是同一个节点，执行 patch
      patchVnode(oldStartVnode, newStartVnode, insertedVnodeQueue, newCh, newStartIdx)
      // patch 结束后旧开始和新开始的索引分别加 1
      oldStartVnode = oldCh[++oldStartIdx]
      newStartVnode = newCh[++newStartIdx]
    } else if (sameVnode(oldEndVnode, newEndVnode)) {
      // 旧结束和新结束是同一个节点，执行 patch
      patchVnode(oldEndVnode, newEndVnode, insertedVnodeQueue, newCh, newEndIdx)
      // patch 结束后旧结束和新结束的索引分别减 1
      oldEndVnode = oldCh[--oldEndIdx]
      newEndVnode = newCh[--newEndIdx]
    } else if (sameVnode(oldStartVnode, newEndVnode)) { // Vnode moved right
      // 旧开始和新结束是同一个节点，执行 patch
      patchVnode(oldStartVnode, newEndVnode, insertedVnodeQueue, newCh, newEndIdx)
      // 处理被 transtion-group 包裹的组件时使用
      canMove && nodeOps.insertBefore(parentElm, oldStartVnode.elm, nodeOps.nextSibling(oldEndVnode.elm))
      // patch 结束后旧开始索引加 1，新结束索引减 1
      oldStartVnode = oldCh[++oldStartIdx]
      newEndVnode = newCh[--newEndIdx]
    } else if (sameVnode(oldEndVnode, newStartVnode)) { // Vnode moved left
      // 旧结束和新开始是同一个节点，执行 patch
      patchVnode(oldEndVnode, newStartVnode, insertedVnodeQueue, newCh, newStartIdx)
      canMove && nodeOps.insertBefore(parentElm, oldEndVnode.elm, oldStartVnode.elm)
      // patch 结束后，旧结束的索引减 1，新开始的索引加 1
      oldEndVnode = oldCh[--oldEndIdx]
      newStartVnode = newCh[++newStartIdx]
    } else {
      // 如果上面的四种假设都不成立，则通过遍历找到新开始节点在旧节点中的位置索引
      // 找到旧节点中每个节点 key 和 索引之间的关系映射 => oldKeyToIdx = { key1: idx1, ... }
      if (isUndef(oldKeyToIdx)) oldKeyToIdx = createKeyToOldIdx(oldCh, oldStartIdx, oldEndIdx)
      // 在映射中找到新开始节点在旧节点中的位置索引
      idxInOld = isDef(newStartVnode.key)
        ? oldKeyToIdx[newStartVnode.key]
        : findIdxInOld(newStartVnode, oldCh, oldStartIdx, oldEndIdx)
      if (isUndef(idxInOld)) { // New element
        // 在旧节点中没找到新开始节点，则说明是新创建的元素，执行创建
        createElm(newStartVnode, insertedVnodeQueue, parentElm, oldStartVnode.elm, false, newCh, newStartIdx)
      } else {
        // 在旧节点中找到新开始节点了
        vnodeToMove = oldCh[idxInOld]
        if (sameVnode(vnodeToMove, newStartVnode)) {
          // 如果这两个节点是同一个，则执行 patch
          patchVnode(vnodeToMove, newStartVnode, insertedVnodeQueue, newCh, newStartIdx)
          // patch 结束后将该旧节点置为 undefined
          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, false, newCh, newStartIdx)
        }
      }
      // 旧节点向后移动一个
      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(oldCh, oldStartIdx, oldEndIdx)
  }
}

updateChildren 主要作用是用一种高效的方式对比新旧 VNode 的 children 来获取差异，更新视图。 sameVnode 方法是对比两个节点是否相同。

diff_1.jpg

循环之前，在新旧两组子节点的开始和结束位置都会创建变量索引，在循环过程中，这几个变量索引都会向中间靠拢。当 oldStartIdx > oldEndIdx 或者 newStartIdx > newEndIdx 时结束循环。

首先进行 oldStartVnode、oldEndVnode 与 newStartVnode、newEndVnode 两两交叉比较，做了四种假设。

假设旧开始和新开始或者旧结束和新结束相同，直接将该 VNode 节点进行 patchVnode 即可，就避免了一次循环，以提高执行效率，如下图：

diff_2.jpg

如果旧开始和新结束相同，调用 patchVnode ，将真实DOM节点移动到 oldEndVnode 的后面。

diff_3.jpg

如果旧结束和新开始相同，调用 patchVnode ，将真实DOM节点移动到 oldStartVnode 的前面。

diff_4.jpg

如果上面四种假设均不成立，通过 key，在旧节点中找对应的新开始，若存在执行 patchVnode ，同时移动到 oldStartVnode 的前面。

diff_5.jpg

若是找不到一致的 key , 或者 key 相同但不是同一节点，这时候说明是新节点，调用 createElm 执行创建。

当循环结束时 oldStartIdx > oldEndIdx ，这时候旧节点已遍历完，新节点还没有，说明新节点比旧节点多，这时候需要将剩下的节点对应的 DOM 插入到真实的 DOM 中，调用 addVnodes 方法。

diff_6.jpg

当循环结束时 newStartIdx > newEndIdx ，这时候新节点已遍历完，旧节点还没有，说明旧节点比新节点多，这时候需要将多余的节点删除。

diff_7.jpg

Vue源码解读（六）：update和patch

_update

.patch

patch

createPatchFunction

移除节点

invokeDestroyHook

初始化

emptyNodeAt

createElm

createElementNS

createElement

createChildren

invokeCreateHooks

insert

新增

createElm

createComponent

init

createComponentInstanceForVnode

vnode.componentOptions.Ctor

_init

patch

createElm

更新

新旧节点不同

新旧节点相同

patchVnode

updateChildren

相关链接

你可能感兴趣的:(Vue源码解读（六）：update和patch)