vue中使用window.eventBus事件重复触发的问题

vue中数据传输，会用到window.eventBus进行全局事件传递，emit和on全局事件的数据传递。但是如果使用不当，会造成事件重复触发。场景如下：

1. 在main.js中，创建vue实例，并绑定到全局变量window.$bus上。

window.$bus = new Vue()

2. 在a.vue中设置触发事件

window.$bus.$emit('user_task_change')

3. 在b.vue中设置接收事件

window.$bus.$on('user_task_change', () => {
     console.log('事件触发')
    })

4. 当我们重复进入并退出b.vue组件后（比如：此次是进入退出重复8次），再次进入a.vue触发 ‘user_task_change’事件，此时控制台会同时打印8个 ’事件触发’ 信息。
   

导致该问题的原因：

是因为window.$bus 为全局变量，且事件触发机制on采用的是发布观察者模式，每次执行on函数是往事件队列中新增事件，而不是直接替换掉原有事件，所以当我们重复进入退出之后，事件队列的长度为8， emit该事件时则会遍历执行事件队列里的8个函数。

解决方案：

1. window.$bus.$on 事件放在一个全局文件中，如main.js。必要的话可配合vuex使用。
2. 如果在单个组件中使用，而且不需要重复触发的话，可以在绑定之前， 先使用 window.$bus.$off(‘user_task_change’) 清空事件队列， 在绑定事件。具体如下：
   window.$bus.$off('user_task_change') window.$bus.$on('user_task_change', () => {console.log('事件触发')})