BING

Appearance

解决 mitt 多次触发事件订阅 bug ​

💬 问题起源 ​

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

👌 解决方案 ​

javascript
<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