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函数不熟悉的可以回顾一下之前的文章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的时候再详解吧。

Vue2.0源码学习