對于Vue的事件機制聂示，其實有一些高級技巧，我們最好能夠掌握。
一姨蝴、組件的生命周期鉤子事件
Vue的生命周期函數，其實就是Vue開發(fā)者設定的一些hook鉤子肺缕，你只要往hook里面編寫代碼左医，它就可以執(zhí)行。如vue實例里的beforeCreate同木、created浮梢、mounted等，都是鉤子彤路。
但是你可能不知道秕硝，在Vue當中洲尊，觸發(fā)鉤子函數的時候远豺，也會向父組件$emit一個事件坞嘀，稱之為hookEvent躯护。
這個事件名叫做hook丽涩，以冒號的形式給它提供參數棺滞，參數就是各個鉤子函數的名稱，如下面的例子所示：
<my-component @hook:mounted='doSomething'></my-component>
上面的代碼要這么讀：當my-component這個子組件執(zhí)行到mounted鉤子函數時矢渊，會自動向父組件冒泡一個叫做hook:mounted的事件检眯，也就是this.$emit('hook:' + 'mounted')昆淡，無論你是否在my-component中編寫了具體的mounted代碼。
關于理解鉤子事件昂灵，重要在于：
- 這是從子組件向父組件自動冒泡的事件
- 在父組件中捕獲該事件并進行相應處理
- 這不是HTML元素標簽級別的事件避凝，而是組件級別的事件，不要在普通標簽上使用它
源碼分析
在Vue的官方文檔中眨补，找不到鉤子事件相關的內容管削，但是我們可以從源碼中進行分析：
下面是一段截取的Vue源碼，注意callHook函數：
vm._self = vm
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')
可以看出含思，生命周期函數是通過callHook這個函數調用的。我們去看看callHook函數的源代碼：
export function callHook (vm: Component, hook: string) {
// #7573 disable dep collection when invoking lifecycle hooks
pushTarget()
const handlers = vm.$options[hook] // 選項當中的生命周期函數
const info = `${hook} hook`
if (handlers) {
for (let i = 0, j = handlers.length; i < j; i++) {
invokeWithErrorHandling(handlers[i], vm, null, vm, info)
}
}
if (vm._hasHookEvent) {
vm.$emit('hook:' + hook)
}
popTarget()
}
下面這段含潘，就是鉤子事件的出處了：
if (vm._hasHookEvent) {
vm.$emit('hook:' + hook)
}
根據不同hook的具體名字（created、mounted等等）遏弱，組合鉤子事件的字符串名，然后emit漱逸。
鉤子事件為我們控制和響應子組件的變化，提供了新的饰抒、便捷的手段肮砾。
二袋坑、程序化的事件偵聽器
我們知道 $emit 冒泡的事件，可以被 v-on 指令偵聽咒彤。但是，所有寫在模板上的v-on代碼都是固定的镶柱，編譯前就寫好的，無法動態(tài)修改歇拆。這樣不靈活，也滿足不了所有的需求故觅，我們需要類似編程語言能力的動態(tài)設置能力。
Vue很貼心的為我們提供了下面三個方法输吏，讓我們能夠以程序化的方式偵聽、停止事件：
-
$on(eventName, eventHandler)：偵聽一個事件 -
$once(eventName, eventHandler)：一次性偵聽一個事件 -
$off(eventName, eventHandler)：停止偵聽一個事件
那么程序化的事件處理有什么優(yōu)點呢拄氯？
看下面的例子，假設你要集成一個第三方庫译柏，這個庫的作用是將一個日期選擇器附加到一個輸入框上，然后在母組件被銷毀之前鄙麦，先把這個庫的實例銷毀了典唇。最樸素的做法是在母組件的mounted鉤子處自動掛載庫實例，然后在beforeDestroy鉤子處自動銷毀庫實例：
// 一次性將這個日期選擇器附加到一個輸入框上
// 它會被掛載到 DOM 上介衔。
mounted: function () {
// Pikaday 是一個第三方日期選擇器的庫
this.picker = new Pikaday({
field: this.$refs.input,
format: 'YYYY-MM-DD'
})
},
// 在組件被銷毀之前，
// 也銷毀這個日期選擇器。
beforeDestroy: function () {
this.picker.destroy()
}
但是這么做有兩個潛在的問題：
- 需要在這個組件實例中保存這個
picker實例与纽，如果可以的話最好只有生命周期鉤子可以訪問到它。雖然這并不算嚴重的問題急迂，但是它可以被視為“雜物”。 - 創(chuàng)建庫實例的代碼獨立于清理庫實例的代碼僚碎，這使得我們比較難于程序化地清理我們建立的所有東西。
解決問題的最佳辦法是勺阐，鉤子事件配合程序化的偵聽器：
mounted: function () {
var picker = new Pikaday({
field: this.$refs.input,
format: 'YYYY-MM-DD'
})
// 注意看這里
this.$once('hook:beforeDestroy', function () {
picker.destroy()
})
}
$once綁定的事件只能被執(zhí)行一次卷中，完美適合銷毀場景渊抽。
使用了上面的策略，我甚至可以讓不同的輸入框元素使用不同的 Pikaday懒闷，每個新的實例都程序化地在后期清理它自己：
mounted: function () {
this.attachDatepicker('startDateInput')
this.attachDatepicker('endDateInput')
},
methods: {
attachDatepicker: function (refName) {
var picker = new Pikaday({
field: this.$refs[refName],
format: 'YYYY-MM-DD'
})
this.$once('hook:beforeDestroy', function () {
picker.destroy()
})
}
}
實際上，對于上面的需求愤估，更普遍更適合的方法還是抽象出一個可以復用的組件。
注意 Vue 的事件系統不同于瀏覽器的 EventTarget API玩焰。盡管它們工作起來是相似的，但是
$emit昔园、$on, 和$off并不是dispatchEvent、addEventListener和removeEventListener的別名蒿赢。
