目錄觀察者模式Vue傳值第一步，我們先在main.js中注冊(cè)一下bus第二步，我們開始發(fā)送消息第三步，在組件三中接收消息vue的機(jī)制觀察者模式存在的意義觀察者模式

首先，提到觀察者模式，這不禁讓我想到了MVVM，MVVM架構(gòu)模式感覺(jué)用到了觀察者的思想。

我們還是按照慣例，了解一下什么是觀察者模式

觀察者模式，類似發(fā)布訂閱模式，完成這個(gè)動(dòng)作首先最少得有兩個(gè)不同的對(duì)象，或者多個(gè)對(duì)象，他更像是一種一隊(duì)多的依賴關(guān)系，也就是一種對(duì)象的狀態(tài)發(fā)生改變，與其相關(guān)所有的對(duì)象的狀態(tài)都會(huì)發(fā)生改變；比如說(shuō)朋友圈這個(gè)功能，一個(gè)人可能有上百個(gè)好友，當(dāng)我發(fā)布一條朋友圈后，所有和我成為好友的人都會(huì)看見這個(gè)朋友圈，當(dāng)另一個(gè)人點(diǎn)贊后，所有你的好友其他點(diǎn)贊的人也會(huì)收到通知，這很像觀察者，也就是我是發(fā)布者，我的好友是訂閱者。

Vue傳值

然后我們看一下什么是vue，vue的原理大家都知道，他是一種自底向上的一種深入響應(yīng)式的雙向綁定模式，即MVVM，也就是說(shuō)，vue關(guān)注model的變化，model的變化讓mvvm框架更新dom，從而產(chǎn)生視圖view變化。

舉一個(gè)項(xiàng)目中很常見的例子：

在寫vue項(xiàng)目中我們都用過(guò)父子組件傳值，但是兄弟組件傳值是怎么實(shí)現(xiàn)的，首先我們可以用vuex，這很常見，但是還有一種方法不知道你用過(guò)沒(méi)有，就是Bus，這個(gè)Bus只是一種命名而已，叫什么無(wú)所謂，你可以叫飛機(jī)大炮都可以，這不重要，我們主要看看他是怎么實(shí)現(xiàn)的：

第一步，我們先在main.js中注冊(cè)一下bus

Vue.prototype.$Bus = new Vue()

我們往vue的原型里注冊(cè)了一個(gè)全局變量$Bus，他的值是vue的實(shí)例，也就是說(shuō)，到現(xiàn)在為止，$Bus里邊有了vue所有的屬性和方法，這下就好操作了

第二步，我們開始發(fā)送消息

這就很符合觀察者模式的發(fā)布訂閱模式

我們?cè)诮M件1中寫如下代碼：

<template> <div><button @click='send'>發(fā)送</button> </div></template><script>export default { methods: {send () { this.$Bus.$emit('send',’接收的信息’)} }}</script>

點(diǎn)擊按鈕發(fā)送一條信息，這個(gè)按鈕也就是充當(dāng)發(fā)布者，我們用到了vue的$emit這個(gè)api，那么訂閱者是什么呢？我不說(shuō)你也應(yīng)該想到了，對(duì)，就是他

第三步，在組件三中接收消息

<template> <div>{{message}} </div></template><script>export default { data () {return { message: ’’} }, mounted () {this.$Bus.$on(’send’, (msg) => { this.message = msg}) }}</script>

就是用$on這個(gè)屬性充當(dāng)接收者

從上可以看出，vue很多地方用到了觀察者的思想，包括他的雙向綁定也是如此

vue的機(jī)制

從上圖我們可以看出，vue是通過(guò)Object.defineProperty實(shí)現(xiàn)對(duì)數(shù)據(jù)的劫持，然后中間做了一個(gè)中轉(zhuǎn)，最后渲染到vue層。

我們可以肯定的是，vue.js借鑒了觀察者模式，但是我感覺(jué)還是有點(diǎn)區(qū)別的，觀察者模式跟注重的是事件驅(qū)動(dòng)，比如我買房這個(gè)動(dòng)作，第一次和銷售了解可能沒(méi)有合適的房源，然后銷售就會(huì)跟你說(shuō)： ‘如果有合適的房源我們會(huì)第一時(shí)間通知你’，當(dāng)有新房源的時(shí)候他會(huì)給你打電話通知你，這一系列的根源是買房這個(gè)事件，他驅(qū)動(dòng)了整套流程。而vue我們都知道是數(shù)據(jù)驅(qū)動(dòng)，也就是只有data里的值發(fā)生改變的話，Object.defineProperty才會(huì)對(duì)他劫持，從而去更新dom，觸發(fā)視圖的更新。

