hook 的使用

vue源碼中,組件調用了$on監聽的事件名符合以hook:開頭,當前實例的vm._hasHookEvent會為true,然后如果vm._hasHookEvent為true,組件就會在對應生命周期的時候通過emit觸發對應的事件vm.$emit('hook:' + hook)

內部監聽生命周期函數

實例：在使用Echarts時會監聽當前窗口的變化從而對當前的圖表resize

created() {
   // 監聽窗口發生變化，resize組件
    window.addEventListener('resize', this.handleResizeChart)
},
beforeDestroy() {
  // 組件銷毀時，銷毀監聽事件
  window.removeEventListener('resize', this.handleResizeChart)
}

更好的寫法時將監聽resize事件與銷毀resize事件放到一起，使得代碼邏輯更加緊湊，防止遺漏：

created() {
      // 監聽窗口發生變化，resize組件
      window.addEventListener('resize', this.handleResizeChart);
      // 通過hook監聽組件銷毀鈎子函數，並取消監聽事件，$on或$once
      this.$once('hook:beforeDestroy', () => {
            window.removeEventListener('resize', this.handleResizeChart)
      });
},

外部監聽生命周期函數->父組件監聽子組件生命周期

一般的做法,通過$emit來通知父組件

父組件

.component-wrap
    Child(@mounted="handleMounted")

子組件

... ...
mounted () {
    this.$emit('mounted');
}
... ...

這種方法能解決大部分問題，但有些繁瑣，且面對第三方組件時，這種實現方法就不好用了。
更好的實現方法是通過使用 @hook: 前綴監聽生命周期中的鈎子，並指定回調函數。例如：

.component-wrap
    Child(@hook:mounted="handleMounted")