對于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 hookspushTarget()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 的別名。

更多內容請訪問: https://www.liujiangblog.com

更多視頻教程請訪問: https://www.liujiangblog.com/video/

總結

以上是生活随笔為你收集整理的addeventlistener事件参数_Vue的钩子事件和程序化侦听的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。