记一次vue.js的中央事件总线event bus重复执行的bug

[Pasoul]

需求分析

list页面点击列表的某一项(比如活动列表)，进入到detail页面进行编辑，list页面和detail页面关系是这样：

{
  path: '/list',
  component: List,
  children: [
      path: 'detail',
      component: Detail
  ]
}

detail页面返回到list页面时，希望刷新整个列表，但不刷新list页面(list页面还有其他的数据)

最初的方法

1. 定义event bus，分别在list页面和detail页面引入

2. 在list的created钩子函数里面监听刷新事件

Bus.$on('refreshList', () => {
      // ... 这里请求接口刷新列表
 })

3. 在detail页面的beforeDestroy钩子函数里面触发数据
   Bus.$emit('refreshList')

遇到的问题

一切看起来没问题，但是产品要求，点击菜单栏要求刷新当前页面(非刷新浏览器)，目前的做法是通过vuex动态修改顶级router-view的显示隐藏

这就导致每点击一次侧边栏，页面重新渲染一次，created函数重新执行一次，refreshList事件就重新绑定一次(event bus是不会随着页面销毁而销毁的，需要手动销毁，查看vue issue)，导致从detail页面返回list页面的时候，refreshList的回调函数请求了n+1次(比如点击了n次侧边栏)

手动销毁event bus

通过watch路由变化，希望销毁对refreshList的监听，this.callback是对刷新函数的一次封装

watch: {
      '$route': function () {
        Bus.$off('refreshList',this.callback)
      }
}

官网也有对off事件的介绍

但是无论重复绑定多少次refreshList事件，来回切换list和detail页面，永远只销毁一次

追根溯源

查看vue源码的$off方法，它会判断传入的event事件是数组函数字符串，然后通过Object.create(null)新建一个对象，key是index，value是事件处理函数this.callback，形如：

{
 0: this.callback,
 1: this.callback
}

最后遍历该对象，移除对应的callback
最终发现它确实只销毁一次，这样对应了官网api第三条：如果同时提供了事件与回调，则只移除这个回调的监听器。

解决方法

通过在list页面定义refresh方法，在detail页面的beforeDestroy钩子函数调用this.$parent.refresh()刷新页面，也看出event bus不适用于父子组件，官网也提到适用于兄弟组件的数据通讯