Vue的鉤子事件和程式化偵聽

對於vue的事件機制，其實有一些高階技巧，我們最好能夠掌握。

vue的生命週期函式，其實就是vue開發者設定的一些hook鉤子，你只要往hook裡面編寫**，它就可以執行。如vue例項裡的beforecreate、created、mounted等，都是鉤子。

但是你可能不知道，在vue當中，觸發鉤子函式的時候，也會向父元件$emit乙個事件，稱之為hookevent。

這個事件名叫做hook，以冒號的形式給它提供引數，引數就是各個鉤子函式的名稱，如下面的例子所示：

上面的**要這麼讀：當my-component這個子元件執行到mounted鉤子函式時，會自動向父元件冒泡乙個叫做hook:mounted的事件，也就是this.$emit('hook:' + 'mounted')，無論你是否在my-component中編寫了具體的mounted**。

關於理解鉤子事件，重要在於：

下面是一段擷取的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)  hook`
if (handlers) 
} if (vm._hashookevent) 
poptarget()
}

if (vm._hashookevent)

根據不同hook的具體名字（created、mounted等等），組合鉤子事件的字串名，然後emit。

鉤子事件為我們控制和響應子元件的變化，提供了新的、便捷的手段。

我們知道$emit冒泡的事件，可以被v-on指令偵聽。但是，所有寫在模板上的v-on**都是固定的，編譯前就寫好的，無法動態修改。這樣不靈活，也滿足不了所有的需求，我們需要類似程式語言能力的動態設定能力。

vue很貼心的為我們提供了下面三個方法，讓我們能夠以程式化的方式偵聽、停止事件：

那麼程式化的事件處理有什麼優點呢？

看下面的例子，假設你要整合乙個第三方庫，這個庫的作用是將乙個日期選擇器附加到乙個輸入框上，然後在母元件被銷毀之前，先把這個庫的例項銷毀了。最樸素的做法是在母元件的mounted鉤子處自動掛載庫例項，然後在beforedestroy鉤子處自動銷毀庫例項：

// 一次性將這個日期選擇器附加到乙個輸入框上
// 它會被掛載到 dom 上。
mounted: function () )
}, 
// 在元件被銷毀之前，
// 也銷毀這個日期選擇器。
beforedestroy: function ()

但是這麼做有兩個潛在的問題：

解決問題的最佳辦法是，鉤子事件配合程式化的偵聽器：

mounted: function () )
// 注意看這裡
this.$once('hook:beforedestroy', function () )
}

$once繫結的事件只能被執行一次，完美適合銷毀場景。

使用了上面的策略，我甚至可以讓不同的輸入框元素使用不同的 pikaday，每個新的例項都程式化地在後期清理它自己：

mounted: function () ,
methods: )
this.$once('hook:beforedestroy', function () )
}}

實際上，對於上面的需求，更普遍更適合的方法還是抽象出乙個可以復用的元件。

注意 vue 的事件系統不同於瀏覽器的 eventtarget api。儘管它們工作起來是相似的，但是$emit、$on, 和$off並不是dispatchevent、addeventlistener和removeeventlistener的別名。

Vue的鉤子事件和程式化偵聽

程式化動畫的簡單嘗試

揭開AS程式的外紗三一統事件偵聽

CTP的程式化交易系統開發

Vue的鉤子事件和程式化偵聽

程式化動畫的簡單嘗試

揭開AS程式的外紗 三 一統事件偵聽

CTP的程式化交易系統開發

相關推薦

揭開AS程式的外紗三一統事件偵聽