如何在vue中利用組件傳值實現(xiàn)觀察者模式

今天小編給大家分享一下如何在vue中利用組件傳值實現(xiàn)觀察者模式的相關(guān)知識點(diǎn)，內(nèi)容詳細(xì)，邏輯清晰，相信大部分人都還太了解這方面的知識，所以分享這篇文章給大家參考一下，希望大家閱讀完這篇文章后有所收獲，下面我們一起來了解一下吧。

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

Vue.prototype.$Bus = new Vue()

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

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

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

我們在組件1中寫如下代碼：

<template>
    <div>
        <button @click="send">發(fā)送</button>
    </div>
</template>

<script>
export default {
    methods: {
        send () {
            this.$Bus.$emit("send",'接收的信息')
        }
    }
}
</script>

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

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

<template>
    <div>
        {{message}}
    </div>
</template>

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

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

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

vue的機(jī)制

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

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

那么有沒有更符合觀察者模式特征的？

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

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

var events = require('events');
// 創(chuàng)建 eventEmitter 對象
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接收。所以說，node.js提供了很好的監(jiān)聽機(jī)制，還有他對整個事務(wù)的處理 。其支持了nodejs最特色的I/O模式，比如我們啟動http服務(wù)時會監(jiān)聽其 connect / close，http.request時會監(jiān)聽 data / end等。

還有沒有類似的案例呢？

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

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

觀察者模式存在的意義

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

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

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

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

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

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

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

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

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

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

以上就是“如何在vue中利用組件傳值實現(xiàn)觀察者模式”這篇文章的所有內(nèi)容，感謝各位的閱讀！相信大家閱讀完這篇文章都有很大的收獲，小編每天都會為大家更新不同的知識，如果還想學(xué)習(xí)更多的知識，請關(guān)注億速云行業(yè)資訊頻道。