vue中eventBus事件传播的卸载

在Vue中，eventBus是一种在组件之间进行事件通信的方法，通常用于非父子组件间的通信。eventBus使用`mitt`或`tiny-emitter`等小型事件库来实现，它基于发布/订阅模式。但是，为了防止内存泄漏，我们需要在组件销毁时卸载eventBus上的事件，确保事件监听器被移除。

以下是一个关于eventBus事件传播卸载的基本步骤：

1. 创建eventBus实例。通常情况下，我们会创建一个独立的文件（比如`eventBus.js`），在该文件中引入并创建一个`mitt`实例，并导出该实例供其他组件使用。

2. 在组件中使用eventBus。在组件的`mounted`生命周期钩子中添加事件监听器，并在`beforeDestroy`生命周期钩子中卸载监听器。

3. 卸载事件。当组件被销毁时，应该在`beforeDestroy`钩子中使用eventBus的`off`方法来移除之前注册的事件监听器。

示例代码如下：

// eventBus.js
import mitt from 'mitt';
export const eventBus = mitt();

// 使用eventBus的组件
export default {
    data() {
        return {
            // ...
        };
    },
    mounted() {
        // 组件挂载后添加事件监听
        eventBus.on('some-event', this.handleEvent);
    },
    beforeDestroy() {
        // 组件销毁前移除事件监听
        eventBus.off('some-event', this.handleEvent);
    },
    methods: {
        handleEvent() {
            // 处理事件的方法
        }
    }
};

在上述代码中，我们创建了一个`eventBus`实例，并在组件挂载后添加了一个事件监听器。当组件即将销毁时，我们移除了这个监听器。这确保了组件销毁后不会有无效的事件监听器占用内存。