Vue 3中響應(yīng)式的實現(xiàn)原理是什么

本篇文章給大家分享的是有關(guān)Vue 3中響應(yīng)式的實現(xiàn)原理是什么，小編覺得挺實用的，因此分享給大家學(xué)習(xí)，希望大家閱讀完這篇文章后可以有所收獲，話不多說，跟著小編一起來看看吧。

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

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

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

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

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

顯然，我們需要做的就是重新執(zhí)行一下 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

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

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

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

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

代碼類似這樣：

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

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

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

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() // 首次執(zhí)行更新c的值  console.log('c:' + c) // 2  a = 2 trigger() // a變化時，觸發(fā)effect的執(zhí)行  console.log('c:' + c) // 期望得到4，實際得到4

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

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

c: 2  c: 4

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

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

有一段代碼如下：

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應(yīng)該是如下：

let depA = [    () => { timesA = obj.a * 10 },    () => { divideA = obj.a / 10 }  ]  let depB = [     () => { timesB = obj.b * 10 },    () => { divideB = obj.b / 10 }  ]

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

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

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())    }  }

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

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')  // 為了省事直接改成調(diào)用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}`)

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

響應(yīng)多個對象

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

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

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

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")

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

•  targetMap: 存放每個響應(yīng)式對象（所有屬性）的依賴項

•  targetMap: 存放響應(yīng)式對象每個屬性對應(yīng)的依賴項

•  dep: 存放某個屬性對應(yīng)的所有依賴項（當(dāng)這個對象對應(yīng)屬性的值發(fā)生變化時，這些依賴項函數(shù)會重新執(zhí)行）

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

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())      }    }  }

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

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

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

2. Proxy 和 Reflect

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

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

•  當(dāng)訪問（GET）一個屬性時，我們就調(diào)用 track(obj, <property>) 自動收集依賴項（存儲 effect）

•  當(dāng)修改（SET）一個屬性時，我們就調(diào)用 trigger(obj, <property> 自動觸發(fā)更新（執(zhí)行存儲的effect）

那么現(xiàn)在問題就是，我們?nèi)绾卧谠L問或修改一個屬性時做到這樣的事情？也即是如何攔截這種 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 有非常強(qiáng)大的能力，后面會講到。

Proxy

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

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

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

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

•  查找屬性

•  枚舉

•  函數(shù)的調(diào)用

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

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] 返回值，它直接返回了原始對象的值，不做任何其它操作，這對于這個簡單的示例來說沒任何問題，。

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

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

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

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

1. 鴻蒙官方戰(zhàn)略合作共建——HarmonyOS技術(shù)社區(qū)

2.  當(dāng)讀取 childObj.b 時，childObj 上沒有屬性 b，因此會從原型鏈上查找

3.  原型鏈?zhǔn)?proxiedObj

4.  讀取 proxiedObj.b 時，會觸發(fā)Proxy捕捉器（trap）中的 get，這直接從原始對象中返回了 target[key]

5.  這里target[key] 中 key 是一個 getter，因此這個 getter 中的上下文 this 即為target，這里的 target 就是 obj，因此直接返回了 1。

參考 為什么要使用 Reflect

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

Reflect

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

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

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

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

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

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

let obj = {    a: 1,    get b() { return this.a }  }  let proxiedObj = new Proxy(obj, {    // 本例中這里的receiver為調(diào)用時的對象childOjb    get(target, key, receiver) {      // 這里的target是obj      // 這意思是把receiver作為this去調(diào)用target[key]      return Reflect.get(target, key, receiver)    }  })  let childObj = Object.create(proxiedObj)  childObj.a = 2;  console.log(childObj.b) // 期望得到2 實際輸出1

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

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

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

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

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

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

這里有一個問題，當(dāng)我們每次調(diào)用 reactive 時都會重新定義一個 handler 的對象，為了優(yōu)化這個，我們把 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)  }

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

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

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

回到本節(jié)開頭提出的解決方案，我們已經(jīng)可以攔截 GET 和 SET 操作了，只需要在適當(dāng)?shù)臅r候調(diào)用 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    }  }

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

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 }  // 恢復(fù)調(diào)用 effect 的形式  effectTimesA()  effectDivideA()  console.log(`${timesA}, ${divideA}`) // 100, 1  obj.a = 100  console.log(`${timesA}, ${divideA}`) // 1000, 10

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

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

•  track 函數(shù)中的 effect 現(xiàn)在還沒處理，只能手動添加

•  reactive 現(xiàn)在只能作用于對象，基本類型變量怎么處理？

下一個章節(jié)我們將解決這個問題，讓我們的代碼更加接近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

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

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

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

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

