日韩无码专区无码一级三级片|91人人爱网站中日韩无码电影|厨房大战丰满熟妇|AV高清无码在线免费观看|另类AV日韩少妇熟女|中文日本大黄一级黄色片|色情在线视频免费|亚洲成人特黄a片|黄片wwwav色图欧美|欧亚乱色一区二区三区

RELATEED CONSULTING
相關咨詢
選擇下列產品馬上在線溝通
服務時間：8:30-17:00
你可能遇到了下面的問題
關閉右側工具欄

新聞中心

這里有您想知道的互聯(lián)網營銷解決方案
Vue3響應式原理及實現(xiàn)

從零開始實現(xiàn)你自己的響應式庫，從零開始實現(xiàn) Vue 3 響應式模塊。

站在用戶的角度思考問題，與客戶深入溝通，找到濱湖網站設計與濱湖網站推廣的解決方案，憑借多年的經驗，讓設計與互聯(lián)網技術結合，創(chuàng)造個性化、用戶體驗好的作品，建站類型包括：網站設計、網站制作、企業(yè)官網、英文網站、手機端網站、網站推廣、主機域名、網站空間、企業(yè)郵箱。業(yè)務覆蓋濱湖地區(qū)。

本文完整內容見buid-your-own-vue-next

1. 實現(xiàn)響應式

響應基本類型變量

首先看一下響應式預期應該是什么樣的，新建一個 demo.js 文件，內容如下：

 
 
 
    
  
  
  
  1. // 這種寫成一行完全是為了節(jié)省空間，實際上我會一行一個變量 
    2. 
  
  
  
  2. let a = 1, b = 2, c = a * b 
    3. 
  
  
  
  3. console.log('c:' + c) // 2 
    4. 
  
  
  
  4. a = 2 
    5. 
  
  
  
  5. console.log('c:' + c) // 期望得到4
    6.

思考一下，如何才能做到當 a 變動時 c 跟著變化？

顯然，我們需要做的就是重新執(zhí)行一下 let c = a * b 即可，像這樣：

 
 
 
    
  
  
  
  1. let a = 1, b = 2, c = a * b 
    2. 
  
  
  
  2. console.log('c:' + c) // 2 
    3. 
  
  
  
  3. a = 2 
    4. 
  
  
  
  4. c = a * b 
    5. 
  
  
  
  5. console.log('c:' + c) // 期望得到4
    6.

那么，現(xiàn)在我們把需要重新執(zhí)行的代碼寫成一個函數(shù)，代碼如下：

 
 
 
    
  
  
  
  1. let a = 1, b = 2, c = 0 
    2. 
  
  
  
  2. let effect = () => { c = a * b } 
    3. 
  
  
  
  3. effect() // 首次執(zhí)行更新c的值 
    4. 
  
  
  
  4. console.log('c:' + c) // 2 
    5. 
  
  
  
  5. a = 2 
    6. 
  
  
  
  6. console.log('c:' + c) // 期望得到4
    7.

現(xiàn)在仍然沒有達成預期的效果，實際上我們還需要兩個方法，一個用來存儲所有需要依賴更新的 effect，我們假設叫 track，一個用來觸發(fā)執(zhí)行這些 effect 函數(shù)，假設叫做 trigger。

注意： 這里我們的函數(shù)命名和 Vue 3 中保持一致，從而可以更容易理解 Vue 3 源碼。

代碼類似這樣：

 
 
 
    
  
  
  
  1. let a = 1, b = 2, c = 0 
    2. 
  
  
  
  2. let effect = () => { c = a * b } 
    3. 
  
  
  
  3. track() // 收集 effect  
    4. 
  
  
  
  4. effect() // 首次執(zhí)行更新c的值 
    5. 
  
  
  
  5. console.log('c:' + c) // 2 
    6. 
  
  
  
  6. a = 2 
    7. 
  
  
  
  7. trigger() // a變化時，觸發(fā)effect的執(zhí)行 
    8. 
  
  
  
  8. console.log('c:' + c) // 期望得到4
    9.

那么 track 和 trigger 分別做了什么，是如何實現(xiàn)的呢？我們暫且可以簡單理解為一個“發(fā)布-訂閱者模式”，track 就是不斷給一個數(shù)組 dep 添加 effect，trigger 用來遍歷執(zhí)行 dep 的每一項 effect。

現(xiàn)在來完成這兩個函數(shù)

 
 
 
    
  
  
  
  1. let a = 1, b = 2, c = 0 
    2. 
  
  
  
  2. let effect = () => { c = a * b } 
    3. 
  
  
  
  3. let dep = new Set() 
    4. 
  
  
  
  4. let track = () => { dep.add(effect) } 
    5. 
  
  
  
  5. let trigger = () => { dep.forEach(effect => effect()) } 
    6. 
  
  
  
  6. track() 
    7. 
  
  
  
  7. effect() // 首次執(zhí)行更新c的值 
    8. 
  
  
  
  8. console.log('c:' + c) // 2 
    9. 
  
  
  
  9. a = 2
    10. 
  
  
  
  10. trigger() // a變化時，觸發(fā)effect的執(zhí)行 
    11. 
  
  
  
  11. console.log('c:' + c) // 期望得到4，實際得到4
    12.

