生命周期

生命周期

前言

之前说的数据和模板渲染，组件的创建，配置的合并，其实在平时业务上很少去关注，因为即使不了解也不影响使用。而生命周期则和我们的业务代码有着紧密的联系了，玩过Vue的基本都得了解它的流程，这章就打算来理一理老猿常谈的话题 - 生命周期。
不怎么了解生命周期可以先去官网看看生命周期流程图。
这里只是大概讲述源码中是如何执行生命周期的钩子函数，因为源码还没学透因此分析得不会很深，后续会考虑回来补充一些遗漏的点和逻辑。

正题

下面我们直接进入正题,直接看核心代码callhook:

// src\core\instance\lifecycle.js
export function callHook (vm: Component, hook: string) {
  // #7573 disable dep collection when invoking lifecycle hooks
  pushTarget()
  const handlers = vm.$options[hook]    //handlers是数组
  if (handlers) {
    // 遍历提取数组中的方法执行。
    for (let i = 0, j = handlers.length; i < j; i++) {
      try {
        handlers[i].call(vm)
      } catch (e) {
        handleError(e, vm, `${hook} hook`)
      }
    }
  }
  if (vm._hasHookEvent) {
    vm.$emit('hook:' + hook)
  }
  popTarget()
}

callHook接受两个入参，一个是当前vm，一个函数名称（如："mounted"）。往下看，vm.$options上个章节有说过，合并好的配置集合，从中拿出来的handlers则是个数组方法，上个章节也有详细说过了。所以我们需要对handlers进行遍历再调用handlers[i].call(vm)，this指向到vm，这也是我们在生命周期的钩子函数中使用this会指向到vm的原因。
接下来我们看各个生命周期是什么时候被调用的。

beforeCreate & created

// src\core\instance\init.js
Vue.prototype._init = function (options?: Object) {
    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')
    ...
    vm.$mount(vm.$options.el)
}

beforeCreate和created其实就是在_init的时候就运行了，了解过都知道两者的主要差异是beforeCreate无法操作到data和props的数据，从源码可以得到其答案，数据处理的函数initState是在callHook(vm, 'beforeCreate')之后才执行的。

beforeMount & mounted

在_init方法最后我们执行了vm.$mount，进入了挂载阶段。

export function mountComponent (vm: Component,el: ?Element,hydrating?: boolean): Component {
    ...
    callHook(vm, 'beforeMount')
    ...
    vm._update(vm._render(), hydrating) //实例挂载（生成真实dom）
    ...
    if (vm.$vnode == null) {  //$vnode是父vnode，这里判断是否为根vnode。
        vm._isMounted = true
        callHook(vm, 'mounted')
    }
}

对mountComponent函数不熟悉的可以回顾一下之前的文章《数据和模板的渲染》。
在mountComponent函数中可以看出，在进行vm._update渲染dom之前就调用了beforeMount，因此这个阶段是不能操作dom的。
而mounted是分了两种情况的，一种是为根Vue实例，一种是为子组件。上述的只是展示根Vue实例调用mounted。而子组件的mounted是从vm._update进入到patch方法，然后在patch方法结尾调用invokeInsertHook函数。

// src\core\vdom\patch.js
export function createPatchFunction (backend) {
    ...
    return function patch (oldVnode, vnode, hydrating, removeOnly) {
        ...
        const insertedVnodeQueue = [];
        ...
        invokeInsertHook(vnode, insertedVnodeQueue, isInitialPatch)
    }
}

这里我们得理清两个点，一个是insertedVnodeQueue入参是什么，一个是invokeInsertHook方法做了什么，在了解方法前我们先了解入参insertedVnodeQueue。
在patch方法中，它被定义了数组，在createElm函数中insertedVnodeQueue以入参的形式传入到：

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

在invokeCreateHooks方法中对insertedVnodeQueue做了处理：

// src\core\vdom\patch.js
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)
    }
  }

当前vnode有定义insert的时候，就会push到insertedVnodeQueue，至于为什么要insert后面会说到。
在createElm函数中还有调用到了createComponent函数传入了insertedVnodeQueue做处理：

// src\core\vdom\patch.js
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 */)
      }
      if (isDef(vnode.componentInstance)) {
        initComponent(vnode, insertedVnodeQueue)
        insert(parentElm, vnode.elm, refElm)
        if (isTrue(isReactivated)) {
          reactivateComponent(vnode, insertedVnodeQueue, parentElm, refElm)
        }
        return true
      }
    }
  }

