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

x33g5p2x  于2022-02-21 转载在 Vue.js  
字(6.2k)|赞(0)|评价(0)|浏览(236)

生命周期

生命周期

前言

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

相关文章