vue-geventbus - 一個優雅的 Vue 全局事件處理插件

Vue 中全局事件處理的傳統作法

1. 先建立一個名爲 eventBus 的全局 Vue 實例。

const eventBus = new Vue();
export default eventBus;
複製代碼

2. 在 Vue 組件中使用時，通常在 mounted 生命週期中註冊事件處理函數。在 destroyed 生命週期函數中解除註冊的事件以避免形成內存泄漏。

import { Component, Prop, Vue } from "vue-property-decorator";
import eventBus from "@/services/eventBus";

@Component
export default class HelloWorld extends Vue {
 
  mounted(){
      eventBus.$on(AppEvents.userInfoDidChanged, this.onUserInfoChanged);
  }
  
  onUserInfoChanged(){
      
  }
  
  destroyed(){
      eventBus.$off(AppEvents.userInfoDidChanged, this.onUserInfoChanged);
  }
}
複製代碼

這樣使用起來頗爲繁瑣。註冊了某一個事件以後，必須在適用的時候取消註冊。

使用 vue-geventbus 以後

這裏要介紹的 Vue 插件 vue-geventbus 能夠幫咱們優雅的解決此問題。 在使用了 vue-geventbus 以後。後面咱們寫全局事件的註冊函數就能夠像下面這樣寫了。

this.$gon(AppEvents.userInfoDidChanged, () => {
    
});
複製代碼

vue-geventbus 插件會在此 Vue 實例銷燬時自動將此實例註冊的全局事件處理函數所有清理以免內存泄漏。

注意這裏使用的是 vue-geventbus 插件添加的擴展方法 $gon 比 $on 多了一個 g,就像 LOVE 去掉一半變 LOLI（這都啥跟啥啊？）

原理

具體來講是經過 Vue 的 Mixin 機制，爲 Vue 組件添加了以下 mixin

vueClass.mixin({
      destroyed() {
        const vue = this as any;
        clazz.removeListenersByVue(vue);
      }
    });
複製代碼

也就是在 Vue 組件實例銷燬時將此組件註冊的全部事件處理函數清理掉。 後面的整個插件的代碼都是爲了實現此邏輯而來的。

事實上 vue-geventbus 從新實現了基本的 Vue 事件處理邏輯。下面的二者的事件對照表，也就是說 vue-geventbus 提供了 Vue 事件處理函數的全局事件處理函數的版本。

Vue Api	vue-geventbus Api
$on	$gon
$once	$gonce
$emit	$gemit
$off	$goff

本插件測試完善，也能夠經過測試代碼更多了了解本插件的一些特性細節。詳情見參考倉庫中的源代碼。