addeventlistener事件參數_Vue的鈎子事件和程式化偵聽

對于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

的别名。

更多内容請通路: https://www.liujiangblog.com

更多視訊教程請通路: https://www.liujiangblog.com/video/