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

RELATEED CONSULTING
相關(guān)咨詢
選擇下列產(chǎn)品馬上在線溝通
服務(wù)時(shí)間：8:30-17:00
你可能遇到了下面的問(wèn)題
關(guān)閉右側(cè)工具欄

新聞中心

這里有您想知道的互聯(lián)網(wǎng)營(yíng)銷(xiāo)解決方案
Vue3響應(yīng)式原理及實(shí)現(xiàn)

從零開(kāi)始實(shí)現(xiàn)你自己的響應(yīng)式庫(kù)，從零開(kāi)始實(shí)現(xiàn) Vue 3 響應(yīng)式模塊。

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

本文完整內(nèi)容見(jiàn)buid-your-own-vue-next

1. 實(shí)現(xiàn)響應(yīng)式

響應(yīng)基本類(lèi)型變量

首先看一下響應(yīng)式預(yù)期應(yīng)該是什么樣的，新建一個(gè) demo.js 文件，內(nèi)容如下：

 
 
 
    
  
  
  
  1. // 這種寫(xiě)成一行完全是為了節(jié)省空間，實(shí)際上我會(huì)一行一個(gè)變量 
    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.

思考一下，如何才能做到當(dāng) a 變動(dòng)時(shí) 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í)行的代碼寫(xiě)成一個(gè)函數(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)在仍然沒(méi)有達(dá)成預(yù)期的效果，實(shí)際上我們還需要兩個(gè)方法，一個(gè)用來(lái)存儲(chǔ)所有需要依賴更新的 effect，我們假設(shè)叫 track，一個(gè)用來(lái)觸發(fā)執(zhí)行這些 effect 函數(shù)，假設(shè)叫做 trigger。

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

代碼類(lèi)似這樣：

 
 
 
    
  
  
  
  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變化時(shí)，觸發(fā)effect的執(zhí)行 
    8. 
  
  
  
  8. console.log('c:' + c) // 期望得到4
    9.

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

