對於Vue的事件機制，其實有一些高級技巧，我們最好能夠掌握。
一、組件的生命周期鈎子事件
Vue的生命周期函數，其實就是Vue開發者設定的一些hook鈎子，你只要往hook里面編寫代碼，它就可以執行。如vue實例里的beforeCreate、created、mounted等，都是鈎子。
但是你可能不知道，在Vue當中，觸發鈎子函數的時候，也會向父組件$emit一個事件，稱之為hookEvent。
這個事件名叫做hook，以冒號的形式給它提供參數，參數就是各個鈎子函數的名稱，如下面的例子所示：
<my-component @hook:mounted='doSomething'></my-component>
上面的代碼要這么讀：當my-component這個子組件執行到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代碼都是固定的，編譯前就寫好的，無法動態修改。這樣不靈活，也滿足不了所有的需求，我們需要類似編程語言能力的動態設置能力。
Vue很貼心的為我們提供了下面三個方法，讓我們能夠以程序化的方式偵聽、停止事件：
$on(eventName, eventHandler)：偵聽一個事件$once(eventName, eventHandler)：一次性偵聽一個事件$off(eventName, eventHandler)：停止偵聽一個事件
那么程序化的事件處理有什么優點呢？
看下面的例子，假設你要集成一個第三方庫，這個庫的作用是將一個日期選擇器附加到一個輸入框上，然后在母組件被銷毀之前，先把這個庫的實例銷毀了。最朴素的做法是在母組件的mounted鈎子處自動掛載庫實例，然后在beforeDestroy鈎子處自動銷毀庫實例：
// 一次性將這個日期選擇器附加到一個輸入框上
// 它會被掛載到 DOM 上。
mounted: function () {
// Pikaday 是一個第三方日期選擇器的庫
this.picker = new Pikaday({
field: this.$refs.input,
format: 'YYYY-MM-DD'
})
},
// 在組件被銷毀之前，
// 也銷毀這個日期選擇器。
beforeDestroy: function () {
this.picker.destroy()
}
但是這么做有兩個潛在的問題：
- 需要在這個組件實例中保存這個
picker實例，如果可以的話最好只有生命周期鈎子可以訪問到它。雖然這並不算嚴重的問題，但是它可以被視為“雜物”。 - 創建庫實例的代碼獨立於清理庫實例的代碼，這使得我們比較難於程序化地清理我們建立的所有東西。
解決問題的最佳辦法是，鈎子事件配合程序化的偵聽器：
mounted: function () {
var picker = new Pikaday({
field: this.$refs.input,
format: 'YYYY-MM-DD'
})
// 注意看這里
this.$once('hook:beforeDestroy', function () {
picker.destroy()
})
}
$once綁定的事件只能被執行一次，完美適合銷毀場景。
使用了上面的策略，我甚至可以讓不同的輸入框元素使用不同的 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的別名。