Vue的patch过程解析

Posted 2021-03-29 道道里的前端栈

前面提到 createElement 创建了组件VNode，接着调用 vm._update ，执行 vm._patch 方法把VNode转换为真实节点，这是针对于一个普通的 VNode节点，下面看下在组件中的VNode的区别。

patch 会调用 createEml 创建元素节点，它在 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
  if (createComponent(vnode, insertedVnodeQueue, parentElm, refElm)) {
    return
  }
  // ...
}

和普通VNode最不一样的地方就是：createComponent，因为这里的vnode是一个组件vnode，所以它在创建的时候有些不太一样：

function createComponent (vnode, insertedVnodeQueue, parentElm, refElm) {
  let i = vnode.data
  if (isDef(i)) {
    const isReactivated = isDef(vnode.componentInstance) && i.keepAlive
    if (isDef(i = i.hook) && isDef(i = i.init)) {
      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)) {
      initComponent(vnode, insertedVnodeQueue)
      insert(parentElm, vnode.elm, refElm)
      if (isTrue(isReactivated)) {
        reactivateComponent(vnode, insertedVnodeQueue, parentElm, refElm)
      }
      return true
    }
  }
}

首先判断 vnode.data 有没有，keepAlive先忽略，接着判断有没有 data.hook 以及这个 hook 中有没有 init 方法，如果有就调用这个方法。

回忆一下，在创建组件 createComponent 方法里面，有一个 installComponentHooks 方法，这个方法会把上面定义的4个hook都初始化一遍(init，prepatch，insert，destroy)，然后挂载到 data.hook 上，所以在上面的判断中，init 是有的，然后就执行到了 hook 上的 init 方法中：

init (vnode: VNodeWithData, hydrating: boolean): ?boolean {
  if (
    vnode.componentInstance &&
    !vnode.componentInstance._isDestroyed &&
    vnode.data.keepAlive
  ) {
    // kept-alive components, treat as a patch
    const mountedNode: any = vnode // work around flow
    componentVNodeHooks.prepatch(mountedNode, mountedNode)
  } else {
    const child = vnode.componentInstance = createComponentInstanceForVnode(
      vnode,
      activeInstance
    )
    child.$mount(hydrating ? vnode.elm : undefined, hydrating)
  }
}

keepAlive跳过，后面有个 createComponentInstanceForVnode，这个方法返回了 vnode.componentInstance，也就是返回了vm的实例，然后调用了 $mount 方法挂载子组件。看下 createComponentInstanceForVnode， 它传入了两个参数，第一个是组件vnode，第二个是 activeInstance，后面会提到。来看下 createComponentInstanceForVnode 的定义：

export function createComponentInstanceForVnode (
  vnode: any, // we know it's MountedComponentVNode but flow doesn't
  parent: any, // activeInstance in lifecycle state
): Component {
  const options: InternalComponentOptions = {
    _isComponent: true,
    _parentVnode: vnode,
    parent
  }
  // check inline-template render functions
  const inlineTemplate = vnode.data.inlineTemplate
  if (isDef(inlineTemplate)) {
    options.render = inlineTemplate.render
    options.staticRenderFns = inlineTemplate.staticRenderFns
  }
  return new vnode.componentOptions.Ctor(options)
}

可以看到传入了两个参数，第一个是组件vnode，第二个参数其实是当前vm的一个实例，定义了一个 options，有三个键， 中间的 _parentVnode 就是父vnode，它其实是一个占位vnode，一个占位节点。最后返回了一个 new vnode.componentOptions.Ctor(options)，回忆一下，在创建子组件vnode的时候，用了一个 context.$options.__base，也就是 Vue.extend，扩展了一个子组件构造器 Ctor，接着在创建vnode的时候，有个参数是 { Ctor, propsData, listeners, tag, children }，这里的 Ctor 就是组件构造器，那么再执行 vnode.componentOptions.Ctor 的时候其实就是执行了 Sub 的构造函数，Sub 在 src/core/global-api/extend.js 中，然后它执行 了 _init，这个 _init 又回到了 Vue 的初始化，因为子组件的构造器其实是继承了 Vue 的构造器，来再次看下 _init 的细节，和之前不一样的地方，在 src/core/instance/init.js：

