eventBus
的全局 Vue
实例。const eventBus = new Vue();
export default eventBus;
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 事件处理函数的全局事件处理函数的版本。
本插件测试完善,也可以通过测试代码更多了了解本插件的一些特性细节。详情见参考仓库中的源代码。
这是一个专为移动设备优化的页面(即为了让你能够在 Google 搜索结果里秒开这个页面),如果你希望参与 V2EX 社区的讨论,你可以继续到 V2EX 上打开本讨论主题的完整版本。
V2EX 是创意工作者们的社区,是一个分享自己正在做的有趣事物、交流想法,可以遇见新朋友甚至新机会的地方。
V2EX is a community of developers, designers and creative people.