Vue事件總線(EventBus)

闡述一下 VUE中 eventbus 的原理

解答:
EventBus是消息傳遞的一種方式,基于一個消息中心,訂閱和發布消息的模式,稱為發布訂閱者模式。
on('name', fn)訂閱消息,name:訂閱的消息名稱, fn: 訂閱消息的函數(參數是接收的消息)
emit('name', args)發布消息, name:發布的消息名稱 , args:發布的消息

vue組件非常常見的有父子組件通信,兄弟組件通信。而父子組件通信就很簡單,父組件會通過 props 向下傳數據給子組件,當子組件有事情要告訴父組件時會通過 $emit 事件告訴父組件。如果兩個頁面沒有任何引入和被引入關系,該如何通信了?

vuex?那如果項目沒那么復雜,不需要類似Vuex這樣的庫來處理組件之間的數據通信呢,這時候就可以考慮Vue中的 事件總線 ,即 EventBus來通信。
EventBus 又稱為事件總線。在Vue中可以使用 EventBus 來作為溝通橋梁的概念,就像是所有組件共用相同的事件中心,可以向該中心注冊發送事件或接收事件,所以組件都可以上下平行地通知其他組件,但也就是太方便所以若使用不慎,就會造成難以維護的“災難”,因此才需要更完善的Vuex作為狀態管理中心,將通知的概念上升到共享狀態層次。

寫的時候可能會碰到一些問題,嘿嘿,注意下發布/訂閱時機,消息發布時,直接發布給(通知)訂閱者,如果沒有訂閱者,就不發送。發布完畢了,再訂閱,沒用,只能等下次發布了,所以訂閱事件必須在發布之前。

eg: A發布消息,B訂閱消息
所以B頁面要成功訂閱消息的話,必須保證先加載B頁面,然后再加載A,先把訂閱者$on加載在內存中,否則拿不到消息。

我是鋼筋我就必須刷新后先進A再進B。這就要先了解下Vue路由切換特性,vue路由切換時,會先加載新的組件,等新的組件渲染好但是還沒有掛載前,銷毀舊的組件,之后掛載新組件。

新組件beforeCreate
        ↓
新組件created
        ↓
新組件beforeMount
        ↓
舊組件beforeDestroy
        ↓
舊組件destroyed
        ↓
新組件mounted

注意,在$emit時,必須已經$on,否則將無法監聽到事件。
所以正確的寫法應該是在需要接收值的組件的created生命周期函數里寫$on,在需要往外傳值的組件的destroyed生命周期函數函數里寫:

destroyed(){
  eventBus.$emit('dataUpdate',data)
}

這樣寫,在舊組件銷毀的時候新的組件拿到舊組件傳來的值,然后在掛載的時候更新頁面里的數據。

一、這種倆頁面跳轉完全可以通過router傳參解決,感覺忙活一圈沒卵用;
二、B、C頁面訂閱,A發布,在進入B或者C時,上面那個destroyed的方法,必須是從A進B頁面,那進C時就沒了,而且也無法從mounted中直接獲取數據然后更改data數據,有局限。
所以我感覺這個EventBus主要應用場景應該是,一個頁面中有多個組件,也可能組件套組件,這種情況用props和emit傳參太麻煩,用EventBus正好解決問題。

問:vue兄弟組件如何通訊?
1、讓兄弟組件通過一個共同的父組件做為通訊橋梁彼此通訊(props、$emit)。
2、EventBus

廢話少說上代碼:
event-bus.js

import Vue from "vue";
export const EventBus = new Vue();

a.vue

<template>
    <button @click="sendMsg()">發送</button>
</template>

<script>
import { EventBus } from "@assets/utils/event-bus";
export default {
  methods: {
    sendMsg() {
      EventBus.$emit("aMsg", "來自A頁面的消息");
    }
  }
};
</script>

b.vue

<template>
    <p>B頁面,A發送來的消息:{{ msg }}</p>
</template>

<script>
import { EventBus } from "@assets/utils/event-bus";
export default {
  data() {
    return {
      msg: "defaultMsg"
    };
  },
  mounted() {
    EventBus.$on("aMsg", msg => {
      // A發送來的消息
      this.msg = msg;
    });
  }
};
</script>

上面就是 EventBus 的使用方法,是不是很簡單。但每次使用 EventBus 時都需要在各組件中引入 event-bus.js 。事實上,我們還可以讓事情變得更簡單一些。那就是創建一個全局的 EventBus 。

全局EventBus

main.js

...

var EventBus = new Vue();

Object.defineProperties(Vue.prototype, {
  $bus: {
    get: function() {
      return EventBus;
    }
  }
});
...

a.vue

<template>
  <button @click="sendMsg()">發送</button>
</template>