注意這里我們使用 Set 來定義 dep，原因就是 Set 本身不能添加重復的 key，讀寫都非常方便。

現(xiàn)在代碼的執(zhí)行結果已經符合預期了。

 
 
 
    
  
  
  
  1. c: 2 
    2. 
  
  
  
  2. c: 4
    3.

響應對象的不同屬性

通常情況，我們定義的對象都有很多的屬性，每一個屬性都需要有自己的 dep（即每個屬性都需要把那些依賴了自己的effect記錄下來放進自己的 new Set() 中），如何來實現(xiàn)這樣的功能呢？

有一段代碼如下：

 
 
 
    
  
  
  
  1. let obj = { a: 10, b: 20 } 
    2. 
  
  
  
  2. let timesA = obj.a * 10 
    3. 
  
  
  
  3. let divideA = obj.a / 10 
    4. 
  
  
  
  4. let timesB = obj.b * 10 
    5. 
  
  
  
  5. let divideB = obj.b / 10 
    6. 
  
  
  
  6. // 100, 1, 200, 2 
    7. 
  
  
  
  7. console.log(`${timesA}, ${divideA}, ${timesB}, ${divideB}`) 
    8. 
  
  
  
  8. obj.a = 100 
    9. 
  
  
  
  9. obj.b = 200 
    10. 
  
  
  
  10. // 期望得到 1000, 10, 2000, 20 
    11. 
  
  
  
  11. console.log(`${timesA}, ${divideA}, ${timesB}, ${divideB}`)
    12.

這段代碼中，按照上文講解的，屬性a和b的dep應該是如下：

 
 
 
    
  
  
  
  1. let depA = [ 
    2. 
  
  
  
  2.   () => { timesA = obj.a * 10 }, 
    3. 
  
  
  
  3.   () => { divideA = obj.a / 10 } 
    4. 
  
  
  
  4. ] 
    5. 
  
  
  
  5. let depB = [  
    6. 
  
  
  
  6.   () => { timesB = obj.b * 10 }, 
    7. 
  
  
  
  7.   () => { divideB = obj.b / 10 } 
    8. 
  
  
  
  8. ]
    9.

如果代碼還是按照前文的方式來寫顯然是不科學的，這里就要開始做一點點抽象了，收集依賴我們可以假想用track('a') track('b')這種形式分別記錄對象不同key的依賴項，那么顯然我們還需要一個東西來存放這些 key 及相應的dep。

現(xiàn)在我們來實現(xiàn)這樣的 track 函數(shù)及對應的 trigger 函數(shù)，代碼如下：

 
 
 
    
  
  
  
  1. const depsMap = new Map() // 每一項都是一個 Set 對象 
    2. 
  
  
  
  2. function track(key) { 
    3. 
  
  
  
  3.   let dep = depsMap.get(key) 
    4. 
  
  
  
  4.   if(!dep) { 
    5. 
  
  
  
  5.     depsMap.set(key, dep = new Set()); 
    6. 
  
  
  
  6.   }
    7. 
  
  
  
  7.    dep.add(effect) 
    8. 
  
  
  
  8. } 
    9. 
  
  
  
  9. function trigger(key) { 
    10. 
  
  
  
  10.   let dep = depsMap.get(key) 
    11. 
  
  
  
  11.   if(dep) { 
    12. 
  
  
  
  12.     dep.forEach(effect => effect()) 
    13. 
  
  
  
  13.   } 
    14. 
  
  
  
  14. }
    15.

這樣就實現(xiàn)了對一個對象不同屬性的依賴收集，那么現(xiàn)在這個代碼最簡單的使用方法將是下面這樣：

 
 
 
    
  
  
  
  1. const depsMap = new Map() // 每一項都是一個 Set 對象 
    2. 
  
  
  
  2. function track(key) {
    3. 
  
  
  
  3.   ... 
    4. 
  
  
  
  4.   // only for usage demo 
    5. 
  
  
  
  5.   if(key === 'a'){ 
    6. 
  
  
  
  6.     dep.add(effectTimesA) 
    7. 
  
  
  
  7.     dep.add(effectDivideA) 
    8. 
  
  
  
  8.   }else if(key === 'b'){ 
    9. 
  
  
  
  9.     dep.add(effectTimesB) 
    10. 
  
  
  
  10.     dep.add(effectDivideB) 
    11. 
  
  
  
  11.   } 
    12. 
  
  
  
  12. } 
    13. 
  
  
  
  13. function trigger(key) { 
    14. 
  
  
  
  14.   ... 
    15. 
  
  
  
  15. } 
    16. 
  
  
  
  16. let obj = { a: 10, b: 20 } 
    17. 
  
  
  
  17. let timesA = 0 
    18. 
  
  
  
  18. let divideA = 0 
    19. 
  
  
  
  19. let timesB = 0 
    20. 
  
  
  
  20. let divideB = 0 
    21. 
  
  
  
  21. let effectTimesA = () => { timesA = obj.a * 10 } 
    22. 
  
  
  
  22. let effectDivideA = () => { divideA = obj.a / 10 } 
    23. 
  
  
  
  23. let effectTimesB = () => { timesB = obj.b * 10 } 
    24. 
  
  
  
  24. let effectDivideB = () => { divideB = obj.b / 10 } 
    25. 
  
  
  
  25. track('a') 
    26. 
  
  
  
  26. track('b') 
    27. 
  
  
  
  27. // 為了省事直接改成調用trigger，后文同樣 
    28. 
  
  
  
  28. trigger('a') 
    29. 
  
  
  
  29. trigger('b') 
    30. 
  
  
  
  30. // 100, 1, 200, 2 
    31. 
  
  
  
  31. console.log(`${timesA}, ${divideA}, ${timesB}, ${divideB}`) 
    32. 
  
  
  
  32. obj.a = 100 
    33. 
  
  
  
  33. obj.b = 200 
    34. 
  
  
  
  34. trigger('a') 
    35. 
  
  
  
  35. trigger('b') 
    36. 
  
  
  
  36. // 期望得到：1000, 10, 2000, 20 實際得到：1000, 10, 2000, 20 
    37. 
  
  
  
  37. console.log(`${timesA}, ${divideA}, ${timesB}, ${divideB}`)
    38.