在initComponent和reactivateComponent函数中，会进行insertedVnodeQueue.push(vnode)，所以insertedVnodeQueue其实就是一个带有insert方法的vnode数组集合。
这里还有一个需要注意的小细节

if (isDef(i = i.hook) && isDef(i = i.init)) {
    i(vnode, false /* hydrating */)
}

还记得之前分析过的这里吗？组件的递归，因此在递归的情况下后续的insertedVnodeQueue.push是先子后父的顺序插入的。

invokeInsertHook
接下来我们回到patch函数说一下invokeInsertHook方法。

// src\core\vdom\patch.js
function invokeInsertHook (vnode, queue, initial) {
    // delay insert hooks for component root nodes, invoke them after the
    // element is really inserted
    if (isTrue(initial) && isDef(vnode.parent)) {
        vnode.parent.data.pendingInsert = queue
    } else {
        for (let i = 0; i < queue.length; ++i) {
            queue[i].data.hook.insert(queue[i])
        }
    }
}

这里关键遍历queue(insertedVnodeQueue)然后运行了queue[i].data.hook.insert函数，所以之前才对insert函数做了判断才插入vnode到queue，而insert其实在createComponent函数的时候执行installComponentHooks方法，就把insert挂载到了vnode.data.hook上了，我们接下来看看insert做了什么？

// src\core\vdom\create-component.js
const componentVNodeHooks = {
    insert (vnode: MountedComponentVNode) {
        const { context, componentInstance } = vnode
        if (!componentInstance._isMounted) {
            componentInstance._isMounted = true
            callHook(componentInstance, 'mounted')
        }
        ...
    },
}

绕了一大个圈子其实就是为了在insert的时候执行mounted钩子，然后由于vnode在数组中的插入顺序是先子后父，因此也导致了mounted钩子函数执行的时候也是先子后父。

beforeUpdate & updated

beforeUpdate和updated执行时机在数据更新时，但是响应式还去分析过，下面就见到说一下什么时候调用这个两个函数，部分细节留待以后分析响应式的时候再看。
beforeUpdate

export function mountComponent ( vm: Component, el: ?Element, hydrating?: boolean): Component {
    ...
    new Watcher(vm, updateComponent, noop, {
        before () {
            if (vm._isMounted && !vm._isDestroyed) {
                callHook(vm, 'beforeUpdate')
            }
        }
    }, true /* isRenderWatcher */)
    ...
}

beforeUpdate是在mountComponent中的渲染watcher监听中执行的，下面我们看看监听中的before函数是在哪里调用的。

// src\core\observer\scheduler.js
function flushSchedulerQueue () {
    for (index = 0; index < queue.length; index++) {
        watcher = queue[index]
        if (watcher.before) {
            watcher.before()
        }
    }
}

这里的queue是所以watch的集合，在遍历的时候调用before执行beforeUpdate钩子。
updated
updated钩子其实也是在同个js中实现：

// src\core\observer\scheduler.js
function callUpdatedHooks (queue) {
  let i = queue.length
  while (i--) {
    const watcher = queue[i]
    const vm = watcher.vm
    if (vm._watcher === watcher && vm._isMounted && !vm._isDestroyed) {
      callHook(vm, 'updated')
    }
  }
}

这里也是对queue数组进行了一次遍历，然后判断做了三个判断：
①：是否为渲染watcher；
②：是否已经经历过mounted；(mounted钩子被调用前_isMounted会被设置为true)
③：是否被销毁；
成功后执行updated钩子函数。

beforeDestroy & destroyed

它们其实都是在Vue.prototype.$destroy销毁函数中被调用，函数具体销毁逻辑之后在分析，这里我们只简单看一下beforeDestroy和destroyed是如何被调用的。

// src\core\instance\lifecycle.js
Vue.prototype.$destroy = function () {
    ...
    callHook(vm, 'beforeDestroy')
    ...
    vm.__patch__(vm._vnode, null)
    callHook(vm, 'destroyed')
    ...
}

beforeDestroy钩子函数在销毁逻辑开始的时候就执行了，然后经过一系列销毁操作之后，然后去调用到了destroyed钩子函数。值得留意的一个地方是在callHook(vm, 'destroyed')之前，执行了vm.__patch__函数进行对子组件的销毁，该函数也提及了很多边，是递归函数，会造成先子后父的执行逻辑，因此destroyed和mounted一样，也是先子后父的顺序进行。

activated & deactivated

activated 和 deactivated 钩子函数是专门为 keep-alive 组件定制的钩子，之后再学习keep-alive的时候再详解吧。