來看一下Vue中實現鉤子函式部分的原始碼

// ...
export function lifecycleMixin (Vue: Class<Component>) {
  Vue.prototype._update = function (vnode: VNode, hydrating?: boolean) {
    const vm: Component = this
    if (vm._isMounted) {
      callHook(vm, 'beforeUpdate') // callHook來呼叫鉤子函式
    }
// ...

export function callHook
 
 (vm: Component, hook: string) {
  const handlers = vm.$options[hook]
  if (handlers) {
    for (let i = 0, j = handlers.length; i < j; i++) {
      try {
        handlers[i].call(vm) // 以元件例項來作為鉤子函式中this的指向
      } catch (e) {
        handleError(e, vm, `${hook} hook`)
      }
    }
  }
  if (vm._hasHookEvent
 
) {
    vm.$emit('hook:' + hook)
  }
}

我們可以看到處理流程就是在生命週期流程中相應流程執行後，執行callHook()。而callHook的作用便是執行我們自定義的鉤子函式，並將鉤子中this的指向指為當前元件例項（通過Function.prototype.call）