代碼看起來仍然是臃腫無比，別著急，后面的設計會優(yōu)化這個問題。

響應多個對象

我們已經實現(xiàn)了對一個對象的響應編程，那么要對多個對象實現(xiàn)響應式編程該怎么做呢？

腦袋一拍，繼續(xù)往外嵌套一層對象不就可以了嗎？沒錯，你可以用 ES6 中的 WeakMap 輕松實現(xiàn)，WeakMap 剛好可以（只能）把對象當作 key。（題外話，Map 和 WeakMap 的區(qū)別）

我們假想實現(xiàn)后是這樣的效果：

 
 
 
    
  
  
  
  1. let obj1 = { a: 10, b: 20 } 
    2. 
  
  
  
  2. let obj2 = { c: 30, d: 40 } 
    3. 
  
  
  
  3. const targetMap = new WeakMap() 
    4. 
  
  
  
  4. // 省略代碼 
    5. 
  
  
  
  5. // 獲取 obj1 的 depsMap 
    6. 
  
  
  
  6. // 獲取 obj2 的 depsMap 
    7. 
  
  
  
  7. targetMap.set(obj1, "obj1's depsMap") 
    8. 
  
  
  
  8. targetMap.set(obj2, "obj2's depsMap")
    9.

這里暫且不糾結為什么叫 targetMap，現(xiàn)在整體依賴關系如下：

名稱 類型 key 值
targetMap WeakMap object depsMap
depsMap Map property dep
dep Set   effect
  •  targetMap: 存放每個響應式對象（所有屬性）的依賴項
  •  targetMap: 存放響應式對象每個屬性對應的依賴項
  •  dep: 存放某個屬性對應的所有依賴項（當這個對象對應屬性的值發(fā)生變化時，這些依賴項函數(shù)會重新執(zhí)行）

現(xiàn)在我們可以實現(xiàn)這個功能了，核心代碼如下：

 
 
 
    
  
  
  
  1. const targetMap = new WeakMap(); 
    2. 
  
  
  
  2. function track(target, key) { 
    3. 
  
  
  
  3.   let depsMap = targetMap.get(target) 
    4. 
  
  
  
  4.   if(!depsMap){ 
    5. 
  
  
  
  5.     targetMap.set(target, depsMap = new Map())
    6. 
  
  
  
  6.   } 
    7. 
  
  
  
  7.   let dep = depsMap.get(key) 
    8. 
  
  
  
  8.   if(!dep) { 
    9. 
  
  
  
  9.     depsMap.set(key, dep = new Set()); 
    10. 
  
  
  
  10.   } 
    11. 
  
  
  
  11.   // 先忽略這個 
    12. 
  
  
  
  12.   dep.add(effect) 
    13. 
  
  
  
  13. } 
    14. 
  
  
  
  14. function trigger(target, key) { 
    15. 
  
  
  
  15.   let depsMap = targetMap.get(target) 
    16. 
  
  
  
  16.   if(depsMap){ 
    17. 
  
  
  
  17.     let dep = depsMap.get(key) 
    18. 
  
  
  
  18.     if(dep) { 
    19. 
  
  
  
  19.       dep.forEach(effect => effect()) 
    20. 
  
  
  
  20.     } 
    21. 
  
  
  
  21.   } 
    22. 
  
  
  
  22. }
    23.

那么現(xiàn)在這個代碼最簡單的使用方法將是下面這樣：

 
 
 
    
  
  
  
  1. const targetMap = new WeakMap(); 
    2. 
  
  
  
  2. function track(target, key) { 
    3. 
  
  
  
  3.   ... 
    4. 
  
  
  
  4.   // only for usage demo 
    5. 
  
  
  
  5.   if(key === 'a'){ 
    6. 
  
  
  
  6.     dep.add(effectTimesA) 
    7. 
  
  
  
  7.     dep.add(effectDivideA) 
    8. 
  
  
  
  8.   } 
    9. 
  
  
  
  9. }
    10. 
  
  
  
  10. function trigger(target, key) { 
    11. 
  
  
  
  11.   ... 
    12. 
  
  
  
  12. } 
    13. 
  
  
  
  13. let obj = { a: 10, b: 20 } 
    14. 
  
  
  
  14. let timesA = 0 
    15. 
  
  
  
  15. let divideA = 0 
    16. 
  
  
  
  16. let effectTimesA = () => { timesA = obj.a * 10 } 
    17. 
  
  
  
  17. let effectDivideA = () => { divideA = obj.a / 10 } 
    18. 
  
  
  
  18. track(obj, 'a') 
    19. 
  
  
  
  19. trigger(obj, 'a') 
    20. 
  
  
  
  20. console.log(`${timesA}, ${divideA}`) // 100, 1 
    21. 
  
  
  
  21. obj.a = 100 
    22. 
  
  
  
  22. trigger(obj, 'a') 
    23. 
  
  
  
  23. console.log(`${timesA}, ${divideA}`) // 1000, 10
    24.