Vue.prototype._init = function (options?: Object) {
  const vm: Component = this
  // merge options
  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
    )
  }
  // ...
  // expose real self
  vm._self = vm
  initLifecycle(vm)
  initEvents(vm)
  initRender(vm)
  callHook(vm, 'beforeCreate')
  initInjections(vm) // resolve injections before data/props
  initState(vm)
  initProvide(vm) // resolve provide after data/props
  callHook(vm, 'created')
  
  // ...
  if (vm.$options.el) {
    vm.$mount(vm.$options.el)
  } 
}

首先合并了 options，参数 options._isComponent 现在是true，所以执行 initInternalComponent，进行合并，看下这个方法：

export function initInternalComponent (vm: Component, options: InternalComponentOptions) {
  const opts = vm.$options = Object.create(vm.constructor.options)
  // doing this because it's faster than dynamic enumeration.
  const parentVnode = options._parentVnode
  opts.parent = options.parent
  opts._parentVnode = parentVnode

  const vnodeComponentOptions = parentVnode.componentOptions
  opts.propsData = vnodeComponentOptions.propsData
  opts._parentListeners = vnodeComponentOptions.listeners
  opts._renderChildren = vnodeComponentOptions.children
  opts._componentTag = vnodeComponentOptions.tag

  if (options.render) {
    opts.render = options.render
    opts.staticRenderFns = options.staticRenderFns
  }
}

创建了一个 vm.constructor.options 对象，然后赋值给 vm.$options，接下来是重点，它把 _parentVnode 和 parent 传了进来，_parentVnode 就是上面的 createComponentInstanceForVnode 的参数 _parentVnode，就是占位符的vnode，parent 是当前vm的实例，也就是当前子组件的父vm实例，继续看 initInternalComponent，把 vnodeComponentOptions 里的一些参数拿出来赋值给 opts，到此 initInternalComponent 结束。所以这里做的操作就是把通过 createComponentInstanceForVnode 函数传入的参数合并到内部的 $options 里了。

接着看 _init， initLifecycle 定义在 src/core/instance/lifecycle.js，看下这个方法：

export let activeInstance: any = null
export let isUpdatingChildComponent: boolean = false

export function initLifecycle (vm: Component) {
  const options = vm.$options

  // locate first non-abstract parent
  let parent = options.parent
  if (parent && !options.abstract) {
    while (parent.$options.abstract && parent.$parent) {
      parent = parent.$parent
    }
    parent.$children.push(vm)
  }

  vm.$parent = parent
  vm.$root = parent ? parent.$root : vm

  vm.$children = []
  vm.$refs = {}

  vm._watcher = null
  vm._inactive = null
  vm._directInactive = false
  vm._isMounted = false
  vm._isDestroyed = false
  vm._isBeingDestroyed = false
}

拿到了一个 options.parent，这个 parent 实际上就是 activeInstance，注意 activeInstance 在这个文件中是一个全局变量，它的赋值在 lifecycleMixin 方法中：

