解决 vue3 使用mitt(发布订阅库)时,多次触发事件订阅问题

问题起源:

在日常vue项目开发中,有时会用到mitt(前身事件总线mittBus)进行事件传递,然而使用经常就是mitt().emit() , mitt().on 就结束了,未考虑到取消订阅事件, 订阅事件会创建回调函数,并将其添加到事件总线中。如果在实例卸载前不取消订阅,这些回调函数将一直存在于内存中, 这就导致同个订阅事件触发时相应多次。

解决:

<script lang="ts" setup>
  const { proxy } = getCurrentInstance();

  // 订阅事件
  proxy.mittBus.on('eventName', () => { })  

  // 实例卸载前取消相关事件订阅
  onBeforeUnmount(() => {
  
  // 取消订阅特定事件
  proxy.mittBus.off('eventName');
  
  // 取消订阅所以事件
  proxy.mittBus.all.clear();
});
</script>

附mitt github文档,以此记录
https://github.com/developit/mitt#parameters

  • 5
    点赞
  • 9
    收藏
    觉得还不错? 一键收藏
  • 0
    评论

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值