至此，我們對響應式的基本概念有了了解，我們已經做到了收集所有響應式對象的依賴項，但是現(xiàn)在你可以看到代碼的使用是極其繁瑣的，主要是因為我們還沒實現(xiàn)自動收集依賴項、自動觸發(fā)修改。

2. Proxy 和 Reflect

上一節(jié)講到了我們實現(xiàn)了基本的響應功能，但是我們目前還是手動進行依賴收集和觸發(fā)更新的。

解決這個問題的方法應該是：

  •  當訪問（GET）一個屬性時，我們就調用 track(obj, ) 自動收集依賴項（存儲 effect）
  •  當修改（SET）一個屬性時，我們就調用 trigger(obj, 自動觸發(fā)更新（執(zhí)行存儲的effect）

那么現(xiàn)在問題就是，我們如何在訪問或修改一個屬性時做到這樣的事情？也即是如何攔截這種 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 更詳細的用法。

 
 
 
    
  
  
  
  1. let obj = { a: 1} 
    2. 
  
  
  
  2. let proxiedObj = new Proxy(obj, {}) 
    3. 
  
  
  
  3. console.log(proxiedObj.a) // 1
    4.

這個過程可以表述為，獲取 proxiedObj.a 時，直接去從查找 obj.a然后返回給 proxiedObj，再輸出 proxiedObj.a。

Proxy 的第二個參數(shù)被稱為 handler，handler就是包含捕捉器（trap）的占位符對象，即處理器對象，捕捉器允許我們攔截一些基本的操作，如：

  •  查找屬性
  •  枚舉
  •  函數(shù)的調用

現(xiàn)在我們的示例代碼修改為：

 
 
 
    
  
  
  
  1. let obj = { a: 1} 
    2. 
  
  
  
  2. let proxiedObj = new Proxy(obj, { 
    3. 
  
  
  
  3.   get(target, key) { 
    4. 
  
  
  
  4.     console.log('Get') 
    5. 
  
  
  
  5.     return target[key] 
    6. 
  
  
  
  6.   } 
    7. 
  
  
  
  7. }) 
    8. 
  
  
  
  8. console.log(proxiedObj.a) // 1
    9.

這段代碼中，我們直接使用 target[key] 返回值，它直接返回了原始對象的值，不做任何其它操作，這對于這個簡單的示例來說沒任何問題，。

現(xiàn)在我們看一下下面這段稍微復雜一點的代碼：

 
 
 
    
  
  
  
  1. let obj = { 
    2. 
  
  
  
  2.   a: 1, 
    3. 
  
  
  
  3.   get b() { return this.a } 
    4. 
  
  
  
  4. }
    5. 
  
  
  
  5. let proxiedObj = new Proxy(obj, { 
    6. 
  
  
  
  6.   get(target, key, receiver) { 
    7. 
  
  
  
  7.     return target[key] // 這里的target是obj 
    8. 
  
  
  
  8.   } 
    9. 
  
  
  
  9. }) 
    10. 
  
  
  
  10. let childObj = Object.create(proxiedObj) 
    11. 
  
  
  
  11. childObj.a = 2 
    12. 
  
  
  
  12. console.log(childObj.b) // 期望得到2 實際輸出1
    13.

這段代碼的輸出結果就是錯誤的，這是什么情況？難道是原型繼承寫錯了嗎？我們嘗試把Proxy相關代碼去掉，發(fā)現(xiàn)輸出是正常的......

這個問題其實就出在 return target[key]這一行：

  1.  當讀取 childObj.b 時，childObj 上沒有屬性 b，因此會從原型鏈上查找
  2.  原型鏈是 proxiedObj
  3.  讀取 proxiedObj.b 時，會觸發(fā)Proxy捕捉器（trap）中的 get，這直接從原始對象中返回了 target[key]
  4.  這里target[key] 中 key 是一個 getter，因此這個 getter 中的上下文 this 即為target，這里的 target 就是 obj，因此直接返回了 1。

參考 為什么要使用 Reflect

那么我們怎么解決這個 this 出錯的問題呢？

Reflect

現(xiàn)在我們就可以講講 Reflect 了。你可以在這里查看 Reflect 更詳細的用法。

捕獲器 get 有第三個參數(shù)叫做 receiver。

Proxy 中 handler.get(target, prop, receiver) 中的參數(shù) receiver ：Proxy 或者繼承 Proxy 的對象。

Reflect.get(target, prop, receiver) 中的參數(shù) receiver ：如果target 對象中指定了 getter，receiver 則為 getter 調用時的 this 值。

這確保了當我們的對象從另一個對象繼承了值或函數(shù)時使用 this 值的正確性。

我們修改剛才的示例如下：

 
 
 
    
  
  
  
  1. let obj = { 
    2. 
  
  
  
  2.   a: 1, 
    3. 
  
  
  
  3.   get b() { return this.a } 
    4. 
  
  
  
  4. } 
    5. 
  
  
  
  5. let proxiedObj = new Proxy(obj, { 
    6. 
  
  
  
  6.   // 本例中這里的receiver為調用時的對象childOjb 
    7. 
  
  
  
  7.   get(target, key, receiver) { 
    8. 
  
  
  
  8.     // 這里的target是obj 
    9. 
  
  
  
  9.     // 這意思是把receiver作為this去調用target[key] 
    10. 
  
  
  
  10.     return Reflect.get(target, key, receiver) 
    11. 
  
  
  
  11.   } 
    12. 
  
  
  
  12. }) 
    13. 
  
  
  
  13. let childObj = Object.create(proxiedObj) 
    14. 
  
  
  
  14. childObj.a = 2; 
    15. 
  
  
  
  15. console.log(childObj.b) // 期望得到2 實際輸出1
    16.

現(xiàn)在我們弄清楚了為什么要結合 Reflect 來使用 Proxy，有了這些知識，就可以繼續(xù)完善我們的代碼了。

實現(xiàn)reactive函數(shù)

現(xiàn)在修改我們的示例代碼為：

 
 
 
    
  
  
  
  1. let obj = { a: 1} 
    2. 
  
  
  
  2. let proxiedObj = new Proxy(obj, { 
    3. 
  
  
  
  3.   get(target, key, receiver) { 
    4. 
  
  
  
  4.     console.log('Get') 
    5. 
  
  
  
  5.     return Reflect.get(target, key, receiver) 
    6. 
  
  
  
  6.   } 
    7. 
  
  
  
  7.   set(target, key, value, receiver) { 
    8. 
  
  
  
  8.     console.log('Set') 
    9. 
  
  
  
  9.     return Reflect.set(target, key, value, receiver) 
    10. 
  
  
  
  10.   } 
    11. 
  
  
  
  11. })
    12. 
  
  
  
  12. console.log(proxiedObj.a) // Get 1
    13.

接下來我們要做的就是結合 Proxy 的 handler 和 之前實現(xiàn)了的 track、trigger 來完成一個響應式模塊。

首先，我們來封裝一下 Proxy 相關代碼，和Vue 3保持一致叫reactive。

 
 
 
    
  
  
  
  1. function reactive(target) { 
    2. 
  
  
  
  2.   const handler = { 
    3. 
  
  
  
  3.     get(target, key, receiver) {
    4. 
  
  
  
  4.       return Reflect.get(target, key, receiver) 
    5. 
  
  
  
  5.     }, 
    6. 
  
  
  
  6.     set(target, key, value, receiver) { 
    7. 
  
  
  
  7.       return Reflect.set(target, key, value, receiver) 
    8. 
  
  
  
  8.     } 
    9. 
  
  
  
  9.   } 
    10. 
  
  
  
  10.   return new Proxy(target, handler) 
    11. 
  
  
  
  11. }
    12.

這里有一個問題，當我們每次調用 reactive 時都會重新定義一個 handler 的對象，為了優(yōu)化這個，我們把 handler 提出去，代碼如下：

 
 
 
    
  
  
  
  1. const reactiveHandler = { 
    2. 
  
  
  
  2.   get(target, key, receiver) { 
    3. 
  
  
  
  3.     return Reflect.get(target, key, receiver) 
    4. 
  
  
  
  4.   }, 
    5. 
  
  
  
  5.   set(target, key, value, receiver) { 
    6. 
  
  
  
  6.     return Reflect.set(target, key, value, receiver) 
    7. 
  
  
  
  7.   } 
    8. 
  
  
  
  8. } 
    9. 
  
  
  
  9. function reactive(target) { 
    10. 
  
  
  
  10.   return new Proxy(target, reactiveHandler) 
    11. 
  
  
  
  11. }
    12.

現(xiàn)在把reactive引入到我們的第一節(jié)中最后的示例代碼中。

 
 
 
    
  
  
  
  1. let obj = reactive({ a: 10, b: 20 }) 
    2. 
  
  
  
  2. let timesA = 0 
    3. 
  
  
  
  3. let divideA = 0 
    4. 
  
  
  
  4. let effectTimesA = () => { timesA = obj.a * 10 } 
    5. 
  
  
  
  5. let effectDivideA = () => { divideA = obj.a / 10 } 
    6. 
  
  
  
  6. track(obj, 'a') 
    7. 
  
  
  
  7. trigger(obj, 'a') 
    8. 
  
  
  
  8. console.log(`${timesA}, ${divideA}`) // 100, 1 
    9. 
  
  
  
  9. obj.a = 100 
    10. 
  
  
  
  10. trigger(obj, 'a') 
    11. 
  
  
  
  11. console.log(`${timesA}, ${divideA}`) // 1000, 10
    12.

現(xiàn)在我們要做的是去掉示例代碼中的 track 和 trigger。

回到本節(jié)開頭提出的解決方案，我們已經可以攔截 GET 和 SET 操作了，只需要在適當?shù)臅r候調用 track 和 trigger 方法即可，我們修改 reactiveHandler 代碼如下：

 
 
 
    
  
  
  
  1. const reactiveHandler = { 
    2. 
  
  
  
  2.   get(target, key, receiver) { 
    3. 
  
  
  
  3.     const result = Reflect.get(target, key, receiver) 
    4. 
  
  
  
  4.     track(target, key) 
    5. 
  
  
  
  5.     return result 
    6. 
  
  
  
  6.   }, 
    7. 
  
  
  
  7.   set(target, key, value, receiver) { 
    8. 
  
  
  
  8.     const oldVal = target[key] 
    9. 
  
  
  
  9.     const result = Reflect.set(target, key, value, receiver) 
    10. 
  
  
  
  10.     // 這里判斷條件不對，result為一個布爾值 
    11. 
  
  
  
  11.     if(oldVal !== result){
    12. 
  
  
  
  12.        trigger(target, key) 
    13. 
  
  
  
  13.     } 
    14. 
  
  
  
  14.     return result 
    15. 
  
  
  
  15.   } 
    16. 
  
  
  
  16. }
    17.

