Vue2.0中觀察者模式的示例分析

這篇文章主要介紹了Vue2.0中觀察者模式的示例分析，具有一定借鑒價(jià)值，感興趣的朋友可以參考下，希望大家閱讀完這篇文章之后大有收獲，下面讓小編帶著大家一起了解一下。

1.Vue1.0 事件的廣播與接收(觀察者模式)

早期vue1.0組件之間的這通信傳遞數(shù)據(jù)的方法，vue官網(wǎng)給出了兩上方法 $dispatch 和 $broadcast。

但vue2.0之后就棄用 這兩個(gè)方法，以下原因是vue官網(wǎng)給出來(lái)的

官方文檔

2.Vue2.0 事件的廣播與接收(觀察者模式)

vue2.0中可以使用 $emit, $on, $off 分別來(lái)分發(fā)、監(jiān)聽(tīng)、取消監(jiān)聽(tīng)事件。官方的給出的最簡(jiǎn)單的升級(jí)建議是使用集中的事件處理器,而且也明確說(shuō)明了 一個(gè)空的vue實(shí)例就可以做到,因?yàn)閂ue 實(shí)例實(shí)現(xiàn)了一個(gè)事件分發(fā)接口.

請(qǐng)直接看代碼,在初始化的時(shí)候，在全局App.vue文件中給data添加一個(gè) 名字為eventhub 的空vue對(duì)象：

new Vue({
 el: '#app',
 router,
 render: h => h(App),
 data: {
  eventHub: new Vue()
 }
})

這樣我們就可以在任何組件都可以調(diào)用事件發(fā)射接收的方法了.那么在組件是如何發(fā)射與接收的呢？請(qǐng)看正面代碼 ：

某一個(gè)組件內(nèi)調(diào)用事件觸發(fā)

//通過(guò)this.$root.eventHub獲取此對(duì)象
//調(diào)用$emit 方法
this.$root.eventHub.$emit('你的事件名字', 你的需要傳送的數(shù)據(jù))

以上就是一個(gè)組件發(fā)射了一個(gè)事件 ，可以理解成我發(fā)送了一個(gè)廣播，如果其它組件有需要我的廣播，那么請(qǐng)調(diào)整到我的頻道，這個(gè)頻道就是你的事件名字，而廣播的內(nèi)容就是你傳送的數(shù)據(jù)，那么問(wèn)題了，其它組件是用什么方法來(lái)接收呢？請(qǐng)看代碼

this.$root.eventHub.$on('你的事件名字', (傳送的數(shù)據(jù))=>{
  handle(yourData)
} )

需要收聽(tīng)廣播的組件可以通過(guò)我們?nèi)侄x的eventHub.$on來(lái)接收，接收頻道就是廣播的事件名字，回調(diào)里面有數(shù)就是廣播內(nèi)容。

3.更加簡(jiǎn)潔的寫(xiě)好

對(duì)js有一定的了解，可能知道js有一個(gè)prototype的東西，這個(gè)主要的給js對(duì)象增加額外的屬性。

比如 聲明一個(gè)對(duì)象

var person=function(){
  this.name="小明";
}

然后我們擴(kuò)展一下這個(gè)對(duì)象,比如增加一個(gè)講話的方法,這時(shí)prototype這個(gè)好用的東西就派上用場(chǎng)了

person.prototype.say=function(){
  alert(this.name);
}

這樣就擴(kuò)展了原來(lái)的函數(shù)對(duì)象了

調(diào)用的時(shí)候直接

 var a=new person();

person.say();就會(huì)彈出小明來(lái)了。這么做的好處是不會(huì)額外產(chǎn)生內(nèi)存，所有實(shí)例化后的對(duì)象都會(huì)從原型上繼承這個(gè)方法。

Vue其實(shí)就是js一個(gè)類庫(kù)，當(dāng)然也可以用prototype這個(gè)神奇的東西來(lái)拓展自定義的屬性了，看招：

在初始化Vue.app 之前 加上這樣一句：

Vue.prototype.$eventHub= Vue.prototype.$eventHub || new Vue()

這樣我們?cè)诮M件內(nèi)部 就可以直接調(diào)用$eventHub

以下是對(duì)上面的方法重新 改造:

發(fā)布者

//通過(guò)this.$root.eventHub獲取此對(duì)象
//調(diào)用$emit 方法
this.$eventHub.$emit('你的事件名字', 你的需要傳送的數(shù)據(jù))

接收者

 this.$eventHub.$on('你的事件名字', (傳送)=>{
    handle(yourData).
  } )

4.關(guān)閉廣播

關(guān)閉廣播我們主要通過(guò) $off(你的事件名字)來(lái)取消收聽(tīng)就可以啦!

感謝你能夠認(rèn)真閱讀完這篇文章，希望小編分享的“Vue2.0中觀察者模式的示例分析”這篇文章對(duì)大家有幫助，同時(shí)也希望大家多多支持億速云，關(guān)注億速云行業(yè)資訊頻道，更多相關(guān)知識(shí)等著你來(lái)學(xué)習(xí)!