15 分鐘掌握vue-next響應式原理
寫在前面
最新 vue-next 的原始碼釋出了,雖然是 pre-alpha 版本,但這時候其實是閱讀原始碼的比較好的時機。在 vue 中,比較重要的東西當然要數它的響應式系統,在之前的版本中,已經有若干篇文章對它的響應式原理和實現進行了介紹,這裡就不贅述了。在 vue-next 中,其實現原理和之前還是相同的,即通過觀察者模式和資料劫持,只不過對其實現方式進行了改變。
對於解析原理的文章,我個人是比較喜歡那種“小白”風格的文章,即不要摘錄特別多的程式碼,也不要闡述一些很深奧的原理與概念。在我剛接觸 react 的時候,還記得有一篇利用 jquery 來介紹 react 的文章,從簡入繁,面面俱到,其背後闡述的知識點對我後來學習 react 起到很多的幫助。
因此,這篇文章我也打算按這種風格來寫一下利用最近空閒時間閱讀 vue-next 響應式模組的原始碼的一些心得與體會,算是拋磚引玉,同時實現一個極簡的響應式系統。
如有錯誤,還望指正。
預備知識
無論是閱讀這篇文章,還是閱讀 vue-next 響應式模組的原始碼,首先有兩個知識點是必備的:
- Proxy:es6 中新的代理內建工具類
- Reflect:es6 中新的反射工具類
由於篇幅有限,這裡也不詳細贅述這兩個類的用途與使用方法了,推薦三篇我認為不錯的文章,僅供參考:
介面
對於 vue-next 響應式系統的 RFC,可以參考這裡。雖然距離現在有一段時間了,但是通過閱讀原始碼,可以發現一些影子。
我們大體要實現的效果如下面的程式碼所示:
// 實現兩個方法 reactive 和 effect const state = reactive({ count: 0 }) effect(() => { console.log('count: ', state.count) }) state.count++ // 輸入 count: 1
可以發現我們熟悉的依賴收集階段(同時也是觀察者模式的訂閱過程),是在 effect 中進行的,依賴收集的準備工作(即資料劫持邏輯),是在 reactive 中進行的,而資料變化的觸發響應的邏輯在後面的 state.count++ 程式碼執行時進行(同時也是觀察者模式的釋出過程),之後便會執行之前傳入 effect 內部的回撥函式並輸入 count: 1。
型別與公共變數
由於 vue-next 用 ts 進行了重寫,這裡我也使用 ts 來實現這個極簡版本的響應式系統。主要涉及到的型別和公共變數如下:
type Effect = Function; type EffectMap = Map<string, Effect[]>; let currentEffect: Effect; const effectMap: EffectMap = new Map();
- currentEffect:用來儲存當前正在收集依賴的 effect
- effectMap:代表目標物件每個 key 所對應的依賴於它的 effect 陣列,也可以把它理解為觀察者模式中的訂閱者字典
利用 Proxy 實現資料劫持
在之前的版本中,vue 利用 Object.defineProperty 中的 setter 和 getter 來對資料物件進行劫持,vue-next 則通過 Proxy。眾所周知,Object.defineProperty 所實現的資料劫持是有一定限制的,而 Proxy 就會強大很多。
首先,我們在腦後中,設想一下如何使用 Proxy 來實現資料劫持呢?很簡單,大體結構如下所示:
export function reactive(obj) { const proxied = new Proxy(obj, handlers); return proxied; }
這裡的 handlers 是宣告如何處理各個 trap 的邏輯,比如:
const handlers = { get: function(target, key, receiver) { ... }, set: function(target, key, value, receiver) { ... }, deleteProperty(target, key) { ... } // ...以及其他 trap }
由於這裡是極簡版本的實現,那麼我們就僅僅實現 get 和 set 兩個 trap 就可以了,分別對應依賴收集和觸發響應的邏輯。
依賴收集
對於依賴收集的實現,由於是極簡版本,實現的前提如下:
- 不考慮物件的巢狀
- 不考慮集合型別
- 不考慮基礎型別
- 不考慮對代理物件的處理
哈哈,基本這四點排除之後,這個依賴收集函式就會很輕很薄,如下:
function(target, key: string, receiver) { // 僅僅在某個 effect 內部進行依賴收集 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); }
實現的邏輯很簡單,其實就是觀察者模式中註冊訂閱者的實現邏輯,值得注意的是,這裡對於 target 的賦值邏輯,我們委託給 Reflect 來完成,雖然 target[key] 也是可以工作的,但是使用 Reflect 是更提倡的方式。
觸發響應
觸發響應的邏輯就比較簡單了,其實是對應觀察者模式中,釋出事件的邏輯,如下:
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 來對 target 進行賦值操作,因為它會返回一個 boolean 值代表是否成功,而 set 這個 trap 也需要代表相同含義的值。
通過 reactive 方法來初始化代理物件
實現了資料劫持的代理邏輯之後,我們只需要在 reactive 這個方法中,返回一個代理物件的例項即可,還記的上文中我們在實現之前腦海中浮現的大致程式碼框架嗎?
如下:
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; }
依賴收集的準備工作
上文中提到了,對於依賴收集的工作,我們是有條件地進行的,即在一個 effect 中,我們才會進行收集,其他情況下的取值邏輯,我們則不會進行依賴收集,因此,effect 方法正式為了實現這點而存在的,如下:
export function effect(fn: Function) { const effected = function() { fn(); }; currentEffect = effected; effected(); currentEffect = undefined; return effected; }
之所以實現如此簡單,是因為我們這裡是極簡版本,不需要考慮諸如 readOnly 、異常以及收集時機等因素。可以發現,就是將傳入的回撥函式包裹在另一個方法中,然後將這個方法用 currentEffect 這個變數暫存,之後嘗試執行一下即可。當 effect 執行完畢之後,再將 currentEffect 置空,這樣就可以達到只在 effect 下進行依賴收集的目的。
執行效果
我在 codepen 上簡單寫了一個計數器 demo,連結如下:
https://codepen.io/littlelyon1/pen/mddVPgo
寫在最後
這個極簡的響應式系統雖然能用,但是有很多未考慮的因素,其實就是在上文中被我們忽略的那些前提條件,這裡再列舉一下,並給出原始碼中的解法:
- 基礎資料型別的處理:可以將基礎資料型別封裝為一個 ref 物件,其 value 指向基礎資料型別的值
- 巢狀物件:遞迴進行執行代理過程即可
- 集合物件:編寫專門的 trap 處理邏輯
- 代理例項:快取這些代理例項,下次遇到直接返回即可
但我仍然推薦你直接去閱讀一下原始碼,因為你會發現,原始碼會在這個極簡版本基礎上,利用了更加複雜資料結構以及流程,來控制依賴收集和觸發響應的流程,同時各種特殊情況也有更加明細的考慮。
另外,這僅僅是 vue-next 響應式系統的簡易實現,諸如其他功能模組,比如指令、模板解析、vdom 等,我也準備利用最近的空閒時間再去看看,有時間的話,最近也整理出來,分享給大家。
以上就是本文的全部內容,希望對大家的學習有所幫助,也希望大家多多支援碼農教程。