如何理解Vue中的生命周期

這期內(nèi)容當(dāng)中小編將會(huì)給大家?guī)?lái)有關(guān)如何理解Vue中的生命周期，文章內(nèi)容豐富且以專業(yè)的角度為大家分析和敘述，閱讀完這篇文章希望大家可以有所收獲。

前言：

每個(gè) Vue 實(shí)例在被創(chuàng)建之前都要經(jīng)過(guò)一系列的初始化過(guò)程。例如需要設(shè)置數(shù)據(jù)監(jiān)聽(tīng)、編譯模板、掛載實(shí)例到 DOM、在數(shù)據(jù)變化時(shí)更新 DOM 等。同時(shí)在這個(gè)過(guò)程中也會(huì)運(yùn)行一些叫做生命周期鉤子的函數(shù)，給予用戶機(jī)會(huì)在一些特定的場(chǎng)景下添加他們自己的代碼。

源碼中最終執(zhí)行生命周期的函數(shù)都是調(diào)用 callHook 方法，它的定義在 src/core/instance/lifecycle 中：

export function callHook (vm: Component, hook: string) {
 // #7573 disable dep collection when invoking lifecycle hooks
  pushTarget()
  const handlers = vm.$options[hook]
  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 函數(shù)的邏輯很簡(jiǎn)單，根據(jù)傳入的字符串 hook，去拿到 vm.$options[hook] 對(duì)應(yīng)的回調(diào)函數(shù)數(shù)組，然后遍歷執(zhí)行，執(zhí)行的時(shí)候把 vm 作為函數(shù)執(zhí)行的上下文。

1、beforeCreate & created

beforeCreate 和 created 函數(shù)都是在實(shí)例化 Vue 的階段，在 _init 方法中執(zhí)行的，它的定義在 src/core/instance/init.js 中：

Vue.prototype._init = function (options?: Object) {
  // ...
  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')
  // ...
}

可以看到 beforeCreate 和 created 的鉤子調(diào)用是在 initState 的前后，initState 的作用是初始化 props、data、methods、watch、computed 等屬性，之后我們會(huì)詳細(xì)分析。那么顯然 beforeCreate 的鉤子函數(shù)中就不能獲取到 props、data 中定義的值，也不能調(diào)用 methods 中定義的函數(shù)。

在這倆個(gè)鉤子函數(shù)執(zhí)行的時(shí)候，并沒(méi)有渲染 DOM，所以我們也不能夠訪問(wèn) DOM，一般來(lái)說(shuō)，如果組件在加載的時(shí)候需要和后端有交互，放在這倆個(gè)鉤子函數(shù)執(zhí)行都可以，如果是需要訪問(wèn) props、data 等數(shù)據(jù)的話，就需要使用 created 鉤子函數(shù)。之后我們會(huì)介紹 vue-router 和 vuex 的時(shí)候會(huì)發(fā)現(xiàn)它們都混合了 beforeCreatd 鉤子函數(shù)。

2、beforeMount & mounted

顧名思義，beforeMount 鉤子函數(shù)發(fā)生在 mount，也就是 DOM 掛載之前，它的調(diào)用時(shí)機(jī)是在 mountComponent 函數(shù)中，定義在 src/core/instance/lifecycle.js 中：

export function mountComponent (
  vm: Component,
  el: ?Element,
  hydrating?: boolean
): Component {
  vm.$el = el
  // ...
  callHook(vm, 'beforeMount')
 
  let updateComponent
  /* istanbul ignore if */
  if (process.env.NODE_ENV !== 'production' && config.performance && mark) {
    updateComponent = () => {
      const name = vm._name
      const id = vm._uid
      const startTag = `vue-perf-start:${id}`
      const endTag = `vue-perf-end:${id}`
 
      mark(startTag)
      const vnode = vm._render()
      mark(endTag)
      measure(`vue ${name} render`, startTag, endTag)
 
      mark(startTag)
      vm._update(vnode, hydrating)
      mark(endTag)
      measure(`vue ${name} patch`, startTag, endTag)
    }
  } else {
    updateComponent = () => {
      vm._update(vm._render(), hydrating)
    }
  }
 
  // we set this to vm._watcher inside the watcher's constructor
  // since the watcher's initial patch may call $forceUpdate (e.g. inside child
  // component's mounted hook), which relies on vm._watcher being already defined
  new Watcher(vm, updateComponent, noop, {
    before () {
      if (vm._isMounted) {
        callHook(vm, 'beforeUpdate')
      }
    }
  }, true /* isRenderWatcher */)
  hydrating = false
 
  // manually mounted instance, call mounted on self
  // mounted is called for render-created child components in its inserted hook
  if (vm.$vnode == null) {
    vm._isMounted = true
    callHook(vm, 'mounted')
  }
  return vm
}

在執(zhí)行 vm. render() 函數(shù)渲染 VNode 之前，執(zhí)行了 beforeMount 鉤子函數(shù)，在執(zhí)行完 vm. update() 把 VNode patch 到真實(shí) DOM 后，執(zhí)行 mouted 鉤子。注意，這里對(duì) mouted 鉤子函數(shù)執(zhí)行有一個(gè)判斷邏輯，vm.$vnode 如果為 null，則表明這不是一次組件的初始化過(guò)程，而是我們通過(guò)外部 new Vue 初始化過(guò)程。那么對(duì)于組件，它的 mounted 時(shí)機(jī)在哪兒呢？

組件的 VNode patch 到 DOM 后，會(huì)執(zhí)行 invokeInsertHook 函數(shù)，把 insertedVnodeQueue 里保存的鉤子函數(shù)依次執(zhí)行一遍，它的定義在 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])
    }
  }
}