現(xiàn)在我們的示例代碼可以精簡為這樣：

 
 
 
    
  
  
  
  1. let obj = reactive({ a: 10, b: 20 }) 
    2. 
  
  
  
  2. let timesA = 0 
    3. 
  
  
  
  3. let divideA = 0 
    4. 
  
  
  
  4. let effectTimesA = () => { timesA = obj.a * 10 } 
    5. 
  
  
  
  5. let effectDivideA = () => { divideA = obj.a / 10 } 
    6. 
  
  
  
  6. // 恢復調用 effect 的形式 
    7. 
  
  
  
  7. effectTimesA() 
    8. 
  
  
  
  8. effectDivideA() 
    9. 
  
  
  
  9. console.log(`${timesA}, ${divideA}`) // 100, 1 
    10. 
  
  
  
  10. obj.a = 100 
    11. 
  
  
  
  11. console.log(`${timesA}, ${divideA}`) // 1000, 10
    12.

我們已經去掉了手動 track 和 trigger 代碼，至此，我們已經實現(xiàn)了 reactive 函數(shù)，看起來和Vue 3源碼差不多了。

但這還有點問題：

  •  track 函數(shù)中的 effect 現(xiàn)在還沒處理，只能手動添加
  •  reactive 現(xiàn)在只能作用于對象，基本類型變量怎么處理？