現(xiàn)在來(lái)完成這兩個(gè)函數(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變化時(shí)，觸發(fā)effect的執(zhí)行 
    11. 
  
  
  
  11. console.log('c:' + c) // 期望得到4，實(shí)際得到4
    12.

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

現(xiàn)在代碼的執(zhí)行結(jié)果已經(jīng)符合預(yù)期了。

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

響應(yīng)對(duì)象的不同屬性

通常情況，我們定義的對(duì)象都有很多的屬性，每一個(gè)屬性都需要有自己的 dep（即每個(gè)屬性都需要把那些依賴了自己的effect記錄下來(lái)放進(jìn)自己的 new Set() 中），如何來(lái)實(shí)現(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應(yīng)該是如下：

 
 
 
    
  
  
  
  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.

如果代碼還是按照前文的方式來(lái)寫(xiě)顯然是不科學(xué)的，這里就要開(kāi)始做一點(diǎn)點(diǎn)抽象了，收集依賴我們可以假想用track('a') track('b')這種形式分別記錄對(duì)象不同key的依賴項(xiàng)，那么顯然我們還需要一個(gè)東西來(lái)存放這些 key 及相應(yīng)的dep。

現(xiàn)在我們來(lái)實(shí)現(xiàn)這樣的 track 函數(shù)及對(duì)應(yīng)的 trigger 函數(shù)，代碼如下：

 
 
 
    
  
  
  
  1. const depsMap = new Map() // 每一項(xiàng)都是一個(gè) Set 對(duì)象 
    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.

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

 
 
 
    
  
  
  
  1. const depsMap = new Map() // 每一項(xiàng)都是一個(gè) Set 對(duì)象 
    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. // 為了省事直接改成調(diào)用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 實(shí)際得到：1000, 10, 2000, 20 
    37. 
  
  
  
  37. console.log(`${timesA}, ${divideA}, ${timesB}, ${divideB}`)
    38.

代碼看起來(lái)仍然是臃腫無(wú)比，別著急，后面的設(shè)計(jì)會(huì)優(yōu)化這個(gè)問(wèn)題。

響應(yīng)多個(gè)對(duì)象

我們已經(jīng)實(shí)現(xiàn)了對(duì)一個(gè)對(duì)象的響應(yīng)編程，那么要對(duì)多個(gè)對(duì)象實(shí)現(xiàn)響應(yīng)式編程該怎么做呢？

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

我們假想實(shí)現(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.

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

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

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

 
 
 
    
  
  
  
  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.   // 先忽略這個(gè) 
    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)在這個(gè)代碼最簡(jiǎ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.

至此，我們對(duì)響應(yīng)式的基本概念有了了解，我們已經(jīng)做到了收集所有響應(yīng)式對(duì)象的依賴項(xiàng)，但是現(xiàn)在你可以看到代碼的使用是極其繁瑣的，主要是因?yàn)槲覀冞€沒(méi)實(shí)現(xiàn)自動(dòng)收集依賴項(xiàng)、自動(dòng)觸發(fā)修改。

2. Proxy 和 Reflect

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

解決這個(gè)問(wèn)題的方法應(yīng)該是：

  •  當(dāng)訪問(wèn)（GET）一個(gè)屬性時(shí)，我們就調(diào)用 track(obj, ) 自動(dòng)收集依賴項(xiàng)（存儲(chǔ) effect）
  •  當(dāng)修改（SET）一個(gè)屬性時(shí)，我們就調(diào)用 trigger(obj, 自動(dòng)觸發(fā)更新（執(zhí)行存儲(chǔ)的effect）

那么現(xiàn)在問(wèn)題就是，我們?nèi)绾卧谠L問(wèn)或修改一個(gè)屬性時(shí)做到這樣的事情？也即是如何攔截這種 GET 和 SET 操作？

Vue 2中我們使用 ES5 中的 Object.defineProperty 來(lái)攔截 GET 和 SET。

Vue 3中我們將使用 ES6 中的 Reflect 和 Proxy。（注意：Vue 3不再支持IE瀏覽器，所以可以用比較多的高級(jí)特性）

我們先來(lái)看一下怎么輸出一個(gè)對(duì)象的一個(gè)屬性值，可以用下面這三種方法：

  •  使用 . => obj.a
  •  使用 [] => obj['a']
  •  使用 ES6 中的 Reflect => Reflect.get(obj, 'a')

這三種方法都是可行的，但是 Reflect 有非常強(qiáng)大的能力，后面會(huì)講到。

Proxy

我們先來(lái)看看 Proxy，Proxy 是另一個(gè)對(duì)象的占位符，默認(rèn)是對(duì)這個(gè)對(duì)象的委托。你可以在這里查看 Proxy 更詳細(xì)的用法。

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

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

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

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

現(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] 返回值，它直接返回了原始對(duì)象的值，不做任何其它操作，這對(duì)于這個(gè)簡(jiǎn)單的示例來(lái)說(shuō)沒(méi)任何問(wèn)題，。

現(xiàn)在我們看一下下面這段稍微復(fù)雜一點(diǎ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 實(shí)際輸出1
    13.

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

這個(gè)問(wèn)題其實(shí)就出在 return target[key]這一行：

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

參考 為什么要使用 Reflect

那么我們?cè)趺唇鉀Q這個(gè) this 出錯(cuò)的問(wèn)題呢？

Reflect

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

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

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

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

這確保了當(dāng)我們的對(duì)象從另一個(gè)對(duì)象繼承了值或函數(shù)時(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為調(diào)用時(shí)的對(duì)象childOjb 
    7. 
  
  
  
  7.   get(target, key, receiver) { 
    8. 
  
  
  
  8.     // 這里的target是obj 
    9. 
  
  
  
  9.     // 這意思是把receiver作為this去調(diào)用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 實(shí)際輸出1
    16.

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

實(shí)現(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.

接下來(lái)我們要做的就是結(jié)合 Proxy 的 handler 和 之前實(shí)現(xiàn)了的 track、trigger 來(lái)完成一個(gè)響應(yīng)式模塊。

首先，我們來(lái)封裝一下 Proxy 相關(guān)代碼，和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.

這里有一個(gè)問(wèn)題，當(dāng)我們每次調(diào)用 reactive 時(shí)都會(huì)重新定義一個(gè) handler 的對(duì)象，為了優(yōu)化這個(gè)，我們把 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é)開(kāi)頭提出的解決方案，我們已經(jīng)可以攔截 GET 和 SET 操作了，只需要在適當(dāng)?shù)臅r(shí)候調(diào)用 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.     // 這里判斷條件不對(duì)，result為一個(gè)布爾值 
    11. 
  
  
  
  11.     if(oldVal !== result){
    12. 
  
  
  
  12.        trigger(target, key) 
    13. 
  
  
  
  13.     } 
    14. 
  
  
  
  14.     return result 
    15. 
  
  
  
  15.   } 
    16. 
  
  
  
  16. }
    17.

現(xiàn)在我們的示例代碼可以精簡(jiǎ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. // 恢復(fù)調(diào)用 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.

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

但這還有點(diǎn)問(wèn)題：

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

下一個(gè)章節(jié)我們將解決這個(gè)問(wèn)題，讓我們的代碼更加接近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é)知識(shí)可以知道，當(dāng) effect 執(zhí)行時(shí)我們?cè)L問(wèn)到了 obj.a，因此會(huì)觸發(fā) track 收集該依賴 effect。同理，console.log(obj.a) 這一行也同樣觸發(fā)了 track，但這并不是響應(yīng)式代碼，我們預(yù)期不觸發(fā) track。

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

