Vue2.0源码学习(5) – 生命周期

生命周期

前言

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

正题

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

// srccoreinstancelifecycle.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

// srccoreinstanceinit.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函数。

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

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

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

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

// srccorevdompatch.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做处理：

// srccorevdompatch.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方法。

// srccorevdompatch.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做了什么？

// srccorevdomcreate-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函数是在哪里调用的。

// srccoreobserverscheduler.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中实现：

// srccoreobserverscheduler.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是如何被调用的。

// srccoreinstancelifecycle.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的时候再详解吧。