<script>
import { EventBus } from "@assets/utils/event-bus";
export default {
  methods: {
    sendMsg() {
      EventBus.$emit("aMsg", "來自A頁面的消息");
      this.$bus.$emit("nameOfEvent", {
        name: "shy"
      });
    }
  }
  // destroyed() {
  //   EventBus.$emit("aMsg", "來自A頁面的消息destroyed");
  //   this.$bus.$emit("nameOfEvent", {
  //     name: "shy-destroyed"
  //   });
  // }
};
</script>

b.vue

<template>
  <p>BBB頁面,A發送來的消息:{{ msg }}</p>
</template>

<script>
import { EventBus } from "@assets/utils/event-bus";
export default {
  data() {
    return {
      msg: "defaultMsg"
    };
  },
  created() {
    EventBus.$on("aMsg", msg => {
      // A發送來的消息
      this.msg = msg;
    });
    this.$bus.$on("nameOfEvent", $event => {
      console.log($event);
    });
  }
};
</script>

插件掛載方式

1、定義一個統一事件管理器

// 插件掛載方式
import Vue from 'vue'
// Bus 就是一個Vue對象,因此Vue.$on: 監聽`當前實例`上的自定義事件
let Bus = new Vue()
let install = (Vue) => {
  Vue.prototype.$bus = Bus
}
export default { install }

2、引用EventBus

import Vue from 'vue'
import Bus from '@/assets/js/eventBus'
Vue.use(Bus)

移除事件監聽者

如果想移除事件的監聽,可以像下面這樣操作:

import { 
  eventBus 
} from './event-bus.js'
EventBus.$off('aMsg', {})

你也可以使用 EventBus.$off('aMsg') 來移除應用內所有對此某個事件的監聽。或者直接調用 EventBus.$off() 來移除所有事件頻道,不需要添加任何參數 。

知識點

Vue.$on 監聽 當前實例 上的自定義事件。

事件可以由 vm.$emit 觸發。回調函數會接收所有傳入事件觸發函數的額外參數。

Vue.$off 移除自定義事件監聽器。

vm.$off( [event, callback] )

如果沒有提供參數,則移除所有的事件監聽器;
如果只提供了事件,則移除該事件所有的監聽器;
如果同時提供了事件與回調,則只移除這個回調的監聽器。

發布訂閱模式主要包含哪些內容呢?

  1. 發布函數,發布的時候執行相應的回調
  2. 訂閱函數,添加訂閱者,傳入發布時要執行的函數,可能會攜額外參數
  3. 一個緩存訂閱者以及訂閱者的回調函數的列表
  4. 取消訂閱(需要分情況討論)

自己實現一個 Observer 對象:

//用于存儲訂閱的事件名稱以及回調函數列表的鍵值對
function Observer() {
    this.cache = {}  
}
 
//key:訂閱消息的類型的標識(名稱),fn收到消息之后執行的回調函數
Observer.prototype.on = function (key,fn) {
    if(!this.cache[key]){
        this.cache[key]=[]
    }
    this.cache[key].push(fn)
}
 
//arguments 是發布消息時候攜帶的參數數組
Observer.prototype.emit = function (key) {
    if(this.cache[key]&&this.cache[key].length>0){
        var fns = this.cache[key]
    }
    for(let i=0;i<fns.length;i++){
        Array.prototype.shift.call(arguments)
        fns[i].apply(this,arguments)
    }
}
// remove 的時候需要注意,如果你直接傳入一個匿名函數fn,那么你在remove的時候是無法找到這個函數并且把它移除的,變通方式是傳入一個
//指向該函數的指針,而 訂閱的時候存入的也是這個指針
Observer.prototype.remove = function (key,fn) {
    let fns = this.cache[key]
    if(!fns||fns.length===0){
        return
    }
    //如果沒有傳入fn,那么就是取消所有該事件的訂閱
    if(!fn){
        fns=[]
    }else {
        fns.forEach((item,index)=>{
            if(item===fn){
                fns.splice(index,1)
            }
        })
    }
}
 
//example
 
var obj = new Observer()
obj.on('hello',function (a,b) {
    console.log(a,b)
})
obj.emit('hello',1,2)
//取消訂閱事件的回調必須是具名函數
obj.on('test',fn1 =function () {
    console.log('fn1')
})
obj.on('test',fn2 = function () {
    console.log('fn2')
})
obj.remove('test',fn1)
obj.emit('test')

為什么會使用發布訂閱模式呢? 它的優點在于:

  • 實現時間上的解耦(組件,模塊之間的異步通訊)
  • 對象之間的解耦,交由發布訂閱的對象管理對象之間的耦合關系.

引用:結合 Vue 源碼談談發布-訂閱模式

?著作權歸作者所有,轉載或內容合作請聯系作者
平臺聲明:文章內容(如有圖片或視頻亦包括在內)由作者上傳并發布,文章內容僅代表作者本人觀點,簡書系信息發布平臺,僅提供信息存儲服務。

推薦閱讀更多精彩內容