下一個章節(jié)我們將解決這個問題，讓我們的代碼更加接近Vue 3。

3. activeEffect 和 ref

首先，我們修改一下示例代碼：

 
 
 
    
  
  
  
  1. let obj = reactive({ a: 10, b: 20 }) 
    2. 
  
  
  
  2. let timesA = 0 
    3. 
  
  
  
  3. let effect = () => { timesA = obj.a * 10 } 
    4. 
  
  
  
  4. effect() 
    5. 
  
  
  
  5. console.log(timesA) // 100 
    6. 
  
  
  
  6. obj.a = 100 
    7. 
  
  
  
  7. // 新增一行，使用到obj.a 
    8. 
  
  
  
  8. console.log(obj.a) 
    9. 
  
  
  
  9. console.log(timesA) // 1000
    10.

由上節(jié)知識可以知道，當 effect 執(zhí)行時我們訪問到了 obj.a，因此會觸發(fā) track 收集該依賴 effect。同理，console.log(obj.a) 這一行也同樣觸發(fā)了 track，但這并不是響應式代碼，我們預期不觸發(fā) track。

我們想要的是只在 effect 中的代碼才觸發(fā) track。

能想到怎么來實現(xiàn)嗎？

只響應需要依賴更新的代碼（effect）

首先，我們定義一個變量 shouldTrack，暫且認為它表示是否需要執(zhí)行 track，我們修改 track 代碼，只需要增加一層判斷條件，如下：

 
 
 
    
  
  
  
  1. const targetMap = new WeakMap(); 
    2. 
  
  
  
  2. let shouldTrack = null 
    3. 
  
  
  
  3. function track(target, key) { 
    4. 
  
  
  
  4.   if(shouldTrack){ 
    5. 
  
  
  
  5.     let depsMap = targetMap.get(target) 
    6. 
  
  
  
  6.     if(!depsMap){ 
    7. 
  
  
  
  7.       targetMap.set(target, depsMap = new Map()) 
    8. 
  
  
  
  8.     } 
    9. 
  
  
  
  9.     let dep = depsMap.get(key) 
    10. 
  
  
  
  10.     if(!dep) { 
    11. 
  
  
  
  11.       depsMap.set(key, dep = new Set()); 
    12. 
  
  
  
  12.     } 
    13. 
  
  
  
  13.     // 這里的 effect 為使用時定義的 effect 
    14. 
  
  
  
  14.     // shouldTrack 時應該把對應的 effect 傳進來 
    15. 
  
  
  
  15.     dep.add(effect) 
    16. 
  
  
  
  16.     // 如果有多個就手寫多個 
    17. 
  
  
  
  17.     // dep.add(effect1) 
    18. 
  
  
  
  18.     // ... 
    19. 
  
  
  
  19.   } 
    20. 
  
  
  
  20. }
    21.

