Vue Bus事件中心 多次触发的坑

Vue 中事件处理 在子组件和父组件中 父组件可以通过props向下传递数据，子组件则可以用 emit向上传递。但在两个没有嵌套关系的组件中或者想指定触发某个操作时则可以用 Bus 事件中心。
现在我有这样一个组件 List 组件

<template>
  <div class="list">
      <tabs :list="tabList"
      </tabs>
  </div>
</template>

List组件中 嵌套使用tabs 组件

<template>
  <van-tabs v-model="nums" >
    <template v-for="item in dataList">
       <van-tab
       :title="item.title"
       :name='item.type'
       :badge="item.num || ''"
       :key='item.title'>
       <list-Card :action='item.type' :list='item' ></list-Card>
      </van-tab>
    </template>
  </van-tabs>
</template>

tabs组件复用list-card 展示列表数据
效果像下图

每个tab 对应各自的list-card列表数据 但有一个标签列表是显示所有类型数据 当我在此列表里去增加或删除某个数据后其他列表数据也应更新 如果每次切换tab 都去请求一次数据的话对用户体验不好 所有这里使用的vant组件库的tab组件 他自带缓存效果 每个tab列表只在第一次去请求数据 。但是我先在执行操作后去更新其他列表的数据 这里我使用Bus 事件中心
我们在 List组件中执行操作请求后去触发事件

// List 组件
          Bus.$emit('handleRefreshLeaveList')

在 list-card 中监听这个事件

// list-card 组件 这个组件是复用的 所有每个组件都会有监听
         Bus.$on('handleRefreshLeaveList', () => {
         //请求对应列表数据
     		getListData()
      
    })

坑就在出现了 我们去执行增删后 其他的列表数据也会更新没问题 但是如果我们没有去销毁这个事件监听 那么我们多次进出这几个界面 它会多次注册这个监听事件 比如我这里有三个tab 那么就会有三个监听事件 如果我们出去再进入这个界面 他又会去注册三个 现在我们就有6个 当这个事件被触发 对应的6个事件监听都监听到 都会去执行方法体内容 看图

第一次我们进入 执行操作后 只请求了3次（GetLeavePageResult） 因为我有3个列表是没问题的

然后我们退出这个界面在进入 去执行操作后 他去请求了6次 因为没有销毁监听事件 它重复注册 依次类推是9次请求如下

所以在注册监听事件后一定要记得去销毁 不然会存在重复执行操作
销毁监听事件如下

beforeDestroy () {
    Bus.$off('handleRefreshLeaveList')
  }

好了 今天就分享到这里