一文帶你理解 Vue 中的生命周期

前言:

每個 Vue 實例在被創建之前都要經過一系列的初始化過程。例如需要設置數據監聽、編譯模板、掛載實例到 DOM、在數據變化時更新 DOM 等。同時在這個過程中也會運行一些叫做生命周期鉤子的函數,給予用戶機會在一些特定的場景下添加他們自己的代碼。

源碼中最終執行生命周期的函數都是調用 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 函數的邏輯很簡單,根據傳入的字符串 hook,去拿到 vm.$options[hook] 對應的回調函數數組,然後遍歷執行,執行的時候把 vm 作為函數執行的上下文。

1、beforeCreate & created

beforeCreate created 函數都是在實例化 Vue 的階段,在 _init 方法中執行的,它的定義在 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 的鉤子調用是在 initState 的前後,initState 的作用是初始化 propsdatamethodswatchcomputed 等屬性,之後我們會詳細分析。那麼顯然 beforeCreate 的鉤子函數中就不能獲取到 propsdata 中定義的值,也不能調用 methods 中定義的函數。

在這倆個鉤子函數執行的時候,並沒有渲染 DOM,所以我們也不能夠訪問 DOM,一般來說,如果組件在加載的時候需要和後端有交互,放在這倆個鉤子函數執行都可以,如果是需要訪問 propsdata 等數據的話,就需要使用 created 鉤子函數。之後我們會介紹 vue-router 和 vuex 的時候會發現它們都混合瞭 beforeCreatd 鉤子函數。

2、beforeMount & mounted

顧名思義,beforeMount 鉤子函數發生在 mount,也就是 DOM 掛載之前,它的調用時機是在 mountComponent 函數中,定義在 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
}


在執行 vm. render() 函數渲染 VNode 之前,執行瞭 beforeMount 鉤子函數,在執行完 vm. update() VNode patch 到真實 DOM 後,執行 mouted 鉤子。註意,這裡對 mouted 鉤子函數執行有一個判斷邏輯,vm.$vnode 如果為 null,則表明這不是一次組件的初始化過程,而是我們通過外部 new Vue 初始化過程。那麼對於組件,它的 mounted 時機在哪兒呢?

組件的 VNode patch 到 DOM 後,會執行 invokeInsertHook 函數,把 insertedVnodeQueue 裡保存的鉤子函數依次執行一遍,它的定義在 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])
    }
  }
}


該函數會執行 insert 這個鉤子函數,對於組件而言,insert 鉤子函數的定義在 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')
    }
    // ...
  },
}


我們可以看到,每個子組件都是在這個鉤子函數中執行 mouted 鉤子函數,並且我們之前分析過,insertedVnodeQueue 的添加順序是先子後父,所以對於同步渲染的子組件而言,mounted 鉤子函數的執行順序也是先子後父。

3、beforeUpdate & updated

顧名思義,beforeUpdate updated 的鉤子函數執行時機都應該是在數據更新的時候,到目前為止,我們還沒有分析 Vue 的數據雙向綁定、更新相關,下一章我會詳細介紹這個過程。

beforeUpdate 的執行時機是在渲染 Watcher before 函數中

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 */)
  // ...
}


註意這裡有個判斷,也就是在組件已經 mounted 之後,才會去調用這個鉤子函數。

update 的執行時機是在flushSchedulerQueue 函數調用的時候, 它的定義在 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 函數我們之後會詳細介紹,可以先大概瞭解一下,updatedQueue 是 更新瞭的 wathcer 數組,那麼在 callUpdatedHooks 函數中,它對這些數組做遍歷,隻有滿足當前 watcher vm._watcher 以及組件已經 mounted 這兩個條件,才會執行 updated 鉤子函數。

我們之前提過,在組件 mount 的過程中,會實例化一個渲染的 Watcher 去監聽 vm 上的數據變化重新渲染,這斷邏輯發生在 mountComponent 函數執行的時候:

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


那麼在實例化 Watcher 的過程中,在它的構造函數裡會判斷 isRenderWatcher,接著把當前 watcher 的實例賦值給 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)
    // ...
  }
}


同時,還把當前 wathcer 實例 push 到 vm. watchers 中,vm. watcher 是專門用來監聽 vm 上數據變化然後重新渲染的,所以它是一個渲染相關的 watcher,因此在 callUpdatedHooks 函數中,隻有 vm._watcher 的回調執行完畢後,才會執行 updated 鉤子函數。

4、beforeDestroy & destroyed

顧名思義,beforeDestroy destroyed 鉤子函數的執行時機在組件銷毀的階段,組件的銷毀過程之後會詳細介紹,最終會調用 $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 鉤子函數的執行時機是在 destroy函數執行最開始的地方,接著執行瞭一系列的銷毀動作,包括從parentchildren 中刪掉自身,刪除 watcher,當前渲染的 VNode 執行銷毀鉤子函數等,執行完畢後再調用 destroy 鉤子函數。

在 $destroy 的執行過程中,它又會執行 vm. patch (vm._vnode, null) 觸發它子組件的銷毀鉤子函數,這樣一層層的遞歸調用,所以 destroy 鉤子函數執行順序是先子後父,和 mounted 過程一樣。

5、activated & deactivated

activated 和 deactivated 鉤子函數是專門為 keep-alive 組件定制的鉤子,我們會在介紹 keep-alive 組件的時候詳細介紹,這裡先留個懸念。

總結:

這一節主要介紹瞭 Vue 生命周期中各個鉤子函數的執行時機以及順序,通過分析,我們知道瞭如在 created 鉤子函數中可以訪問到數據,在 mounted 鉤子函數中可以訪問到 DOM,在 destroy 鉤子函數中可以做一些定時器銷毀工作,瞭解它們有利於我們在合適的生命周期去做不同的事情。

到此這篇關於一文帶你理解 Vue 中的生命周期的文章就介紹到這瞭,更多相關 Vue 中的生命周期內容請搜索WalkonNet以前的文章或繼續瀏覽下面的相關文章希望大傢以後多多支持WalkonNet!

推薦閱讀: