Vue2.0源码理解(5) - 生命周期
生命周期
前言
之前说的数据和模板渲染，组件的创建，配置的合并，其实在平时业务上很少去关注，因为即使不了解也不影响使用。而生命周期则和我们的业务代码有着紧密的联系了，玩过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的时候再详解吧。