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 對象；
- Vue 3中有一個 isRef 函數，用來判斷一個對象是 ref 對象而不是 reactive 對象，這種判斷在很多場景都是非常有必要的；
- 性能方面考慮，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 對象，如何處理
你也可以自己嘗試着實現它們。