能想到怎么來(lái)實(shí)現(xiàn)嗎？

只響應(yīng)需要依賴更新的代碼（effect）

首先，我們定義一個(gè)變量 shouldTrack，暫且認(rèn)為它表示是否需要執(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 為使用時(shí)定義的 effect 
    14. 
  
  
  
  14.     // shouldTrack 時(shí)應(yīng)該把對(duì)應(yīng)的 effect 傳進(jìn)來(lái) 
    15. 
  
  
  
  15.     dep.add(effect) 
    16. 
  
  
  
  16.     // 如果有多個(gè)就手寫(xiě)多個(gè) 
    17. 
  
  
  
  17.     // dep.add(effect1) 
    18. 
  
  
  
  18.     // ... 
    19. 
  
  
  
  19.   } 
    20. 
  
  
  
  20. }
    21.

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

 
 
 
    
  
  
  
  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.

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

完美了嗎？顯然不是，當(dāng)有很多的 effect 時(shí)，你的代碼會(huì)變成下面這樣：

 
 
 
    
  
  
  
  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.

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

我們把這段重復(fù)使用的代碼封裝成函數(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.

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

 
 
 
    
  
  
  
  1. function track(target, key) { 
    2. 
  
  
  
  2.   if(activeEffect){ 
    3. 
  
  
  
  3.     ... 
    4. 
  
  
  
  4.     // 這里不用再根據(jù)條件手動(dòng)添加不同的 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)在新建一個(gè)文件reactive.ts，內(nèi)容就是當(dāng)前實(shí)現(xiàn)的完整響應(yīng)式代碼：

 
 
 
    
  
  
  
  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)在我們已經(jīng)解決了非響應(yīng)式代碼也觸發(fā)track的問(wèn)題，同時(shí)也解決了上節(jié)中留下的問(wèn)題：track 函數(shù)中的 effect 只能手動(dòng)添加。

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

實(shí)現(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.

這段代碼并不能實(shí)現(xiàn)預(yù)期效果，因?yàn)楫?dāng) timesA 正常更新時(shí)，我們希望能更新 sum（即重新執(zhí)行 () => { sum = timesA + obj.b }），而實(shí)際上由于 timesA 并不是一個(gè)響應(yīng)式對(duì)象，沒(méi)有 track 其依賴，所以這一行代碼并不會(huì)執(zhí)行。

那我們?nèi)绾尾拍茏屵@段代碼正常工作呢？其實(shí)我們把基本類(lèi)型變量包裝成一個(gè)對(duì)象去調(diào)用 reactive 即可。

看過(guò) Vue composition API 的同學(xué)可能知道，Vue 3中用一個(gè) ref 函數(shù)來(lái)實(shí)現(xiàn)把基本類(lèi)型變量變成響應(yīng)式對(duì)象，通過(guò) .value 獲取值，ref 返回的就是一個(gè) reactive 對(duì)象。

實(shí)現(xiàn)這樣的一個(gè)有 value 屬性的對(duì)象有這兩種方法：

  1.  直接給一個(gè)對(duì)象添加 value 屬性
 
 
 
    
  
  
  
  1. function ref(intialValue) { 
    2. 
  
  
  
  2.   return reactive({ 
    3. 
  
  
  
  3.     value: intialValue 
    4. 
  
  
  
  4.   }) 
    5. 
  
  
  
  5. }
    6.
  1.  用 getter 和 setter 來(lái)實(shí)現(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響應(yīng)式原理及實(shí)現(xiàn)                                                
    
                                                當(dāng)前地址：http://m.5511xx.com/article/cceehed.html