首先，我們定義一個變量 shouldTrack，暫且認(rèn)為它表示是否需要執(zhí)行 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 時應(yīng)該把對應(yīng)的 effect 傳進(jìn)來      dep.add(effect)      // 如果有多個就手寫多個      // dep.add(effect1)      // ...    }  }

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

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

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

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

let effect1 = () => { timesA = obj.a * 10 }  shouldTrack = effect1 // (*)  effect1()  shouldTrack = null // (*)  let effect2 = () => { timesB = obj.a * 10 }  shouldTrack = effect1 // (*)  effect2()  shouldTrack = null // (*)

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

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

let activeEffect = null  // 這里省略 track trigger reactive 代碼  ...  function effect(eff) {    activeEffect = eff    activeEffect()    activeEffect = null  }

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

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

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

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

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

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

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)  }

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

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

實現(xiàn)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

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

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

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

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

1. 鴻蒙官方戰(zhàn)略合作共建——HarmonyOS技術(shù)社區(qū)

2.  直接給一個對象添加 value 屬性 

function ref(intialValue) {    return reactive({      value: intialValue    })  }

1. 鴻蒙官方戰(zhàn)略合作共建——HarmonyOS技術(shù)社區(qū)

2.  用 getter 和 setter 來實現(xiàn) 

function ref(raw) {    const r = {      get value() {        track(r, 'value')        return raw      },      set value(newVal) {        raw = newVal        trigger(r, 'value)      }    }    return r  }

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

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 處理基本類型變量后，我們的示例代碼運(yùn)行結(jié)果符合預(yù)期了。至此我們已經(jīng)解決了遺留問題：reactive 只能作用于對象，基本類型變量怎么處理？

Vue 3中的 ref 是用第二種方法來實現(xiàn)的，現(xiàn)在我們整理一下代碼，把 ref 放到 reactive.j 中。

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

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  }

有同學(xué)可能就要問了，為什么不直接用第一種方法實現(xiàn) ref，而是選擇了比較復(fù)雜的第二種方法呢？

主要有三方面原因：

1. 鴻蒙官方戰(zhàn)略合作共建——HarmonyOS技術(shù)社區(qū)

2.  根據(jù)定義，ref 應(yīng)該只有一個公開的屬性，即 value，如果使用了 reactive 你可以給這個變量增加新的屬性，這其實就破壞了 ref 的設(shè)計目的，它應(yīng)該只用來包裝一個內(nèi)部的 value 而不應(yīng)該作為一個通用的 reactive 對象；

    2.  Vue 3中有一個 isRef 函數(shù)，用來判斷一個對象是 ref 對象而不是 reactive 對象，這種判斷在很多場景都是非常有必要的；

    3.  性能方面考慮，Vue 3中的 reactive 做的事情遠(yuǎn)比第二種實現(xiàn) ref 的方法多，比如有各種檢查。

4. Computed

回到上節(jié)中最后的示例代碼：

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 兩個變量，有同學(xué)就會說：“這不就是計算屬性嗎，不能像Vue 2一樣用 computed 來表示嗎？” 顯然是可以的，看過 Vue composition API 的同學(xué)可能知道，Vue 3中提供了一個 computed 函數(shù)。

示例代碼如果使用 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)

現(xiàn)在的問題就是如何實現(xiàn) computed ？

實現(xiàn)computed

我們拿 timesA 前后的改動來說明，思考一下 computed 應(yīng)該是什么樣的？

1. 鴻蒙官方戰(zhàn)略合作共建——HarmonyOS技術(shù)社區(qū)

2.  返回響應(yīng)式對象，也許是 ref()

3.  內(nèi)部需要執(zhí)行 effect 函數(shù)以收集依賴 

function computed(getter) {    const result = ref();    effect(() => result.value = getter())    return result  }

現(xiàn)在測試一下示例代碼：

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}`)

結(jié)果符合預(yù)期。

這樣實現(xiàn)看起來很容易，實際上Vue 3中的 computed 支持傳入一個 getter 函數(shù)或傳入一個有 get 和 set 的對象，并且有其它操作，這里我們不做實現(xiàn)，感興趣可以去看源碼。

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

至此我們已經(jīng)實現(xiàn)了一個簡易版本的響應(yīng)式庫了，完整代碼如下：

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  }

以上就是Vue 3中響應(yīng)式的實現(xiàn)原理是什么，小編相信有部分知識點(diǎn)可能是我們?nèi)粘９ぷ鲿姷交蛴玫降?。希望你能通過這篇文章學(xué)到更多知識。更多詳情敬請關(guān)注億速云行業(yè)資訊頻道。