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

本插件测试完善，也能够经过测试代码更多了了解本插件的一些特性细节。详情见参考仓库中的源代码。