現(xiàn)在我們需要解決的就是 shouldTrack 賦值問題，當有需要響應式變動的地方，我們就寫一個 effect 并賦值給 shouldTrack，然后 effect 執(zhí)行完后重置 shouldTrack 為 null，這樣結合剛才修改的 track 函數(shù)就解決了這個問題，思路如下：

 
 
 
    
  
  
  
  1. let shouldTrack = null 
    2. 
  
  
  
  2. // 這里省略 track trigger reactive 代碼 
    3. 
  
  
  
  3. ... 
    4. 
  
  
  
  4. let obj = reactive({ a: 10, b: 20 }) 
    5. 
  
  
  
  5. let timesA = 0
    6. 
  
  
  
  6. let effect = () => { timesA = obj.a * 10 } 
    7. 
  
  
  
  7. shouldTrack = effect // (*)
    8. 
  
  
  
  8. effect() 
    9. 
  
  
  
  9. shouldTrack = null // (*) 
    10. 
  
  
  
  10. console.log(timesA) // 100 
    11. 
  
  
  
  11. obj.a = 100 
    12. 
  
  
  
  12. console.log(obj.a) 
    13. 
  
  
  
  13. console.log(timesA) // 1000
    14.

此時，執(zhí)行到 console.log(obj.a) 時，由于 shouldTrack 值為 null，所以并不會執(zhí)行 track，完美。

完美了嗎？顯然不是，當有很多的 effect 時，你的代碼會變成下面這樣：

 
 
 
    
  
  
  
  1. let effect1 = () => { timesA = obj.a * 10 } 
    2. 
  
  
  
  2. shouldTrack = effect1 // (*) 
    3. 
  
  
  
  3. effect1() 
    4. 
  
  
  
  4. shouldTrack = null // (*) 
    5. 
  
  
  
  5. let effect2 = () => { timesB = obj.a * 10 } 
    6. 
  
  
  
  6. shouldTrack = effect1 // (*) 
    7. 
  
  
  
  7. effect2() 
    8. 
  
  
  
  8. shouldTrack = null // (*)
    9.

我們來優(yōu)化一下這個問題，為了和Vue 3保持一致，這里我們修改 shouldTrack 為 activeEffect，現(xiàn)在它表示當前運行的 effect。

我們把這段重復使用的代碼封裝成函數(shù)，如下：

 
 
 
    
  
  
  
  1. let activeEffect = null 
    2. 
  
  
  
  2. // 這里省略 track trigger reactive 代碼 
    3. 
  
  
  
  3. ... 
    4. 
  
  
  
  4. function effect(eff) { 
    5. 
  
  
  
  5.   activeEffect = eff 
    6. 
  
  
  
  6.   activeEffect() 
    7. 
  
  
  
  7.   activeEffect = null 
    8. 
  
  
  
  8. }
    9.

同時我們還需要修改一下 track 函數(shù)：

 
 
 
    
  
  
  
  1. function track(target, key) { 
    2. 
  
  
  
  2.   if(activeEffect){ 
    3. 
  
  
  
  3.     ... 
    4. 
  
  
  
  4.     // 這里不用再根據(jù)條件手動添加不同的 effect 了！ 
    5. 
  
  
  
  5.     dep.add(activeEffect) 
    6. 
  
  
  
  6.   }
    7. 
  
  
  
  7. }
    8.

那么現(xiàn)在的使用方法就變成了：

 
 
 
    
  
  
  
  1. const targetMap = new WeakMap(); 
    2. 
  
  
  
  2. let activeEffect = null 
    3. 
  
  
  
  3. function effect (eff) { ... } 
    4. 
  
  
  
  4. function track() { ... } 
    5. 
  
  
  
  5. function trigger() { ... } 
    6. 
  
  
  
  6. function reactive() { ... } 
    7. 
  
  
  
  7. let obj = reactive({ a: 10, b: 20 }) 
    8. 
  
  
  
  8. let timesA = 0 
    9. 
  
  
  
  9. let timesB = 0 
    10. 
  
  
  
  10. effect(() => { timesA = obj.a * 10 }) 
    11. 
  
  
  
  11. effect(() => { timesB = obj.b * 10 }) 
    12. 
  
  
  
  12. console.log(timesA) // 100 
    13. 
  
  
  
  13. obj.a = 100 
    14. 
  
  
  
  14. console.log(obj.a) 
    15. 
  
  
  
  15. console.log(timesA) // 1000
    16.

現(xiàn)階段完整代碼

