1. 實現響應式
響應基本類型變量
首先看一下響應式預期應該是什么樣的，新建一個 demo.js 文件，內容如下：
//?這種寫成一行完全是為了節省空間，實際上我會一行一個變量??let?a?=?1,?b?=?2,?c?=?a?*?b??console.log('c:'?+?c)?//?2??a?=?2??console.log('c:'?+?c)?//?期望得到4?
思考一下，如何才能做到當 a 變動時 c 跟著變化？
顯然，我們需要做的就是重新執行一下 let c = a * b 即可，像這樣：
let?a?=?1,?b?=?2,?c?=?a?*?b??console.log('c:'?+?c)?//?2??a?=?2??c?=?a?*?b??console.log('c:'?+?c)?//?期望得到4?
那么，現在我們把需要重新執行的代碼寫成一個函數，代碼如下：
let?a?=?1,?b?=?2,?c?=?0??let?effect?=?()?=>?{?c?=?a?*?b?}??effect()?//?首次執行更新c的值??console.log('c:'?+?c)?//?2??a?=?2??console.log('c:'?+?c)?//?期望得到4?
現在仍然沒有達成預期的效果，實際上我們還需要兩個方法，一個用來存儲所有需要依賴更新的 effect，我們假設叫 track，一個用來觸發執行這些 effect 函數，假設叫做 trigger。
注意： 這里我們的函數命名和 Vue 3 中保持一致，從而可以更容易理解 Vue 3 源碼。
代碼類似這樣：
let?a?=?1,?b?=?2,?c?=?0??let?effect?=?()?=>?{?c?=?a?*?b?}??track()?//?收集?effect???effect()?//?首次執行更新c的值??console.log('c:'?+?c)?//?2??a?=?2??trigger()?//?a變化時，觸發effect的執行??console.log('c:'?+?c)?//?期望得到4?
那么 track 和 trigger 分別做了什么，是如何實現的呢？我們暫且可以簡單理解為一個“發布-訂閱者模式”，track 就是不斷給一個數組 dep 添加 effect，trigger 用來遍歷執行 dep 的每一項 effect。
現在來完成這兩個函數
let?a?=?1,?b?=?2,?c?=?0??let?effect?=?()?=>?{?c?=?a?*?b?}??let?dep?=?new?Set()??let?track?=?()?=>?{?dep.add(effect)?}??let?trigger?=?()?=>?{?dep.forEach(effect?=>?effect())?}??track()??effect()?//?首次執行更新c的值??console.log('c:'?+?c)?//?2??a?=?2?trigger()?//?a變化時，觸發effect的執行??console.log('c:'?+?c)?//?期望得到4，實際得到4?
注意這里我們使用 Set 來定義 dep，原因就是 Set 本身不能添加重復的 key，讀寫都非常方便。
現在代碼的執行結果已經符合預期了。
c:?2??c:?4?
響應對象的不同屬性
通常情況，我們定義的對象都有很多的屬性，每一個屬性都需要有自己的 dep（即每個屬性都需要把那些依賴了自己的effect記錄下來放進自己的 new Set() 中），如何來實現這樣的功能呢？
有一段代碼如下：
let?obj?=?{?a:?10,?b:?20?}??let?timesA?=?obj.a?*?10??let?divideA?=?obj.a?/?10??let?timesB?=?obj.b?*?10??let?divideB?=?obj.b?/?10??//?100,?1,?200,?2??console.log(`${timesA},?${divideA},?${timesB},?${divideB}`)??obj.a?=?100??obj.b?=?200??//?期望得到?1000,?10,?2000,?20??console.log(`${timesA},?${divideA},?${timesB},?${divideB}`)?
這段代碼中，按照上文講解的，屬性a和b的dep應該是如下：
let?depA?=?[????()?=>?{?timesA?=?obj.a?*?10?},????()?=>?{?divideA?=?obj.a?/?10?}??]??let?depB?=?[?????()?=>?{?timesB?=?obj.b?*?10?},????()?=>?{?divideB?=?obj.b?/?10?}??]?
如果代碼還是按照前文的方式來寫顯然是不科學的，這里就要開始做一點點抽象了，收集依賴我們可以假想用track('a') track('b')這種形式分別記錄對象不同key的依賴項，那么顯然我們還需要一個東西來存放這些 key 及相應的dep。
現在我們來實現這樣的 track 函數及對應的 trigger 函數，代碼如下：
const?depsMap?=?new?Map()?//?每一項都是一個?Set?對象??function?track(key)?{????let?dep?=?depsMap.get(key)????if(!dep)?{??????depsMap.set(key,?dep?=?new?Set());????}????dep.add(effect)??}??function?trigger(key)?{????let?dep?=?depsMap.get(key)????if(dep)?{??????dep.forEach(effect?=>?effect())????}??}?
這樣就實現了對一個對象不同屬性的依賴收集，那么現在這個代碼最簡單的使用方法將是下面這樣：
const?depsMap?=?new?Map()?//?每一項都是一個?Set?對象??function?track(key)?{???...????//?only?for?usage?demo????if(key?===?'a'){??????dep.add(effectTimesA)??????dep.add(effectDivideA)????}else?if(key?===?'b'){??????dep.add(effectTimesB)??????dep.add(effectDivideB)????}??}??function?trigger(key)?{????...??}??let?obj?=?{?a:?10,?b:?20?}??let?timesA?=?0??let?divideA?=?0??let?timesB?=?0??let?divideB?=?0??let?effectTimesA?=?()?=>?{?timesA?=?obj.a?*?10?}??let?effectDivideA?=?()?=>?{?divideA?=?obj.a?/?10?}??let?effectTimesB?=?()?=>?{?timesB?=?obj.b?*?10?}??let?effectDivideB?=?()?=>?{?divideB?=?obj.b?/?10?}??track('a')??track('b')??//?為了省事直接改成調用trigger，后文同樣??trigger('a')??trigger('b')??//?100,?1,?200,?2??console.log(`${timesA},?${divideA},?${timesB},?${divideB}`)??obj.a?=?100??obj.b?=?200??trigger('a')??trigger('b')??//?期望得到：1000,?10,?2000,?20?實際得到：1000,?10,?2000,?20??console.log(`${timesA},?${divideA},?${timesB},?${divideB}`)?
代碼看起來仍然是臃腫無比，別著急，后面的設計會優化這個問題。
響應多個對象
我們已經實現了對一個對象的響應編程，那么要對多個對象實現響應式編程該怎么做呢？
腦袋一拍，繼續往外嵌套一層對象不就可以了嗎？沒錯，你可以用 ES6 中的 WeakMap 輕松實現，WeakMap 剛好可以（只能）把對象當作 key。（題外話，Map 和 WeakMap 的區別）
我們假想實現后是這樣的效果：
let?obj1?=?{?a:?10,?b:?20?}??let?obj2?=?{?c:?30,?d:?40?}??const?targetMap?=?new?WeakMap()??//?省略代碼??//?獲取?obj1?的?depsMap??//?獲取?obj2?的?depsMap??targetMap.set(obj1,?"obj1's?depsMap")??targetMap.set(obj2,?"obj2's?depsMap")?
這里暫且不糾結為什么叫 targetMap，現在整體依賴關系如下：
名稱類型key值
| targetMap | WeakMap | object | depsMap |
| depsMap | Map | property | dep |
| dep | Set | ? | effect |
- ?targetMap: 存放每個響應式對象（所有屬性）的依賴項
- ?targetMap: 存放響應式對象每個屬性對應的依賴項
- ?dep: 存放某個屬性對應的所有依賴項（當這個對象對應屬性的值發生變化時，這些依賴項函數會重新執行）
現在我們可以實現這個功能了，核心代碼如下：
const?targetMap?=?new?WeakMap();??function?track(target,?key)?{????let?depsMap?=?targetMap.get(target)????if(!depsMap){??????targetMap.set(target,?depsMap?=?new?Map())???}????let?dep?=?depsMap.get(key)????if(!dep)?{??????depsMap.set(key,?dep?=?new?Set());????}????//?先忽略這個????dep.add(effect)??}??function?trigger(target,?key)?{????let?depsMap?=?targetMap.get(target)????if(depsMap){??????let?dep?=?depsMap.get(key)??????if(dep)?{????????dep.forEach(effect?=>?effect())??????}????}??}?
那么現在這個代碼最簡單的使用方法將是下面這樣：
const?targetMap?=?new?WeakMap();??function?track(target,?key)?{????...????//?only?for?usage?demo????if(key?===?'a'){??????dep.add(effectTimesA)??????dep.add(effectDivideA)????}??}?function?trigger(target,?key)?{????...??}??let?obj?=?{?a:?10,?b:?20?}??let?timesA?=?0??let?divideA?=?0??let?effectTimesA?=?()?=>?{?timesA?=?obj.a?*?10?}??let?effectDivideA?=?()?=>?{?divideA?=?obj.a?/?10?}??track(obj,?'a')??trigger(obj,?'a')??console.log(`${timesA},?${divideA}`)?//?100,?1??obj.a?=?100??trigger(obj,?'a')??console.log(`${timesA},?${divideA}`)?//?1000,?10?
至此，我們對響應式的基本概念有了了解，我們已經做到了收集所有響應式對象的依賴項，但是現在你可以看到代碼的使用是極其繁瑣的，主要是因為我們還沒實現自動收集依賴項、自動觸發修改。
2. Proxy 和 Reflect
上一節講到了我們實現了基本的響應功能，但是我們目前還是手動進行依賴收集和觸發更新的。
解決這個問題的方法應該是：
- ?當訪問（GET）一個屬性時，我們就調用 track(obj, <property>) 自動收集依賴項（存儲 effect）
- ?當修改（SET）一個屬性時，我們就調用 trigger(obj, <property> 自動觸發更新（執行存儲的effect）
那么現在問題就是，我們如何在訪問或修改一個屬性時做到這樣的事情？也即是如何攔截這種 GET 和 SET 操作？
Vue 2中我們使用 ES5 中的 Object.defineProperty 來攔截 GET 和 SET。
Vue 3中我們將使用 ES6 中的 Reflect 和 Proxy。（注意：Vue 3不再支持IE瀏覽器，所以可以用比較多的高級特性）
我們先來看一下怎么輸出一個對象的一個屬性值，可以用下面這三種方法：
- ?使用 . => obj.a
- ?使用 [] => obj['a']
- ?使用 ES6 中的 Reflect => Reflect.get(obj, 'a')
這三種方法都是可行的，但是 Reflect 有非常強大的能力，后面會講到。
Proxy
我們先來看看 Proxy，Proxy 是另一個對象的占位符，默認是對這個對象的委托。你可以在這里查看?Proxy?更詳細的用法。
let?obj?=?{?a:?1}??let?proxiedObj?=?new?Proxy(obj,?{})??console.log(proxiedObj.a)?//?1?
這個過程可以表述為，獲取 proxiedObj.a 時，直接去從查找 obj.a然后返回給 proxiedObj，再輸出 proxiedObj.a。
Proxy 的第二個參數被稱為 handler，handler就是包含捕捉器（trap）的占位符對象，即處理器對象，捕捉器允許我們攔截一些基本的操作，如：
現在我們的示例代碼修改為：
let?obj?=?{?a:?1}??let?proxiedObj?=?new?Proxy(obj,?{????get(target,?key)?{??????console.log('Get')??????return?target[key]????}??})??console.log(proxiedObj.a)?//?1?
這段代碼中，我們直接使用 target[key] 返回值，它直接返回了原始對象的值，不做任何其它操作，這對于這個簡單的示例來說沒任何問題，。
現在我們看一下下面這段稍微復雜一點的代碼：
let?obj?=?{????a:?1,????get?b()?{?return?this.a?}??}?let?proxiedObj?=?new?Proxy(obj,?{????get(target,?key,?receiver)?{??????return?target[key]?//?這里的target是obj????}??})??let?childObj?=?Object.create(proxiedObj)??childObj.a?=?2??console.log(childObj.b)?//?期望得到2?實際輸出1?
這段代碼的輸出結果就是錯誤的，這是什么情況？難道是原型繼承寫錯了嗎？我們嘗試把Proxy相關代碼去掉，發現輸出是正常的......
這個問題其實就出在 return target[key]這一行：
?當讀取 childObj.b 時，childObj 上沒有屬性 b，因此會從原型鏈上查找?原型鏈是 proxiedObj?讀取 proxiedObj.b 時，會觸發Proxy捕捉器（trap）中的 get，這直接從原始對象中返回了 target[key]?這里target[key] 中 key 是一個 getter，因此這個 getter 中的上下文 this 即為target，這里的 target 就是 obj，因此直接返回了 1。
參考?為什么要使用 Reflect
那么我們怎么解決這個 this 出錯的問題呢？
Reflect
現在我們就可以講講 Reflect 了。你可以在這里查看 Reflect 更詳細的用法。
捕獲器 get 有第三個參數叫做 receiver。
Proxy 中 handler.get(target, prop, receiver) 中的參數 receiver ：Proxy 或者繼承 Proxy 的對象。
Reflect.get(target, prop, receiver) 中的參數 receiver ：如果target 對象中指定了 getter，receiver 則為 getter 調用時的 this 值。
這確保了當我們的對象從另一個對象繼承了值或函數時使用 this 值的正確性。
我們修改剛才的示例如下：
let?obj?=?{????a:?1,????get?b()?{?return?this.a?}??}??let?proxiedObj?=?new?Proxy(obj,?{????//?本例中這里的receiver為調用時的對象childOjb????get(target,?key,?receiver)?{??????//?這里的target是obj??????//?這意思是把receiver作為this去調用target[key]??????return?Reflect.get(target,?key,?receiver)????}??})??let?childObj?=?Object.create(proxiedObj)??childObj.a?=?2;??console.log(childObj.b)?//?期望得到2?實際輸出1?
現在我們弄清楚了為什么要結合 Reflect 來使用 Proxy，有了這些知識，就可以繼續完善我們的代碼了。
實現reactive函數
現在修改我們的示例代碼為：
let?obj?=?{?a:?1}??let?proxiedObj?=?new?Proxy(obj,?{????get(target,?key,?receiver)?{??????console.log('Get')??????return?Reflect.get(target,?key,?receiver)????}????set(target,?key,?value,?receiver)?{??????console.log('Set')??????return?Reflect.set(target,?key,?value,?receiver)????}??})?console.log(proxiedObj.a)?//?Get?1?
接下來我們要做的就是結合 Proxy 的 handler 和 之前實現了的 track、trigger 來完成一個響應式模塊。
首先，我們來封裝一下 Proxy 相關代碼，和Vue 3保持一致叫reactive。
function?reactive(target)?{????const?handler?=?{??????get(target,?key,?receiver)?{???????return?Reflect.get(target,?key,?receiver)??????},??????set(target,?key,?value,?receiver)?{????????return?Reflect.set(target,?key,?value,?receiver)??????}????}????return?new?Proxy(target,?handler)??}?
這里有一個問題，當我們每次調用 reactive 時都會重新定義一個 handler 的對象，為了優化這個，我們把 handler 提出去，代碼如下：
const?reactiveHandler?=?{????get(target,?key,?receiver)?{??????return?Reflect.get(target,?key,?receiver)????},????set(target,?key,?value,?receiver)?{??????return?Reflect.set(target,?key,?value,?receiver)????}??}??function?reactive(target)?{????return?new?Proxy(target,?reactiveHandler)??}?
現在把reactive引入到我們的第一節中最后的示例代碼中。
let?obj?=?reactive({?a:?10,?b:?20?})??let?timesA?=?0??let?divideA?=?0??let?effectTimesA?=?()?=>?{?timesA?=?obj.a?*?10?}??let?effectDivideA?=?()?=>?{?divideA?=?obj.a?/?10?}??track(obj,?'a')??trigger(obj,?'a')??console.log(`${timesA},?${divideA}`)?//?100,?1??obj.a?=?100??trigger(obj,?'a')??console.log(`${timesA},?${divideA}`)?//?1000,?10?
現在我們要做的是去掉示例代碼中的 track 和 trigger。
回到本節開頭提出的解決方案，我們已經可以攔截 GET 和 SET 操作了，只需要在適當的時候調用 track 和 trigger 方法即可，我們修改 reactiveHandler 代碼如下：
const?reactiveHandler?=?{????get(target,?key,?receiver)?{??????const?result?=?Reflect.get(target,?key,?receiver)??????track(target,?key)??????return?result????},????set(target,?key,?value,?receiver)?{??????const?oldVal?=?target[key]??????const?result?=?Reflect.set(target,?key,?value,?receiver)??????//?這里判斷條件不對，result為一個布爾值??????if(oldVal?!==?result){????????trigger(target,?key)??????}??????return?result????}??}?
現在我們的示例代碼可以精簡為這樣：
let?obj?=?reactive({?a:?10,?b:?20?})??let?timesA?=?0??let?divideA?=?0??let?effectTimesA?=?()?=>?{?timesA?=?obj.a?*?10?}??let?effectDivideA?=?()?=>?{?divideA?=?obj.a?/?10?}??//?恢復調用?effect?的形式??effectTimesA()??effectDivideA()??console.log(`${timesA},?${divideA}`)?//?100,?1??obj.a?=?100??console.log(`${timesA},?${divideA}`)?//?1000,?10?
我們已經去掉了手動 track 和 trigger 代碼，至此，我們已經實現了 reactive 函數，看起來和Vue 3源碼差不多了。
但這還有點問題：
- ?track 函數中的 effect 現在還沒處理，只能手動添加
- ?reactive 現在只能作用于對象，基本類型變量怎么處理？
下一個章節我們將解決這個問題，讓我們的代碼更加接近Vue 3。
3. activeEffect 和 ref
首先，我們修改一下示例代碼：
let?obj?=?reactive({?a:?10,?b:?20?})??let?timesA?=?0??let?effect?=?()?=>?{?timesA?=?obj.a?*?10?}??effect()??console.log(timesA)?//?100??obj.a?=?100??//?新增一行，使用到obj.a??console.log(obj.a)??console.log(timesA)?//?1000?
由上節知識可以知道，當 effect 執行時我們訪問到了 obj.a，因此會觸發 track 收集該依賴 effect。同理，console.log(obj.a) 這一行也同樣觸發了 track，但這并不是響應式代碼，我們預期不觸發 track。
我們想要的是只在 effect 中的代碼才觸發 track。
能想到怎么來實現嗎？
只響應需要依賴更新的代碼（effect）
首先，我們定義一個變量 shouldTrack，暫且認為它表示是否需要執行 track，我們修改 track 代碼，只需要增加一層判斷條件，如下：
const?targetMap?=?new?WeakMap();??let?shouldTrack?=?null??function?track(target,?key)?{????if(shouldTrack){??????let?depsMap?=?targetMap.get(target)??????if(!depsMap){????????targetMap.set(target,?depsMap?=?new?Map())??????}??????let?dep?=?depsMap.get(key)??????if(!dep)?{????????depsMap.set(key,?dep?=?new?Set());??????}??????//?這里的?effect?為使用時定義的?effect??????//?shouldTrack?時應該把對應的?effect?傳進來??????dep.add(effect)??????//?如果有多個就手寫多個??????//?dep.add(effect1)??????//?...????}??}?
現在我們需要解決的就是 shouldTrack 賦值問題，當有需要響應式變動的地方，我們就寫一個 effect 并賦值給 shouldTrack，然后 effect 執行完后重置 shouldTrack 為 null，這樣結合剛才修改的 track 函數就解決了這個問題，思路如下：
let?shouldTrack?=?null??//?這里省略?track?trigger?reactive?代碼??...??let?obj?=?reactive({?a:?10,?b:?20?})??let?timesA?=?0?let?effect?=?()?=>?{?timesA?=?obj.a?*?10?}??shouldTrack?=?effect?//?(*)?effect()??shouldTrack?=?null?//?(*)??console.log(timesA)?//?100??obj.a?=?100??console.log(obj.a)??console.log(timesA)?//?1000?
此時，執行到 console.log(obj.a) 時，由于 shouldTrack 值為 null，所以并不會執行 track，完美。
完美了嗎？顯然不是，當有很多的 effect 時，你的代碼會變成下面這樣：
let?effect1?=?()?=>?{?timesA?=?obj.a?*?10?}??shouldTrack?=?effect1?//?(*)??effect1()??shouldTrack?=?null?//?(*)??let?effect2?=?()?=>?{?timesB?=?obj.a?*?10?}??shouldTrack?=?effect1?//?(*)??effect2()??shouldTrack?=?null?//?(*)?
我們來優化一下這個問題，為了和Vue 3保持一致，這里我們修改 shouldTrack 為 activeEffect，現在它表示當前運行的 effect。
我們把這段重復使用的代碼封裝成函數，如下：
let?activeEffect?=?null??//?這里省略?track?trigger?reactive?代碼??...??function?effect(eff)?{????activeEffect?=?eff????activeEffect()????activeEffect?=?null??}?
同時我們還需要修改一下 track 函數：
function?track(target,?key)?{????if(activeEffect){??????...??????//?這里不用再根據條件手動添加不同的?effect?了！??????dep.add(activeEffect)????}?}?
那么現在的使用方法就變成了：
const?targetMap?=?new?WeakMap();??let?activeEffect?=?null??function?effect?(eff)?{?...?}??function?track()?{?...?}??function?trigger()?{?...?}??function?reactive()?{?...?}??let?obj?=?reactive({?a:?10,?b:?20?})??let?timesA?=?0??let?timesB?=?0??effect(()?=>?{?timesA?=?obj.a?*?10?})??effect(()?=>?{?timesB?=?obj.b?*?10?})??console.log(timesA)?//?100??obj.a?=?100??console.log(obj.a)??console.log(timesA)?//?1000?
現階段完整代碼
現在新建一個文件reactive.ts，內容就是當前實現的完整響應式代碼：
const?targetMap?=?new?WeakMap();??let?activeEffect?=?null??function?effect(eff)?{????activeEffect?=?eff????activeEffect()????activeEffect?=?null??}??function?track(target,?key)?{????if(activeEffect){??????let?depsMap?=?targetMap.get(target)??????if(!depsMap){????????targetMap.set(target,?depsMap?=?new?Map())??????}??????let?dep?=?depsMap.get(key)??????if(!dep)?{????????depsMap.set(key,?dep?=?new?Set());??????}??????dep.add(activeEffect)????}??}??function?trigger(target,?key)?{????let?depsMap?=?targetMap.get(target)????if(depsMap){??????let?dep?=?depsMap.get(key)??????if(dep)?{????????dep.forEach(effect?=>?effect())??????}????}??}??const?reactiveHandler?=?{????get(target,?key,?receiver)?{??????const?result?=?Reflect.get(target,?key,?receiver)??????track(target,?key)??????return?result????},????set(target,?key,?value,?receiver)?{??????const?oldVal?=?target[key]??????const?result?=?Reflect.set(target,?key,?value,?receiver)??????if(oldVal?!==?result){????????trigger(target,?key)??????}??????return?result????}??}??function?reactive(target)?{????return?new?Proxy(target,?reactiveHandler)??}?
現在我們已經解決了非響應式代碼也觸發track的問題，同時也解決了上節中留下的問題：track 函數中的 effect 只能手動添加。
接下來我們解決上節中留下的另一個問題：reactive 現在只能作用于對象，基本類型變量怎么處理？
實現ref
修改 demo.js 代碼如下：
import?{?effect,?reactive?}?from?"./reactive"??let?obj?=?reactive({?a:?10,?b:?20?})??let?timesA?=?0??let?sum?=?0??effect(()?=>?{?timesA?=?obj.a?*?10?})??effect(()?=>?{?sum?=?timesA?+?obj.b?})????obj.a?=?100??console.log(sum)?//?期望:?1020?
這段代碼并不能實現預期效果，因為當 timesA 正常更新時，我們希望能更新 sum（即重新執行 () => { sum = timesA + obj.b }），而實際上由于 timesA 并不是一個響應式對象，沒有 track 其依賴，所以這一行代碼并不會執行。
那我們如何才能讓這段代碼正常工作呢？其實我們把基本類型變量包裝成一個對象去調用 reactive 即可。
看過 Vue composition API 的同學可能知道，Vue 3中用一個 ref 函數來實現把基本類型變量變成響應式對象，通過 .value 獲取值，ref 返回的就是一個 reactive 對象。
實現這樣的一個有 value 屬性的對象有這兩種方法：
?直接給一個對象添加 value 屬性?
function?ref(intialValue)?{????return?reactive({??????value:?intialValue????})??}?
?用 getter 和 setter 來實現?
function?ref(raw)?{????const?r?=?{??????get?value()?{????????track(r,?'value')????????return?raw??????},??????set?value(newVal)?{????????raw?=?newVal????????trigger(r,?'value)??????}????}????return?r??}?
現在我們的示例代碼修改成：
import?{?effect,?reactive?}?from?"./reactive"??function?ref(intialValue)?{????return?reactive({??????value:?intialValue????})??}??let?obj?=?reactive({?a:?10,?b:?20?})??let?timesA?=?ref(0)??let?sum?=?0??effect(()?=>?{?timesA.value?=?obj.a?*?10?})??effect(()?=>?{?sum?=?timesA.value?+?obj.b?})??//?期望:?timesA:?100??sum:?120?實際：timesA:?100??sum:?120??console.log(`timesA:?${timesA.value}??sum:?${sum}`)??obj.a?=?100??//?期望:?timesA:?1000??sum:?1020?實際：timesA:?1000??sum:?1020??console.log(`timesA:?${timesA}??sum:?${sum}`)?
增加了 ref 處理基本類型變量后，我們的示例代碼運行結果符合預期了。至此我們已經解決了遺留問題：reactive 只能作用于對象，基本類型變量怎么處理？
Vue 3中的 ref 是用第二種方法來實現的，現在我們整理一下代碼，把 ref 放到 reactive.j 中。
現階段完整代碼
const?targetMap?=?new?WeakMap();?let?activeEffect?=?null??function?effect(eff)?{????activeEffect?=?eff????activeEffect()????activeEffect?=?null??}??function?track(target,?key)?{????if(activeEffect){??????let?depsMap?=?targetMap.get(target)??????if(!depsMap){????????targetMap.set(target,?depsMap?=?new?Map())??????}?????let?dep?=?depsMap.get(key)??????if(!dep)?{????????depsMap.set(key,?dep?=?new?Set());??????}??????dep.add(activeEffect)????}??}??function?trigger(target,?key)?{????let?depsMap?=?targetMap.get(target)????if(depsMap){??????let?dep?=?depsMap.get(key)??????if(dep)?{????????dep.forEach(effect?=>?effect())?????}????}?}??const?reactiveHandler?=?{????get(target,?key,?receiver)?{??????const?result?=?Reflect.get(target,?key,?receiver)??????track(target,?key)??????return?result????},????set(target,?key,?value,?receiver)?{??????const?oldVal?=?target[key]??????const?result?=?Reflect.set(target,?key,?value,?receiver)??????if(oldVal?!==?result){????????trigger(target,?key)??????}??????return?result????}??}??function?reactive(target)?{????return?new?Proxy(target,?reactiveHandler)??}??function?ref(raw)?{????const?r?=?{??????get?value()?{????????track(r,?'value')????????return?raw??????},??????set?value(newVal)?{????????raw?=?newVal????????trigger(r,?'value)??????}????}????return?r??}?
有同學可能就要問了，為什么不直接用第一種方法實現 ref，而是選擇了比較復雜的第二種方法呢？
主要有三方面原因：
?根據定義，ref 應該只有一個公開的屬性，即 value，如果使用了 reactive 你可以給這個變量增加新的屬性，這其實就破壞了 ref 的設計目的，它應該只用來包裝一個內部的 value 而不應該作為一個通用的 reactive 對象；
? ? 2.? Vue 3中有一個 isRef 函數，用來判斷一個對象是 ref 對象而不是 reactive 對象，這種判斷在很多場景都是非常有必要的；
? ? 3.? 性能方面考慮，Vue 3中的 reactive 做的事情遠比第二種實現 ref 的方法多，比如有各種檢查。
4. Computed
回到上節中最后的示例代碼：
import?{?effect,?reactive,?ref?}?from?"./reactive"??let?obj?=?reactive({?a:?10,?b:?20?})??let?timesA?=?ref(0)??let?sum?=?0??effect(()?=>?{?timesA.value?=?obj.a?*?10?})?effect(()?=>?{?sum?=?timesA.value?+?obj.b?})?
看到 timesA 和 sum 兩個變量，有同學就會說：“這不就是計算屬性嗎，不能像Vue 2一樣用 computed 來表示嗎？” 顯然是可以的，看過 Vue composition API 的同學可能知道，Vue 3中提供了一個 computed 函數。
示例代碼如果使用 computed 將變成這樣：
import?{?effect,?reactive,?computed?}?from?"./reactive"??let?obj?=?reactive({?a:?10,?b:?20?})??let?timesA?=?computed(()?=>?obj.a?*?10)??let?sum?=?computed(()?=>?timesA.value?+?obj.b)?
現在的問題就是如何實現 computed ？
實現computed
我們拿 timesA 前后的改動來說明，思考一下 computed 應該是什么樣的？
?返回響應式對象，也許是 ref()?內部需要執行 effect 函數以收集依賴?
function?computed(getter)?{????const?result?=?ref();????effect(()?=>?result.value?=?getter())????return?result??}?
現在測試一下示例代碼：
import?{?effect,?reactive,?ref?}?from?"./reactive"??let?obj?=?reactive({?a:?10,?b:?20?})??let?timesA?=?computed(()?=>?obj.a?*?10)??let?sum?=?computed(()?=>?timesA.value?+?obj.b)??//?期望:?timesA:?1000??sum:?1020?實際：timesA:?1000??sum:?1020??console.log(`timesA:?${timesA.value}??sum:?${sum.value}`)??obj.a?=?100???//?期望:?timesA:?1000??sum:?1020??console.log(`timesA:?${timesA.value}??sum:?${sum.value}`)?
結果符合預期。
這樣實現看起來很容易，實際上Vue 3中的 computed 支持傳入一個 getter 函數或傳入一個有 get 和 set 的對象，并且有其它操作，這里我們不做實現，感興趣可以去看源碼。
現階段完整代碼
至此我們已經實現了一個簡易版本的響應式庫了，完整代碼如下：
const?targetMap?=?new?WeakMap();??let?activeEffect?=?null??function?effect(eff)?{????activeEffect?=?eff????activeEffect()????activeEffect?=?null??}??function?track(target,?key)?{????if(activeEffect){??????let?depsMap?=?targetMap.get(target)??????if(!depsMap){????????targetMap.set(target,?depsMap?=?new?Map())??????}?????let?dep?=?depsMap.get(key)??????if(!dep)?{????????depsMap.set(key,?dep?=?new?Set());??????}??????dep.add(activeEffect)????}??}??function?trigger(target,?key)?{????let?depsMap?=?targetMap.get(target)????if(depsMap){??????let?dep?=?depsMap.get(key)??????if(dep)?{????????dep.forEach(effect?=>?effect())??????}????}??}??const?reactiveHandler?=?{????get(target,?key,?receiver)?{??????const?result?=?Reflect.get(target,?key,?receiver)??????track(target,?key)??????return?result????},????set(target,?key,?value,?receiver)?{??????const?oldVal?=?target[key]??????const?result?=?Reflect.set(target,?key,?value,?receiver)??????if(oldVal?!==?result){????????trigger(target,?key)??????}??????return?result????}??}??function?reactive(target)?{????return?new?Proxy(target,?reactiveHandler)??}?function?ref(raw)?{????const?r?=?{??????get?value()?{????????track(r,?'value')????????return?raw??????},??????set?value(newVal)?{????????raw?=?newVal????????trigger(r,?'value')??????}????}????return?r??}??function?computed(getter)?{????const?result?=?ref();????effect(()?=>?result.value?=?getter())????return?result??}?
尚存問題
我們現在的代碼非常簡易，有很多細節尚未實現，你都可以在源碼中學習到，比如：
- ?操作一些內置的屬性，如 Symbol.iterator、Array.length 等觸發了 track 如何處理
- ?嵌套的對象，如何遞歸響應
- ?對象某個 key 對應的 value 本身是一個 reactive 對象，如何處理
你也可以自己嘗試著實現它們。
總結
以上是生活随笔為你收集整理的Vue 3响应式原理及实现的全部內容，希望文章能夠幫你解決所遇到的問題。
如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。
