eventBus封装

中央事件总线eventBus的实质就是创建一个vue实例，通过一个空的vue实例作为桥梁实现vue组件间的通信。它是实现非父子组件通信的一种解决方案。

eventBus 一般用法

而 eventBus实现也非常简单

import Vue from 'Vue'
export default new Vue

我们在使用中经常最容易忽视，又必然不能忘记的东西，那就是:清除事件总线 eventBus。

不手动清除，它是一直会存在，这样当前执行时，会反复进入到接受数据的组件内操作获取数据，原本只执行一次的获取的操作将会有多次操作。本来只会触发并只执行一次，变成了多次，这个问题就非常严重。

当不断进行操作几分钟后，页面就会卡顿，并占用大量内存。

所以一般在vue生命周期 beforeDestroy或者 destroyed中，需要用vue实例的 $off方法清除 eventBus

beforeDestroy () {
  bus.$off('click')
}

可当你有多个 eventBus时，就需要重复性劳动 $off销毁这件事儿。
这时候封装一个 eventBus就是更佳的解决方案。

拥有生命周期的 eventBus

我们从Vue.init中可以得知：

Vue.prototype._init = function () {
  const vm: Component = this
  // a uid vm实例唯一标识
  vm._uid = uid ++
  // ...
}

每个Vue实例有自己的 _uid作为唯一标识，因此我们让 EventBus和_uid`关联起来，并将其改造:

image.png

main.js中注册：

import EventBus from './eventBus.js'
Vue.use(EnemtBus)

组件中使用：

created () {
    /**
     * @description 订阅 on-change 事件
     * @param
     *   参数1 事件名
     *   参数2 事件传递参数
     *   参数3 默认为当前组件this，如果不传则需要手动销毁
     */
    this.$eventBus.$on('on-change', (...args) => {
      console.log(...args)
      //
    }, this)
  }
  methods () {
    onChangeHandle() {
      this.$eventBus.$emit('on-change', '传递参数1', '传递参数2')
    }
  },
  beforeDestroy () {
    // 不再需要手动销毁eventBus订阅事件
  }