現(xiàn)在新建一個文件reactive.ts，內容就是當前實現(xiàn)的完整響應式代碼：

 
 
 
    
  
  
  
  1. const targetMap = new WeakMap(); 
    2. 
  
  
  
  2. let activeEffect = null 
    3. 
  
  
  
  3. function effect(eff) { 
    4. 
  
  
  
  4.   activeEffect = eff 
    5. 
  
  
  
  5.   activeEffect() 
    6. 
  
  
  
  6.   activeEffect = null 
    7. 
  
  
  
  7. } 
    8. 
  
  
  
  8. function track(target, key) { 
    9. 
  
  
  
  9.   if(activeEffect){ 
    10. 
  
  
  
  10.     let depsMap = targetMap.get(target) 
    11. 
  
  
  
  11.     if(!depsMap){ 
    12. 
  
  
  
  12.       targetMap.set(target, depsMap = new Map()) 
    13. 
  
  
  
  13.     } 
    14. 
  
  
  
  14.     let dep = depsMap.get(key) 
    15. 
  
  
  
  15.     if(!dep) { 
    16. 
  
  
  
  16.       depsMap.set(key, dep = new Set()); 
    17. 
  
  
  
  17.     } 
    18. 
  
  
  
  18.     dep.add(activeEffect) 
    19. 
  
  
  
  19.   } 
    20. 
  
  
  
  20. } 
    21. 
  
  
  
  21. function trigger(target, key) { 
    22. 
  
  
  
  22.   let depsMap = targetMap.get(target) 
    23. 
  
  
  
  23.   if(depsMap){ 
    24. 
  
  
  
  24.     let dep = depsMap.get(key) 
    25. 
  
  
  
  25.     if(dep) { 
    26. 
  
  
  
  26.       dep.forEach(effect => effect()) 
    27. 
  
  
  
  27.     } 
    28. 
  
  
  
  28.   } 
    29. 
  
  
  
  29. } 
    30. 
  
  
  
  30. const reactiveHandler = { 
    31. 
  
  
  
  31.   get(target, key, receiver) { 
    32. 
  
  
  
  32.     const result = Reflect.get(target, key, receiver) 
    33. 
  
  
  
  33.     track(target, key) 
    34. 
  
  
  
  34.     return result 
    35. 
  
  
  
  35.   },
    36. 
  
  
  
  36.    set(target, key, value, receiver) { 
    37. 
  
  
  
  37.     const oldVal = target[key] 
    38. 
  
  
  
  38.     const result = Reflect.set(target, key, value, receiver) 
    39. 
  
  
  
  39.     if(oldVal !== result){ 
    40. 
  
  
  
  40.       trigger(target, key) 
    41. 
  
  
  
  41.     } 
    42. 
  
  
  
  42.     return result 
    43. 
  
  
  
  43.   } 
    44. 
  
  
  
  44. } 
    45. 
  
  
  
  45. function reactive(target) { 
    46. 
  
  
  
  46.   return new Proxy(target, reactiveHandler) 
    47. 
  
  
  
  47. }
    48.

現(xiàn)在我們已經解決了非響應式代碼也觸發(fā)track的問題，同時也解決了上節(jié)中留下的問題：track 函數(shù)中的 effect 只能手動添加。

接下來我們解決上節(jié)中留下的另一個問題：reactive 現(xiàn)在只能作用于對象，基本類型變量怎么處理？

實現(xiàn)ref

修改 demo.js 代碼如下：

 
 
 
    
  
  
  
  1. import { effect, reactive } from "./reactive" 
    2. 
  
  
  
  2. let obj = reactive({ a: 10, b: 20 }) 
    3. 
  
  
  
  3. let timesA = 0 
    4. 
  
  
  
  4. let sum = 0 
    5. 
  
  
  
  5. effect(() => { timesA = obj.a * 10 }) 
    6. 
  
  
  
  6. effect(() => { sum = timesA + obj.b })   
    7. 
  
  
  
  7. obj.a = 100 
    8. 
  
  
  
  8. console.log(sum) // 期望: 1020
    9.

這段代碼并不能實現(xiàn)預期效果，因為當 timesA 正常更新時，我們希望能更新 sum（即重新執(zhí)行 () => { sum = timesA + obj.b }），而實際上由于 timesA 并不是一個響應式對象，沒有 track 其依賴，所以這一行代碼并不會執(zhí)行。

那我們如何才能讓這段代碼正常工作呢？其實我們把基本類型變量包裝成一個對象去調用 reactive 即可。

看過 Vue composition API 的同學可能知道，Vue 3中用一個 ref 函數(shù)來實現(xiàn)把基本類型變量變成響應式對象，通過 .value 獲取值，ref 返回的就是一個 reactive 對象。

實現(xiàn)這樣的一個有 value 屬性的對象有這兩種方法：

  1.  直接給一個對象添加 value 屬性
 
 
 
    
  
  
  
  1. function ref(intialValue) { 
    2. 
  
  
  
  2.   return reactive({ 
    3. 
  
  
  
  3.     value: intialValue 
    4. 
  
  
  
  4.   }) 
    5. 
  
  
  
  5. }
    6.
  1.  用 getter 和 setter 來實現(xiàn)
 
 
 
    
  
  
  
  1. function ref(raw) { 
    2. 
  
  
  
  2.   const r = { 
    3. 
  
  
  
  3.     get value() { 
    4. 
  
  
  
  4.       track(r, 'value') 
    5. 
  
  
  
  5.       return raw 
    6. 
  
  
  
  6.     }, 
    7. 
  
  
  
  7.     set value(newVal) { 
    8. 
  
  
  
  8.       raw = newVal 
    9. 
  
  
  
  9.       trigger(r, 'value) 
    10. 
  
  
  
  10.   &nb                                                
    
                                                文章標題：Vue3響應式原理及實現(xiàn)                                                
    
                                                轉載源于：http://www.5511xx.com/article/cceehed.html