詳解從vue的組件傳值著手觀察者模式
首先,提到觀察者模式,這不禁讓我想到了MVVM,MVVM架構(gòu)模式感覺用到了觀察者的思想。
我們還是按照慣例,了解一下什么是觀察者模式
觀察者模式,類似發(fā)布訂閱模式,完成這個(gè)動作首先最少得有兩個(gè)不同的對象,或者多個(gè)對象,他更像是一種一隊(duì)多的依賴關(guān)系,也就是一種對象的狀態(tài)發(fā)生改變,與其相關(guān)所有的對象的狀態(tài)都會發(fā)生改變;比如說朋友圈這個(gè)功能,一個(gè)人可能有上百個(gè)好友,當(dāng)我發(fā)布一條朋友圈后,所有和我成為好友的人都會看見這個(gè)朋友圈,當(dāng)另一個(gè)人點(diǎn)贊后,所有你的好友其他點(diǎn)贊的人也會收到通知,這很像觀察者,也就是我是發(fā)布者,我的好友是訂閱者。
Vue傳值然后我們看一下什么是vue,vue的原理大家都知道,他是一種自底向上的一種深入響應(yīng)式的雙向綁定模式,即MVVM,也就是說,vue關(guān)注model的變化,model的變化讓mvvm框架更新dom,從而產(chǎn)生視圖view變化。
舉一個(gè)項(xiàng)目中很常見的例子:
在寫vue項(xiàng)目中我們都用過父子組件傳值,但是兄弟組件傳值是怎么實(shí)現(xiàn)的,首先我們可以用vuex,這很常見,但是還有一種方法不知道你用過沒有,就是Bus,這個(gè)Bus只是一種命名而已,叫什么無所謂,你可以叫飛機(jī)大炮都可以,這不重要,我們主要看看他是怎么實(shí)現(xiàn)的:
第一步,我們先在main.js中注冊一下busVue.prototype.$Bus = new Vue()
我們往vue的原型里注冊了一個(gè)全局變量$Bus,他的值是vue的實(shí)例,也就是說,到現(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ā)送一條信息,這個(gè)按鈕也就是充當(dāng)發(fā)布者,我們用到了vue的$emit這個(gè)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這個(gè)屬性充當(dāng)接收者
從上可以看出,vue很多地方用到了觀察者的思想,包括他的雙向綁定也是如此
vue的機(jī)制從上圖我們可以看出,vue是通過Object.defineProperty實(shí)現(xiàn)對數(shù)據(jù)的劫持,然后中間做了一個(gè)中轉(zhuǎn),最后渲染到vue層。
我們可以肯定的是,vue.js借鑒了觀察者模式,但是我感覺還是有點(diǎn)區(qū)別的,觀察者模式跟注重的是事件驅(qū)動,比如我買房這個(gè)動作,第一次和銷售了解可能沒有合適的房源,然后銷售就會跟你說: ‘如果有合適的房源我們會第一時(shí)間通知你’,當(dāng)有新房源的時(shí)候他會給你打電話通知你,這一系列的根源是買房這個(gè)事件,他驅(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ī)制,還有他對整個(gè)事務(wù)的處理 。其支持了nodejs最特色的I/O模式,比如我們啟動http服務(wù)時(shí)會監(jiān)聽其 connect / close,http.request時(shí)會監(jiān)聽 data / end等。
還有沒有類似的案例呢?
當(dāng)然,js有一個(gè)事件監(jiān)聽者----addEventListener,也有點(diǎn)觀察者的意思,具體用法我就不說了,想必大家用的都很熟悉。
其實(shí)只要你認(rèn)真想一想,還是有很多地方有觀察者的身影的,最簡單的就是一個(gè)點(diǎn)擊事件,是不是也有其意思,發(fā)布者是一個(gè)按鈕,而接收者可以是表單,彈層等任何東西。
觀察者模式存在的意義首先我們說說他的優(yōu)點(diǎn):
1,觀察者模式需要在觀察者和被觀察者之間建立一個(gè)耦合,他需要一個(gè)更加抽象化將二者聯(lián)系在一起
2,觀察者模式支持廣播,也就是一對多的關(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í),也許此消息并沒有發(fā)生,但這個(gè)訂閱者會始終存在內(nèi)存中。
3,觀察者模式弱化了對象之間的聯(lián)系,這本是好事情,但如果過度使用,對象與對象之間的聯(lián)系也會被隱藏的很深,會導(dǎo)致項(xiàng)目的難以跟蹤維護(hù)和理解。
等會兒,還有一個(gè)模式叫發(fā)布訂閱模式,很多人都以為他就是觀察者模式(包括我),后來我上網(wǎng)查了一下,發(fā)現(xiàn)他們還是有區(qū)別的,我們可以說觀察者模式和發(fā)布訂閱模式很像,真的很像,但是本質(zhì)還是有點(diǎn)區(qū)別的,最根本的就是調(diào)度中心不同。
舉個(gè)例子,觀察者模式更注重是目標(biāo)和觀察者是抽象類,比如天氣預(yù)報(bào),觀察者A負(fù)責(zé)監(jiān)聽天氣的變化,而B想得知天氣的變化需要將自己注冊到A中,而天氣變化的時(shí)候A觸發(fā)天氣變化,調(diào)度B的接口更新變化。
而發(fā)布訂閱模式是如何完成這個(gè)動作的呢?A想要感知天氣變化,需要B這個(gè)調(diào)度中心,而B得到天氣變化需要依賴C的觸發(fā),可能我解釋的不是很清楚,網(wǎng)上有兩個(gè)圖比較好
以上就是詳解從vue的組件傳值著手觀察者模式的詳細(xì)內(nèi)容,更多關(guān)于從vue的組件傳值著手觀察者模式的資料請關(guān)注好吧啦網(wǎng)其它相關(guān)文章!
相關(guān)文章:
1. Python 實(shí)現(xiàn)勞拉游戲的實(shí)例代碼(四連環(huán)、重力四子棋)2. Java GZip 基于內(nèi)存實(shí)現(xiàn)壓縮和解壓的方法3. SpringBoot+TestNG單元測試的實(shí)現(xiàn)4. jsp+servlet簡單實(shí)現(xiàn)上傳文件功能(保存目錄改進(jìn))5. PHP利用COM對象訪問SQLServer、Access6. 利用CSS制作3D動畫7. 一款功能強(qiáng)大的markdown編輯器tui.editor使用示例詳解8. 存儲于xml中需要的HTML轉(zhuǎn)義代碼9. JavaScript數(shù)據(jù)結(jié)構(gòu)之雙向鏈表10. .Net加密神器Eazfuscator.NET?2023.2?最新版使用教程
