vue-geventbus - 一个优雅的 Vue 全局事件处理插件

2018-08-11 22:08:49 +08:00
 banxi1988

Vue 中全局事件处理的传统做法

  1. 先创建一个名为 eventBus 的全局 Vue 实例。
const eventBus = new Vue();
export default eventBus;
  1. 在 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 事件处理函数的全局事件处理函数的版本。

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

2367 次点击
所在节点    前端开发
3 条回复
leekafai
2018-08-11 22:26:55 +08:00
老哥,地址
banxi1988
2018-08-11 22:43:47 +08:00
@leekafai #1
哈哈,我隐藏在其中一句介绍的话中。
> 这里要介绍的 Vue 插件 vue-geventbus 可以帮我们优雅的解决此问题。
其中的 `vue-geventbus` 是包含链接的。

https://github.com/banxi1988/vue-geventbus
leekafai
2018-08-12 09:07:12 +08:00
@banxi1988 (⁄ ⁄•⁄ω⁄•⁄ ⁄)

这是一个专为移动设备优化的页面(即为了让你能够在 Google 搜索结果里秒开这个页面),如果你希望参与 V2EX 社区的讨论,你可以继续到 V2EX 上打开本讨论主题的完整版本。

https://www.v2ex.com/t/478949

V2EX 是创意工作者们的社区,是一个分享自己正在做的有趣事物、交流想法,可以遇见新朋友甚至新机会的地方。

V2EX is a community of developers, designers and creative people.

© 2021 V2EX