export function lifecycleMixin (Vue: Class<Component>) {
  Vue.prototype._update = function (vnode: VNode, hydrating?: boolean) {
    const vm: Component = this
    const prevEl = vm.$el
    const prevVnode = vm._vnode
    const prevActiveInstance = activeInstance
    activeInstance = vm
    vm._vnode = vnode
    // Vue.prototype.__patch__ is injected in entry points
    // based on the rendering backend used.
    if (!prevVnode) {
      // initial render
      vm.$el = vm.__patch__(vm.$el, vnode, hydrating, false /* removeOnly */)
    } else {
      // updates
      vm.$el = vm.__patch__(prevVnode, vnode)
    }
    activeInstance = prevActiveInstance
    // 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.
  }

在调用 _update 的时候，赋值了 activeInstance，也就是说每次调用 _update ，就会把当前的vm实例赋值给 activeInstance：

 activeInstance = vm

同时用 prevActiveInstance 来保留上一次的 activeInstance，这么做是什么意思？

这里把当前的vm给了 activeInstance，然后在当前vm实例的vnode在 patch 的过程中，把当前实例作为父vm实例，传给子组件，这样 patch 其实就是一个深度遍历，将当前激活的vm实例给 activeInstance，然后在初始化子组件的时候，将这个 activeInstance 作为parent参数传入，然后在 initLifecycle 里，就可以拿到当前激活的vm实例，然后把实例作为parent：

const options = vm.$options

// locate first non-abstract parent
let parent = options.parent
if (parent && !options.abstract) {
  while (parent.$options.abstract && parent.$parent) {
    parent = parent.$parent
  }
  parent.$children.push(vm)
}

vm.$parent = parent
vm.$root = parent ? parent.$root : vm

vm.$children = []
vm.$refs = {}

vm._watcher = null
vm._inactive = null
vm._directInactive = false
vm._isMounted = false
vm._isDestroyed = false
vm._isBeingDestroyed = false

此时 parent 是vm实例，parent.$children 塞一个子组件的vm。上面代码中的 vm 是子组件，parent 是它的父组件，然后他们有一层 push 的关系，接着把 vm.$parent 赋值为父组件实例 parent，至此 initLifecycle 就把这一层父子关系给建立起来了。

继续看 _init，最后的 vm.$mount是走不到的，因为现在的 $options 没有 el：

if (vm.$options.el) {
  vm.$mount(vm.$options.el)
}

所以此时 _init 返回的是一个子组件的实例，然后回到 createComponent 里面的 init 钩子，createComponentInstanceForVnode 其实就是返回了一个子组件的实例，接着：

 child.$mount(hydrating ? vnode.elm : undefined, hydrating)

手动调用了 $mount 来挂载，也就是执行之前的 Vue.prototype.$mount 和 mountComponent 方法，接着执行 _update 的 updateComponent 方法，最后调用 __patch__ 渲染VNode：

vm.$el = vm.__patch__(vm.$el, vnode, hydrating, false /* removeOnly */)
 
function patch (oldVnode, vnode, hydrating, removeOnly) {
  // ...
  let isInitialPatch = false
  const insertedVnodeQueue = []

  if (isUndef(oldVnode)) {
    // empty mount (likely as component), create new root element
    isInitialPatch = true
    createElm(vnode, insertedVnodeQueue)
  } else {
    // ...
  }
  // ...
}

然后调用 createElm，再来看下它的定义：

function createElm (
  vnode,
  insertedVnodeQueue,
  parentElm,
  refElm,
  nested,
  ownerArray,
  index
) {
  // ...
  if (createComponent(vnode, insertedVnodeQueue, parentElm, refElm)) {
    return
  }

  const data = vnode.data
  const children = vnode.children
  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)
  }
}

这里只传了2个参数，所以 parentElm 是 undefined。注意，这里传入的 vnode 是组件渲染的 vnode，也就是之前说的 vm._vnode，如果组件的根节点是个普通元素，那么 vm._vnode 也是普通的 vnode，这里 createComponent(vnode, insertedVnodeQueue, parentElm, refElm) 的返回值是 false。接下来的过程就和 createComponent 一样了，先创建一个父节点占位符，然后再遍历所有子 VNode 递归调用 createElm，在遍历的过程中，如果遇到子 VNode 是一个组件的 VNode，则重复patch，这样通过一个递归的方式就可以完整地构建了整个组件树。

此时传入的 parentElm 是空，所以对组件的插入，在 createComponent 有这么一段逻辑：

function createComponent (vnode, insertedVnodeQueue, parentElm, refElm) {
  let i = vnode.data
  if (isDef(i)) {
    // ....
    if (isDef(i = i.hook) && isDef(i = i.init)) {
      i(vnode, false /* hydrating */)
    }
    // ...
    if (isDef(vnode.componentInstance)) {
      initComponent(vnode, insertedVnodeQueue)
      insert(parentElm, vnode.elm, refElm)
      if (isTrue(isReactivated)) {
        reactivateComponent(vnode, insertedVnodeQueue, parentElm, refElm)
      }
      return true
    }
  }
}

在完成组件的整个 patch 过程后，最后执行 insert(parentElm, vnode.elm, refElm) 完成组件的 DOM 插入，如果组件 patch 过程中又创建了子组件，那么DOM 的插入顺序是先子后父。

最后放一张整理的图：

进阶版流程图放在我的github仓库：https://github.com/daodaolee/review-article，可自取，图片有点大哦。