該函數(shù)會(huì)執(zhí)行 insert 這個(gè)鉤子函數(shù)，對(duì)于組件而言，insert 鉤子函數(shù)的定義在 src/core/vdom/create-component.js 中的 componentVNodeHooks 中：

const componentVNodeHooks = {
  // ...
  insert (vnode: MountedComponentVNode) {
    const { context, componentInstance } = vnode
    if (!componentInstance._isMounted) {
      componentInstance._isMounted = true
      callHook(componentInstance, 'mounted')
    }
    // ...
  },
}

我們可以看到，每個(gè)子組件都是在這個(gè)鉤子函數(shù)中執(zhí)行 mouted 鉤子函數(shù)，并且我們之前分析過(guò)，insertedVnodeQueue 的添加順序是先子后父，所以對(duì)于同步渲染的子組件而言，mounted 鉤子函數(shù)的執(zhí)行順序也是先子后父。

3、beforeUpdate & updated

顧名思義，beforeUpdate 和 updated 的鉤子函數(shù)執(zhí)行時(shí)機(jī)都應(yīng)該是在數(shù)據(jù)更新的時(shí)候，到目前為止，我們還沒(méi)有分析 Vue 的數(shù)據(jù)雙向綁定、更新相關(guān)，下一章我會(huì)詳細(xì)介紹這個(gè)過(guò)程。

beforeUpdate 的執(zhí)行時(shí)機(jī)是在渲染 Watcher 的 before 函數(shù)中

export function mountComponent (
  vm: Component,
  el: ?Element,
  hydrating?: boolean
): Component {
  // ...
 
  // we set this to vm._watcher inside the watcher's constructor
  // since the watcher's initial patch may call $forceUpdate (e.g. inside child
  // component's mounted hook), which relies on vm._watcher being already defined
  new Watcher(vm, updateComponent, noop, {
    before () {
      if (vm._isMounted) {
        callHook(vm, 'beforeUpdate')
      }
    }
  }, true /* isRenderWatcher */)
  // ...
}

注意這里有個(gè)判斷，也就是在組件已經(jīng) mounted 之后，才會(huì)去調(diào)用這個(gè)鉤子函數(shù)。

update 的執(zhí)行時(shí)機(jī)是在flushSchedulerQueue 函數(shù)調(diào)用的時(shí)候, 它的定義在 src/core/observer/scheduler.js 中：

function flushSchedulerQueue () {
  // ...
  // 獲取到 updatedQueue
  callUpdatedHooks(updatedQueue)
}
 
function callUpdatedHooks (queue) {
  let i = queue.length
  while (i--) {
    const watcher = queue[i]
    const vm = watcher.vm
    if (vm._watcher === watcher && vm._isMounted) {
      callHook(vm, 'updated')
    }
  }
}

flushSchedulerQueue 函數(shù)我們之后會(huì)詳細(xì)介紹，可以先大概了解一下，updatedQueue 是 更新了的 wathcer 數(shù)組，那么在 callUpdatedHooks 函數(shù)中，它對(duì)這些數(shù)組做遍歷，只有滿足當(dāng)前 watcher 為 vm._watcher 以及組件已經(jīng) mounted 這兩個(gè)條件，才會(huì)執(zhí)行 updated 鉤子函數(shù)。

我們之前提過(guò)，在組件 mount 的過(guò)程中，會(huì)實(shí)例化一個(gè)渲染的 Watcher 去監(jiān)聽(tīng) vm 上的數(shù)據(jù)變化重新渲染，這斷邏輯發(fā)生在 mountComponent 函數(shù)執(zhí)行的時(shí)候：

