Vue 源碼解讀（7）—— Hook Event

前言

Hook Event（鉤子事件）相信很多 Vue 開發者都沒有使用過，甚至沒聽過，畢竟 Vue 官方文檔中也沒有提及。

Vue 提供了一些生命周期鉤子函數，供開發者在特定的邏輯點添加額外的處理邏輯，比如：在組件掛載階段提供了 beforeMount 和 mounted 兩個生命周期鉤子，供開發者在組件掛載階段執行額外的邏輯處理，比如為組件準備渲染所需的數據。

那這個 Hook Event —— 鉤子事件，其中也有鉤子的意思，和 Vue 的生命周期鉤子函數有什麼關係呢？它又有什麼用呢？這就是這邊文章要解答的問題。

目標

理解什麼是 Hook Event ？明白其使用場景
深入理解 Hook Event 的實現原理

什麼是 Hook Event ？

Hook Event 是 Vue 的自定義事件結合生命周期鉤子實現的一種從組件外部為組件注入額外生命周期方法的功能。

使用場景

假設現在有這麼一個第三方的業務組件，邏輯很簡單，就在 mounted 生命周期中調用介面獲取數據，然後將數據渲染到頁面上。

<template>
  <div class="wrapper">
    <ul>
      <li v-for="item in arr" :key="JSON.stringify(item)">
        {{ item }}
      </li>
    </ul>
  </div>
</template>

<script>
export default {
  data() {
    return {
      arr: []
    }
  },
  async mounted() {
    // 調用介面獲取組件渲染的數據
    const { data: { data } } = await this.$axios.get('/api/getList')
    this.arr.push(...data)
  }
}
</script>

然後在使用的發現這個組件有些瑕疵，比如最簡單的，介面等待時間可能比較長，我想在 mounted 生命周期開始執行的時候在控制台輸出一個 loading ... 字元串，增強用戶體驗。

這個需求該怎麼實現呢？

有兩個辦法：第一個比較麻煩，修改源碼；而第二種方式則簡單多了，就是我們今天介紹的 Hook Event，從組件外面為組件注入額外的生命周期方法。

<template>
  <div class="wrapper">
    <comp @hook:mounted="hookMounted" />
  </div>
</template>

<script>
// 這就是上面的那個第三方業務組件
import Comp from '@/components/Comp.vue'

export default {
  components: {
    Comp
  },
  methods: {
    hookMounted() {
      console.log('loading ...')
    }
  }
}
</script>

這時候你再刷新頁面就會發現業務組件在請求數據的時候，會在控制台輸出一個 loading ... 字元串。

作用

Hook Event 有什麼作用？

通過 Hook Event 可以從組件外部為組件注入額外的生命周期方法。

實現原理

知道了 Hook Event 的使用場景和作用，接下來就從源碼去找它的實現原理，做到「知其然，亦知其所以然」。

前面說過，Hook Event 是 Vue 的自定義事件結合生命周期鉤子函數實現的一種功能，所以我們就去看生命周期相關的程式碼，比如：我們知道，Vue 的生命周期函數是通過一個叫 callHook 的方法來執行的

callHook

/src/core/instance/lifecycle.js

/**
 * callHook(vm, 'mounted')
 * 執行實例指定的生命周期鉤子函數
 * 如果實例設置有對應的 Hook Event，比如：<comp @hook:mounted="method" />，執行完生命周期函數之後，觸發該事件的執行
 * @param {*} vm 組件實例
 * @param {*} hook 生命周期鉤子函數
 */
export function callHook (vm: Component, hook: string) {
  // 在執行生命周期鉤子函數期間禁止依賴收集
  // #7573 disable dep collection when invoking lifecycle hooks
  pushTarget()
  // 從實例配置對象中獲取指定鉤子函數，比如 mounted
  const handlers = vm.$options[hook]
  // mounted hook
  const info = `${hook} hook`
  if (handlers) {
    // 通過 invokeWithErrorHandler 執行生命周期鉤子
    for (let i = 0, j = handlers.length; i < j; i++) {
      invokeWithErrorHandling(handlers[i], vm, null, vm, info)
    }
  }
  // Hook Event，如果設置了 Hook Event，比如 <comp @hook:mounted="method" />，則通過 $emit 觸發該事件
  // vm._hasHookEvent 標識組件是否有 hook event，這是在 vm.$on 中處理組件自定義事件時設置的
  if (vm._hasHookEvent) {
    // vm.$emit('hook:mounted')
    vm.$emit('hook:' + hook)
  }
  // 關閉依賴收集
  popTarget()
}

