Vue：EventBus踩过的坑（重复触发事件，以及上次事件中的遗留数据造成的数据错乱问题），实录

前言：开发公司业务需求时，采用了EventBus组件于组件之间的通信方式，由于自己不够谨慎导致踩坑。

注册了一个全局组件B，在B组件中，调用了A组件中的监听方法，如下：

A组件：

mounted() {
    bus.$on('activityHandle', this.activityHandle)
},
methods: {
    activityHandle() ｛
        console.log('B监听页面====>this.listData:', this.listData)
    ｝
}

B组件：

mounted() {
    bus.$emit('activityHandle', '...')
}

此时当我们第一次进入页面A（A组件），程序正常进行没有问题。当我们第二次进入A页面，再次触发B组件的emit事件时，控制台和network里的显示数据就可以看到，执行了多次重复的事件，并且在新的事件执行中，我们打印出了本不该出现的遗留listData数据。打开了devtool工具，组件内listData正确数据应该是数组长度为2的这组数据。

因为程序中牵扯到了读取cookies数据，所以最先去排查了是否为cookies数据未删除成功导致，几次代码测试后发现并无效果。最后发现是EventBus事件未在实例销毁的时候，注销监听事件，导致触发上一次监听事件，遗留数据也是上一次事件中的，看起来很像是一个缓存效果。修改代码如下：

beforeDestroy() {
    bus.$off('activityHandle', this.activityHandle)
}

在注销监听事件后，程序正常执行，解决了业务上的BUG。