這篇文章給大家分享的是有關(guān)vue-next響應(yīng)式原理的示例分析的內(nèi)容。小編覺(jué)得挺實(shí)用的,因此分享給大家做個(gè)參考,一起跟隨小編過(guò)來(lái)看看吧。
預(yù)備知識(shí)
無(wú)論是閱讀這篇文章,還是閱讀 vue-next 響應(yīng)式模塊的源碼,首先有兩個(gè)知識(shí)點(diǎn)是必備的:
Proxy:es6 中新的代理內(nèi)建工具類(lèi)
Reflect:es6 中新的反射工具類(lèi)
由于篇幅有限,這里也不詳細(xì)贅述這兩個(gè)類(lèi)的用途與使用方法了,推薦三篇我認(rèn)為不錯(cuò)的文章,僅供參考:
ES6 Proxies in Depth
ES6 Proxy Traps in Depth
ES6 Reflection in Depth
接口
對(duì)于 vue-next 響應(yīng)式系統(tǒng)的 RFC,可以參考這里。雖然距離現(xiàn)在有一段時(shí)間了,但是通過(guò)閱讀源碼,可以發(fā)現(xiàn)一些影子。
我們大體要實(shí)現(xiàn)的效果如下面的代碼所示:
// 實(shí)現(xiàn)兩個(gè)方法 reactive 和 effect const state = reactive({ count: 0 }) effect(() => { console.log('count: ', state.count) }) state.count++ // 輸入 count: 1
可以發(fā)現(xiàn)我們熟悉的依賴(lài)收集階段(同時(shí)也是觀(guān)察者模式的訂閱過(guò)程),是在 effect 中進(jìn)行的,依賴(lài)收集的準(zhǔn)備工作(即數(shù)據(jù)劫持邏輯),是在 reactive 中進(jìn)行的,而數(shù)據(jù)變化的觸發(fā)響應(yīng)的邏輯在后面的 state.count++ 代碼執(zhí)行時(shí)進(jìn)行(同時(shí)也是觀(guān)察者模式的發(fā)布過(guò)程),之后便會(huì)執(zhí)行之前傳入 effect 內(nèi)部的回調(diào)函數(shù)并輸入 count: 1。
類(lèi)型與公共變量
由于 vue-next 用 ts 進(jìn)行了重寫(xiě),這里我也使用 ts 來(lái)實(shí)現(xiàn)這個(gè)極簡(jiǎn)版本的響應(yīng)式系統(tǒng)。主要涉及到的類(lèi)型和公共變量如下:
type Effect = Function; type EffectMap = Map<string, Effect[]>; let currentEffect: Effect; const effectMap: EffectMap = new Map();
currentEffect:用來(lái)儲(chǔ)存當(dāng)前正在收集依賴(lài)的 effect
effectMap:代表目標(biāo)對(duì)象每個(gè) key 所對(duì)應(yīng)的依賴(lài)于它的 effect 數(shù)組,也可以把它理解為觀(guān)察者模式中的訂閱者字典
利用 Proxy 實(shí)現(xiàn)數(shù)據(jù)劫持
在之前的版本中,vue 利用 Object.defineProperty 中的 setter 和 getter 來(lái)對(duì)數(shù)據(jù)對(duì)象進(jìn)行劫持,vue-next 則通過(guò) Proxy。眾所周知,Object.defineProperty 所實(shí)現(xiàn)的數(shù)據(jù)劫持是有一定限制的,而 Proxy 就會(huì)強(qiáng)大很多。
首先,我們?cè)谀X后中,設(shè)想一下如何使用 Proxy 來(lái)實(shí)現(xiàn)數(shù)據(jù)劫持呢?很簡(jiǎn)單,大體結(jié)構(gòu)如下所示:
export function reactive(obj) { const proxied = new Proxy(obj, handlers); return proxied; }
這里的 handlers 是聲明如何處理各個(gè) trap 的邏輯,比如:
const handlers = { get: function(target, key, receiver) { ... }, set: function(target, key, value, receiver) { ... }, deleteProperty(target, key) { ... } // ...以及其他 trap }
由于這里是極簡(jiǎn)版本的實(shí)現(xiàn),那么我們就僅僅實(shí)現(xiàn) get 和 set 兩個(gè) trap 就可以了,分別對(duì)應(yīng)依賴(lài)收集和觸發(fā)響應(yīng)的邏輯。
依賴(lài)收集
對(duì)于依賴(lài)收集的實(shí)現(xiàn),由于是極簡(jiǎn)版本,實(shí)現(xiàn)的前提如下:
不考慮對(duì)象的嵌套
不考慮集合類(lèi)型
不考慮基礎(chǔ)類(lèi)型
不考慮對(duì)代理對(duì)象的處理
哈哈,基本這四點(diǎn)排除之后,這個(gè)依賴(lài)收集函數(shù)就會(huì)很輕很薄,如下:
function(target, key: string, receiver) { // 僅僅在某個(gè) effect 內(nèi)部進(jìn)行依賴(lài)收集 if (currentEffect) { if (effectMap.has(key)) { const effects = effectMap.get(key); if (effects.indexOf(currentEffect) === -1) { effects.push(currentEffect); } } else { effectMap.set(key, [currentEffect]); } } return Reflect.get(target, key, receiver); }
實(shí)現(xiàn)的邏輯很簡(jiǎn)單,其實(shí)就是觀(guān)察者模式中注冊(cè)訂閱者的實(shí)現(xiàn)邏輯,值得注意的是,這里對(duì)于 target 的賦值邏輯,我們委托給 Reflect 來(lái)完成,雖然 target[key] 也是可以工作的,但是使用 Reflect 是更提倡的方式。
觸發(fā)響應(yīng)
觸發(fā)響應(yīng)的邏輯就比較簡(jiǎn)單了,其實(shí)是對(duì)應(yīng)觀(guān)察者模式中,發(fā)布事件的邏輯,如下:
function(target, key: string, value, receiver) { const result = Reflect.set(target, key, value, receiver); if (effectMap.has(key)) { effectMap.get(key).forEach(effect => effect()); } return result; }
同樣,這里使用 Reflect 來(lái)對(duì) target 進(jìn)行賦值操作,因?yàn)樗鼤?huì)返回一個(gè) boolean 值代表是否成功,而 set 這個(gè) trap 也需要代表相同含義的值。
通過(guò) reactive 方法來(lái)初始化代理對(duì)象
實(shí)現(xiàn)了數(shù)據(jù)劫持的代理邏輯之后,我們只需要在 reactive 這個(gè)方法中,返回一個(gè)代理對(duì)象的實(shí)例即可,還記的上文中我們?cè)趯?shí)現(xiàn)之前腦海中浮現(xiàn)的大致代碼框架嗎?
如下:
export function reactive(obj: any) { const proxied = new Proxy(obj, { get: function(target, key: string, receiver) { if (currentEffect) { if (effectMap.has(key)) { const effects = effectMap.get(key); if (effects.indexOf(currentEffect) === -1) { effects.push(currentEffect); } } else { effectMap.set(key, [currentEffect]); } } return Reflect.get(target, key, receiver); }, set: function(target, key: string, value, receiver) { const result = Reflect.set(target, key, value, receiver); if (effectMap.has(key)) { effectMap.get(key).forEach(effect => effect()); } return result; } }); return proxied; }
依賴(lài)收集的準(zhǔn)備工作
上文中提到了,對(duì)于依賴(lài)收集的工作,我們是有條件地進(jìn)行的,即在一個(gè) effect 中,我們才會(huì)進(jìn)行收集,其他情況下的取值邏輯,我們則不會(huì)進(jìn)行依賴(lài)收集,因此,effect 方法正式為了實(shí)現(xiàn)這點(diǎn)而存在的,如下:
export function effect(fn: Function) { const effected = function() { fn(); }; currentEffect = effected; effected(); currentEffect = undefined; return effected; }
之所以實(shí)現(xiàn)如此簡(jiǎn)單,是因?yàn)槲覀冞@里是極簡(jiǎn)版本,不需要考慮諸如 readOnly 、異常以及收集時(shí)機(jī)等因素。可以發(fā)現(xiàn),就是將傳入的回調(diào)函數(shù)包裹在另一個(gè)方法中,然后將這個(gè)方法用 currentEffect 這個(gè)變量暫存,之后嘗試運(yùn)行一下即可。當(dāng) effect 運(yùn)行完畢之后,再將 currentEffect 置空,這樣就可以達(dá)到只在 effect 下進(jìn)行依賴(lài)收集的目的。
感謝各位的閱讀!關(guān)于“vue-next響應(yīng)式原理的示例分析”這篇文章就分享到這里了,希望以上內(nèi)容可以對(duì)大家有一定的幫助,讓大家可以學(xué)到更多知識(shí),如果覺(jué)得文章不錯(cuò),可以把它分享出去讓更多的人看到吧!
另外有需要云服務(wù)器可以了解下創(chuàng)新互聯(lián)scvps.cn,海內(nèi)外云服務(wù)器15元起步,三天無(wú)理由+7*72小時(shí)售后在線(xiàn),公司持有idc許可證,提供“云服務(wù)器、裸金屬服務(wù)器、高防服務(wù)器、香港服務(wù)器、美國(guó)服務(wù)器、虛擬主機(jī)、免備案服務(wù)器”等云主機(jī)租用服務(wù)以及企業(yè)上云的綜合解決方案,具有“安全穩(wěn)定、簡(jiǎn)單易用、服務(wù)可用性高、性?xún)r(jià)比高”等特點(diǎn)與優(yōu)勢(shì),專(zhuān)為企業(yè)上云打造定制,能夠滿(mǎn)足用戶(hù)豐富、多元化的應(yīng)用場(chǎng)景需求。
本文題目:vue-next響應(yīng)式原理的示例分析-創(chuàng)新互聯(lián)
本文地址:http://www.chinadenli.net/article10/dhsodo.html
成都網(wǎng)站建設(shè)公司_創(chuàng)新互聯(lián),為您提供全網(wǎng)營(yíng)銷(xiāo)推廣、品牌網(wǎng)站制作、軟件開(kāi)發(fā)、外貿(mào)網(wǎng)站建設(shè)、網(wǎng)站排名、網(wǎng)站建設(shè)
聲明:本網(wǎng)站發(fā)布的內(nèi)容(圖片、視頻和文字)以用戶(hù)投稿、用戶(hù)轉(zhuǎn)載內(nèi)容為主,如果涉及侵權(quán)請(qǐng)盡快告知,我們將會(huì)在第一時(shí)間刪除。文章觀(guān)點(diǎn)不代表本網(wǎng)站立場(chǎng),如需處理請(qǐng)聯(lián)系客服。電話(huà):028-86922220;郵箱:631063699@qq.com。內(nèi)容未經(jīng)允許不得轉(zhuǎn)載,或轉(zhuǎn)載時(shí)需注明來(lái)源: 創(chuàng)新互聯(lián)
猜你還喜歡下面的內(nèi)容