invokeWithErrorHandling

/src/core/util/error.js

/**
 * 通用函數，執行指定函數 handler
 * 傳遞進來的函數會被用 try catch 包裹，進行異常捕獲處理
 */
export function invokeWithErrorHandling (
  handler: Function,
  context: any,
  args: null | any[],
  vm: any,
  info: string
) {
  let res
  try {
    // 執行傳遞進來的函數 handler，並將執行結果返回
    res = args ? handler.apply(context, args) : handler.call(context)
    if (res && !res._isVue && isPromise(res) && !res._handled) {
      res.catch(e => handleError(e, vm, info + ` (Promise/async)`))
      // issue #9511
      // avoid catch triggering multiple times when nested calls
      res._handled = true
    }
  } catch (e) {
    handleError(e, vm, info)
  }
  return res
}

vm.$on

/src/core/instance/events.js

/**
 * 監聽實例上的自定義事件，vm._event = { eventName: [fn1, ...], ... }
 * @param {*} event 單個的事件名稱或者有多個事件名組成的數組
 * @param {*} fn 當 event 被觸發時執行的回調函數
 * @returns 
 */
Vue.prototype.$on = function (event: string | Array<string>, fn: Function): Component {
  const vm: Component = this
  if (Array.isArray(event)) {
    // event 是有多個事件名組成的數組，則遍歷這些事件，依次遞歸調用 $on
    for (let i = 0, l = event.length; i < l; i++) {
      vm.$on(event[i], fn)
    }
  } else {
    // 將註冊的事件和回調以鍵值對的形式存儲到 vm._event 對象中 vm._event = { eventName: [fn1, ...] }
    (vm._events[event] || (vm._events[event] = [])).push(fn)
    // hookEvent，提供從外部為組件實例注入聲明周期方法的機會
    // 比如從組件外部為組件的 mounted 方法注入額外的邏輯
    // 該能力是結合 callhook 方法實現的
    if (hookRE.test(event)) {
      vm._hasHookEvent = true
    }
  }
  return vm
}

總結

面試官問：什麼是 Hook Event？

答：

Hook Event 是 Vue 的自定義事件結合生命周期鉤子實現的一種從組件外部為組件注入額外生命周期方法的功能。

面試官問：Hook Event 是如果實現的？

答：
```
<comp @hook:lifecycleMethod="method" />
```
- 處理組件自定義事件的時候（vm.$on) 如果發現組件有 hook:xx 格式的事件（xx 為 Vue 的生命周期函數），則將 vm._hasHookEvent 置為 true，表示該組件有 Hook Event
- 在組件生命周期方法被觸發的時候，內部會通過 callHook 方法來執行這些生命周期函數，在生命周期函數執行之後，如果發現 vm._hasHookEvent 為 true，則表示當前組件有 Hook Event，通過 vm.$emit('hook:xx') 觸發 Hook Event 的執行
這就是 Hook Event 的實現原理。

鏈接

配套影片，微信公眾號回復：”精通 Vue 技術棧源碼原理影片版” 獲取
精通 Vue 技術棧源碼原理專欄
github 倉庫 liyongning/Vue 歡迎 Star

感謝各位的：關注、點贊、收藏和評論，我們下期見。

當學習成為了習慣，知識也就變成了常識。 感謝各位的關注、點贊、收藏和評論。

新影片和文章會第一時間在微信公眾號發送，歡迎關註：李永寧lyn

文章已收錄到 github 倉庫 liyongning/blog，歡迎 Watch 和 Star。

Tags: 精通 Vue 技術棧的源碼原理