如今Vue Eventbus模式还能干啥用？我给一个具体案例

前言

Vue的中央事件总线不是新鲜名词了，但是一般用不到，因为用起来虽然简单，但是维护起来相对困难。今天我将一个必须用中央事件总线的案例。

原理

其实是使用Vue实例带的2个方法$emit和$on。

做法

1. 创建 /utils/EventBus.js，内容是：

import Vue from 'vue';
export default new Vue();

2. 在A组件中监听事件：

import Repeater from '@/utils/EventBus.js';

  created() {
    // 监听
    EventBus.$on('someEvent', (val) => {
      // do something
    });
  },

3. 在B组件中触发事件：

import EventBus from '@/utils/EventBus.js';

  methods: {
    onClickXX() {
      EventBus.$emit('someEvent', val);
    }
  },

缺点

A组件中的监听，你并不知道会由哪个组件触发，也无法由vuejs-devtools来跟踪。

优点

比使用vuex要简单，vuex要将val设为一个state，然后A组件必须用watch来监听这个state，尽管能追踪，但是我明明是想监听“事件”，现在成了监听“变量”，南辕北辙。

什么案例必须使用Eventbus模式？

显然，监听“事件”而不是监听“变量”的场景，跨不相关组件广播事件的场景，都适合使用Eventbus模式。

举例

一个后台管理系统，使用标签页来管理各个页面。A页面有个下拉菜单，其内容由B页面负责维护，也就是说：

	A页面	B页面
用途	业务流程页面	底层管理页面
使用频率	每天使用若干次	一个月或几个月使用1次
使用keep-alive	为了保证切出再切回时，表单内容不丢失，使用了keep-alive	没使用

现在我正在使用A页面，填写表单填了一半进度，发现下拉菜单需要修改一下，于是我又打开B页面做修改，修改完成之后切回A页面，此时A页面的下拉菜单不会有变化，因为我没有写activated周期。

于是为了更新接口，我在activated周期写上了请求接口的代码，于是，每天要请求数百次、数千次、数万次这个接口，然而请求下来的内容都一模一样，除非我在B页面修改了内容。这又是一种极大的浪费。

因此现在的问题是，如何由无脑请求变成智能化更新。做法就是B页面广播事件，A页面在created周期设置监听事件。具体代码不说了。

结语

其实activated本身也是事件，也是一个监听器，只不过会频繁触发，而created只会触发一次，在created设置Eventbus监听器之后，等于现在有Eventbus监听器和activated监听器并行，不要把Eventbus监听器写在activated里。