解决 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

你可能感兴趣的:(前端框架&库,javascript,vue.js,前端)