export function mountComponent (
  vm: Component,
  el: ?Element,
  hydrating?: boolean
): Component {
  // ...
  // 這里是簡(jiǎn)寫(xiě)
  let updateComponent = () => {
      vm._update(vm._render(), hydrating)
  }
  new Watcher(vm, updateComponent, noop, {
    before () {
      if (vm._isMounted) {
        callHook(vm, 'beforeUpdate')
      }
    }
  }, true /* isRenderWatcher */)
  // ...
}

那么在實(shí)例化 Watcher 的過(guò)程中，在它的構(gòu)造函數(shù)里會(huì)判斷 isRenderWatcher，接著把當(dāng)前 watcher 的實(shí)例賦值給 vm._watcher，定義在 src/core/observer/watcher.js 中：

export default class Watcher {
  // ...
  constructor (
    vm: Component,
    expOrFn: string | Function,
    cb: Function,
    options?: ?Object,
    isRenderWatcher?: boolean
  ) {
    this.vm = vm
    if (isRenderWatcher) {
      vm._watcher = this
    }
    vm._watchers.push(this)
    // ...
  }
}

同時(shí)，還把當(dāng)前 wathcer 實(shí)例 push 到 vm. watchers 中，vm. watcher 是專門(mén)用來(lái)監(jiān)聽(tīng) vm 上數(shù)據(jù)變化然后重新渲染的，所以它是一個(gè)渲染相關(guān)的 watcher，因此在 callUpdatedHooks 函數(shù)中，只有 vm._watcher 的回調(diào)執(zhí)行完畢后，才會(huì)執(zhí)行 updated 鉤子函數(shù)。

4、beforeDestroy & destroyed

顧名思義，beforeDestroy 和 destroyed 鉤子函數(shù)的執(zhí)行時(shí)機(jī)在組件銷毀的階段，組件的銷毀過(guò)程之后會(huì)詳細(xì)介紹，最終會(huì)調(diào)用 $destroy 方法，它的定義在 src/core/instance/lifecycle.js 中：

Vue.prototype.$destroy = function () {
    const vm: Component = this
    if (vm._isBeingDestroyed) {
      return
    }
    callHook(vm, 'beforeDestroy')
    vm._isBeingDestroyed = true
    // remove self from parent
    const parent = vm.$parent
    if (parent && !parent._isBeingDestroyed && !vm.$options.abstract) {
      remove(parent.$children, vm)
    }
    // teardown watchers
    if (vm._watcher) {
      vm._watcher.teardown()
    }
    let i = vm._watchers.length
    while (i--) {
      vm._watchers[i].teardown()
    }
    // remove reference from data ob
    // frozen object may not have observer.
    if (vm._data.__ob__) {
      vm._data.__ob__.vmCount--
    }
    // call the last hook...
    vm._isDestroyed = true
    // invoke destroy hooks on current rendered tree
    vm.__patch__(vm._vnode, null)
    // fire destroyed hook
    callHook(vm, 'destroyed')
    // turn off all instance listeners.
    vm.$off()
    // remove __vue__ reference
    if (vm.$el) {
      vm.$el.__vue__ = null
    }
    // release circular reference (#6759)
    if (vm.$vnode) {
      vm.$vnode.parent = null
    }
  }

beforeDestroy 鉤子函數(shù)的執(zhí)行時(shí)機(jī)是在 destroy函數(shù)執(zhí)行最開(kāi)始的地方，接著執(zhí)行了一系列的銷毀動(dòng)作，包括從parent的children 中刪掉自身，刪除 watcher，當(dāng)前渲染的 VNode 執(zhí)行銷毀鉤子函數(shù)等，執(zhí)行完畢后再調(diào)用 destroy 鉤子函數(shù)。

在 $destroy 的執(zhí)行過(guò)程中，它又會(huì)執(zhí)行 vm. patch (vm._vnode, null) 觸發(fā)它子組件的銷毀鉤子函數(shù)，這樣一層層的遞歸調(diào)用，所以 destroy 鉤子函數(shù)執(zhí)行順序是先子后父，和 mounted 過(guò)程一樣。

5、activated & deactivated

activated 和 deactivated 鉤子函數(shù)是專門(mén)為 keep-alive 組件定制的鉤子，我們會(huì)在介紹 keep-alive 組件的時(shí)候詳細(xì)介紹，這里先留個(gè)懸念。

如在 created 鉤子函數(shù)中可以訪問(wèn)到數(shù)據(jù)，在 mounted 鉤子函數(shù)中可以訪問(wèn)到 DOM，在 destroy 鉤子函數(shù)中可以做一些定時(shí)器銷毀工作，了解它們有利于我們?cè)诤线m的生命周期去做不同的事情。

上述就是小編為大家分享的如何理解Vue中的生命周期了，如果剛好有類似的疑惑，不妨參照上述分析進(jìn)行理解。如果想知道更多相關(guān)知識(shí)，歡迎關(guān)注億速云行業(yè)資訊頻道。