hook event（鉤子事件）相信很多 vue 開發者都沒有使用過，甚至沒聽過，畢竟 vue 官方文件中也沒有提及。
vue 提供了一些生命週期鉤子函式，供開發者在特定的邏輯點新增額外的處理邏輯，比如：在元件掛載階段提供了beforemount和mounted兩個生命週期鉤子，供開發者在元件掛載階段執行額外的邏輯處理，比如為元件準備渲染所需的資料。
那這個 hook event —— 鉤子事件，其中也有鉤子的意思，和 vue 的生命週期鉤子函式有什麼關係呢？它又有什麼用呢？這就是這邊文章要解答的問題。
hook event 是 vue 的自定義事件結合生命週期鉤子實現的一種從元件外部為元件注入額外生命週期方法的功能。
假設現在有這麼乙個第三方的業務元件，邏輯很簡單，就在 mounted 生命週期中呼叫介面獲取資料，然後將資料渲染到頁面上。
然後在使用的發現這個元件有些瑕疵，比如最簡單的，介面等待時間可能比較長，我想在 mounted 生命週期開始執行的時候在控制台輸出乙個loading ...字串，增強使用者體驗。
這個需求該怎麼實現呢？
有兩個辦法：第乙個比較麻煩，修改原始碼；而第二種方式則簡單多了，就是我們今天介紹的 hook event，從元件外面為元件注入額外的生命週期方法。
這時候你再重新整理頁面就會發現業務元件在請求資料的時候，會在控制台輸出乙個loading ...字串。
hook event 有什麼作用？
通過 hook event 可以從元件外部為元件注入額外的生命週期方法。
知道了 hook event 的使用場景和作用，接下來就從原始碼去找它的實現原理，做到 「知其然，亦知其所以然」。
前面說過，hook event 是 vue 的自定義事件結合生命週期鉤子函式實現的一種功能，所以我們就去看生命週期相關的**，比如：我們知道，vue 的生命週期函式是通過乙個叫callhook的方法來執行的
/src/core/instance/lifecycle.js
/**
* callhook(vm, 'mounted')
* 執行例項指定的生命週期鉤子函式
* 如果例項設定有對應的 hook event，比如：，執行完生命週期函式之後，觸發該事件的執行
* @param vm 元件例項
* @param hook 生命週期鉤子函式
*/export function callhook (vm: component, hook: string) hook`
if (handlers)
} // hook event，如果設定了 hook event，比如 ，則通過 $emit 觸發該事件
// vm._hashookevent 標識元件是否有 hook event，這是在 vm.$on 中處理元件自定義事件時設定的
if (vm._hashookevent)
// 關閉依賴收集
poptarget()
}
/src/core/util/error.js
/**
* 通用函式，執行指定函式 handler
* 傳遞進來的函式會被用 try catch 包裹，進行異常捕獲處理
*/export function invokewitherrorhandling (
handler: function,
context: any,
args: null | any,
vm: any,
info: string
) } catch (e)
return res
}
/src/core/instance/events.js
/**
* 監聽例項上的自定義事件，vm._event =
* @param event 單個的事件名稱或者有多個事件名組成的陣列
* @param fn 當 event 被觸發時執行的**函式
* @returns
*/vue.prototype.$on = function (event: string | array, fn: function): component
} else
(vm._events[event] || (vm._events[event] = )).push(fn)
// hookevent，提供從外部為元件例項注入宣告週期方法的機會
// 比如從元件外部為元件的 mounted 方法注入額外的邏輯
// 該能力是結合 callhook 方法實現的
if (hookre.test(event))
} return vm
}
這就是 hook event 的實現原理。
github 倉庫 liyongning/vue 歡迎 star
文章已收錄到 github 倉庫 liyongning/blog，歡迎 watch 和 star。
Vue原始碼解讀
1 例項的屬性和方法 下圖 2 原型上的屬性和方法 下圖 3 原型鏈 下圖 上圖有誤，後續修正 const vm new vue 之後有 vm.proto vue.prototype vm.proto proto object.prototype vm.proto proto proto null ...
Vue原始碼解讀（二） Vue原始碼構建
vue.js 原始碼是基於 rollup 構建的，它的構建相關配置都在 scripts 錄下。通常 個基於 npm 託管的項 都會有 個 package.json 件，它是對項 的描述 件，它的內容實際上是 個標準的 json 物件。我們通常會配置 script 字段作為 npm 的執 指令碼，vu...
mybatis原始碼解讀（7）
private void typealiaseselement xnode parent else else catch classnotfoundexception e alias author type domain.blog.author alias blog type domain.blog...