问题起源:
在日常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