那么有沒(méi)有更符合觀察者模式特征的？

當(dāng)然是node.js的events事件了。

首先我們看看events的工作流程：

var events = require(’events’);// 創(chuàng)建 eventEmitter 對(duì)象var eventEmitter = new events.EventEmitter();// 創(chuàng)建事件處理程序var connectHandler = function connected() { console.log(’連接成功。’); // 觸發(fā) data_received 事件 eventEmitter.emit(’data_received’);}// 綁定 connection 事件處理程序eventEmitter.on(’connection’, connectHandler);// 使用匿名函數(shù)綁定 data_received 事件eventEmitter.on(’data_received’, function(){ console.log(’數(shù)據(jù)接收成功。’);});// 觸發(fā) connection 事件 eventEmitter.emit(’connection’);console.log('程序執(zhí)行完畢。');

輸出一下：

這就完全符合觀察者的工作模式，由emit發(fā)布，由on接收。所以說(shuō)，node.js提供了很好的監(jiān)聽機(jī)制，還有他對(duì)整個(gè)事務(wù)的處理 。其支持了nodejs最特色的I/O模式，比如我們啟動(dòng)http服務(wù)時(shí)會(huì)監(jiān)聽其 connect / close，http.request時(shí)會(huì)監(jiān)聽 data / end等。

還有沒(méi)有類似的案例呢？

當(dāng)然，js有一個(gè)事件監(jiān)聽者----addEventListener,也有點(diǎn)觀察者的意思，具體用法我就不說(shuō)了，想必大家用的都很熟悉。

其實(shí)只要你認(rèn)真想一想，還是有很多地方有觀察者的身影的，最簡(jiǎn)單的就是一個(gè)點(diǎn)擊事件，是不是也有其意思，發(fā)布者是一個(gè)按鈕，而接收者可以是表單，彈層等任何東西。

觀察者模式存在的意義

首先我們說(shuō)說(shuō)他的優(yōu)點(diǎn)：

1，觀察者模式需要在觀察者和被觀察者之間建立一個(gè)耦合，他需要一個(gè)更加抽象化將二者聯(lián)系在一起

2，觀察者模式支持廣播，也就是一對(duì)多的關(guān)系，這就讓我們很容易想到一個(gè)技術(shù)，就是socket，具體可以參考vue項(xiàng)目使用websocket技術(shù)

然鵝，他也是優(yōu)缺點(diǎn)的：

1，創(chuàng)建訂閱者本身要消耗一定的時(shí)間和內(nèi)存

2，當(dāng)訂閱一個(gè)消息時(shí)，也許此消息并沒(méi)有發(fā)生，但這個(gè)訂閱者會(huì)始終存在內(nèi)存中。

3，觀察者模式弱化了對(duì)象之間的聯(lián)系，這本是好事情，但如果過(guò)度使用，對(duì)象與對(duì)象之間的聯(lián)系也會(huì)被隱藏的很深，會(huì)導(dǎo)致項(xiàng)目的難以跟蹤維護(hù)和理解。

等會(huì)兒，還有一個(gè)模式叫發(fā)布訂閱模式，很多人都以為他就是觀察者模式（包括我），后來(lái)我上網(wǎng)查了一下，發(fā)現(xiàn)他們還是有區(qū)別的，我們可以說(shuō)觀察者模式和發(fā)布訂閱模式很像，真的很像，但是本質(zhì)還是有點(diǎn)區(qū)別的，最根本的就是調(diào)度中心不同。

舉個(gè)例子，觀察者模式更注重是目標(biāo)和觀察者是抽象類，比如天氣預(yù)報(bào)，觀察者A負(fù)責(zé)監(jiān)聽天氣的變化，而B想得知天氣的變化需要將自己注冊(cè)到A中，而天氣變化的時(shí)候A觸發(fā)天氣變化，調(diào)度B的接口更新變化。

而發(fā)布訂閱模式是如何完成這個(gè)動(dòng)作的呢？A想要感知天氣變化，需要B這個(gè)調(diào)度中心，而B得到天氣變化需要依賴C的觸發(fā)，可能我解釋的不是很清楚，網(wǎng)上有兩個(gè)圖比較好

以上就是詳解從vue的組件傳值著手觀察者模式的詳細(xì)內(nèi)容，更多關(guān)于從vue的組件傳值著手觀察者模式的資料請(qǐng)關(guān)注好吧啦網(wǎng)其它相關(guān)文章！