页面第二次进入或者多次进入,事件总线触发事件多次,eventBus触发多次

简介: 页面第二次进入或者多次进入,事件总线触发事件多次,eventBus触发多次

问题描述


页面第二次进入或者多次进入,事件总线触发事件多次


原因分析:


我有一个页面,在created的时候会通过事件总线注册一个事件,但是我这个页面可能会进进出出很多次. 于是我的页面就出现了事件总线注册的事件我的触发机制触发一次,却执行了很多次. 后来我发现,我第一次进入页面是正常的,第二次进入这个事件会执行两次,第三次进入页面触发这个事件总线注册的事件会触发三次.


于是我便想到了应该是我的页面每次进入都注册了相同的事件,但是没有再页面销毁的时候注销事件,导致了页面第二次及后续进入的异常.


猜想:


是不是事件总线的逻辑是为注册的这个事件在总线中开辟一个数组,每次$on都会push用户对应的回调进入这个事件名的数组中,于是问了一下chatgpt,果然是的


b787d8f37e80b14f0e1cb17e8b9a1f0b_66ffae5358a4456b93e247e95c62ef82.png


自己 尝试了下

在created的时候打印1,并且不注销事件


EventBus.$on('console1',
      function () {
        console.log(1)
      }
    );


第一次进入页面


dbfd239d0165d758edbf64d117d9be8c_276a93ce56f14bb2bdeb9312861ff80e.png


第二次进入页面


57c715077a3f0e8eb677736d1cf6893f_4b90dca4c8af4d7f8c0736791c9310c1.png


第三次进入页面


31a4a3c19db31046c076e13e006f0bd3_40cafec47c5c4e76969681d48a752fa1.png


解决方案:

destroyed() {
    EventBus.$off('addelement',
      this.elementClick
    );
  },


所以注册事件最好还是销毁一下.


相关文章
|
18天前
|
JavaScript 调度
Vue事件总线(EventBus)使用指南:详细解析与实战应用
Vue事件总线(EventBus)使用指南:详细解析与实战应用
33 1
|
5月前
|
消息中间件 JavaScript 中间件
中间件事件总线事件定义
【6月更文挑战第20天】
48 2
中间件事件总线事件定义
|
5月前
|
消息中间件 设计模式 监控
中间件事件总线(Event Bus)
【6月更文挑战第19天】
95 8
|
6月前
|
JavaScript
在Vue中,如何使用事件总线来传递数据和触发事件?
在Vue中,如何使用事件总线来传递数据和触发事件?
90 0
|
12月前
|
JSON 数据格式
EventBridge事件领域
EventBridge事件领域
59 0
|
消息中间件 弹性计算 运维
阿里云事件生态再升级:使用 EventBridge 驱动全量云产品
阿里云 EventBridge 作为云上事件枢纽,早已集成了云上产品的各类事件,用户开通 EventBridge 后使用内置的云服务专用总线就可以监听这些事件,无需创建任何额外资源。
271 0
阿里云事件生态再升级:使用  EventBridge 驱动全量云产品
|
消息中间件 弹性计算 运维
重新定义分析 - EventBridge实时事件分析平台发布
为了解决事件领域中针对流式事件做分析的难题,EventBridge 近日发布了针对事件/消息领域的全新分析工具--EventBridge 实时事件分析平台。下面简要对 EventBridge 实时事件分析平台的内容进行介绍。
222 0
重新定义分析 - EventBridge实时事件分析平台发布
|
新零售 敏捷开发 Cloud Native
“全”事件触发:阿里云函数计算与事件总线产品完成全面深度集成
目前,函数计算已具备接入EventBridge所有事件源的触发能力,实现触达阿里云全系产品服务的“最后一公里”。
300 0
“全”事件触发:阿里云函数计算与事件总线产品完成全面深度集成
|
3月前
|
JavaScript
Vue学习之--------全局事件总线(2022/8/22)
这篇文章介绍了Vue中全局事件总线(GlobalEventBus)的概念和使用方法,它允许不同组件之间进行通信。文章通过图解和代码实例详细解释了如何安装全局事件总线、在组件中接收和提供数据,以及如何在组件销毁前解绑事件,以避免潜在的内存泄漏问题。
Vue学习之--------全局事件总线(2022/8/22)
|
6月前
|
JavaScript
解释 Vue 的事件总线和 emits 属性。
解释 Vue 的事件总线和 emits 属性。
72 3