前言
最近在我的vue原始碼交流群有位面試官分享了一道他的面試題：vue3的ref是如何實現響應式的？下面有不少小夥伴回答的是Proxy，其實這些小夥伴只回答對了一半。
-
當ref接收的是一個物件時確實是依靠
Proxy去實現響應式的。 -
但是ref還可以接收
string、number或boolean這樣的原始型別，當是原始型別時，響應式就不是依靠Proxy去實現的，而是在value屬性的getter和setter方法中去實現的響應式。
本文將透過debug的方式帶你搞清楚當ref接收的是物件和原始型別時，分別是如何實現響應式的。注：本文中使用的vue版本為3.4.19。
關注公眾號：【前端歐陽】，給自己一個進階vue的機會
看個demo
還是老套路，我們來搞個demo，index.vue檔案程式碼如下：
<template>
<div>
<p>count的值為：{{ count }}</p>
<p>user.count的值為：{{ user.count }}</p>
<button @click="count++">count++</button>
<button @click="user.count++">user.count++</button>
</div>
</template>
<script setup lang="ts">
import { ref } from "vue";
const count = ref(0);
const user = ref({
count: 0,
});
</script>
在上面的demo中我們有兩個ref變數，count變數接收的是原始型別，他的值是數字0。
count變數渲染在template的p標籤中，並且在button的click事件中會count++。
user變數接收的是物件，物件有個count屬性。
同樣user.count也渲染在另外一個p標籤上，並且在另外一個button的click事件中會user.count++。
接下來我將透過debug的方式帶你搞清楚，分別點選count++和user.count++按鈕時是如何實現響應式的。
開始打斷點
第一步從哪裡開始下手打斷點呢？
既然是要搞清楚ref是如何實現響應式的，那麼當然是給ref打斷點吖，所以我們的第一個斷點是打在const count = ref(0);程式碼處。這行程式碼是執行時程式碼，是跑在瀏覽器中的。
要在瀏覽器中打斷點，需要在瀏覽器的source皮膚中開啟index.vue檔案，然後才能給程式碼打上斷點。
那麼第二個問題來了，如何在source皮膚中找到我們這裡的index.vue檔案呢？
很簡單，像是在vscode中一樣使用command+p（windows中應該是control+p）就可以喚起一個輸入框。在輸入框裡面輸入index.vue，然後點選回車就可以在source皮膚中開啟index.vue檔案。如下圖：
然後我們就可以在瀏覽器中給const count = ref(0);處打上斷點了。
RefImpl類
重新整理頁面此時斷點將會停留在const count = ref(0);程式碼處，讓斷點走進ref函式中。在我們這個場景中簡化後的ref函式程式碼如下：
function ref(value) {
return createRef(value, false);
}
可以看到在ref函式中實際是直接呼叫了createRef函式。
接著將斷點走進createRef函式，在我們這個場景中簡化後的createRef函式程式碼如下：
function createRef(rawValue, shallow) {
return new RefImpl(rawValue, shallow);
}
從上面的程式碼可以看到實際是呼叫RefImpl類new了一個物件，傳入的第一個引數是rawValue，也就是ref繫結的變數值，這個值可以是原始型別，也可以是物件、陣列等。
接著將斷點走進RefImpl類中，在我們這個場景中簡化後的RefImpl類程式碼如下：
class RefImpl {
private _value: T
private _rawValue: T
constructor(value) {
this._rawValue = toRaw(value);
this._value = toReactive(value);
}
get value() {
trackRefValue(this);
return this._value;
}
set value(newVal) {
newVal = toRaw(newVal);
if (hasChanged(newVal, this._rawValue)) {
this._rawValue = newVal;
this._value = toReactive(newVal);
triggerRefValue(this, 4, newVal);
}
}
}
從上面的程式碼可以看到RefImpl類由三部分組成：constructor建構函式、value屬性的getter方法、value屬性的setter方法。
RefImpl類的constructor建構函式
constructor建構函式中的程式碼很簡單，如下：
constructor(value) {
this._rawValue = toRaw(value);
this._value = toReactive(value);
}
在建構函式中首先會將toRaw(value)的值賦值給_rawValue屬性中，這個toRaw函式是vue暴露出來的一個API，他的作用是根據一個 Vue 建立的代理返回其原始物件。因為ref函式不光能夠接受普通的物件和原始型別，而且還能接受一個ref物件，所以這裡需要使用toRaw(value)拿到原始值存到_rawValue屬性中。
接著在建構函式中會執行toReactive(value)函式，將其執行結果賦值給_value屬性。toReactive函式看名字你應該也猜出來了，如果接收的value是原始型別，那麼就直接返回value。如果接收的value不是原始型別（比如物件），那麼就返回一個value轉換後的響應式物件。這個toReactive函式我們在下面會講。
_rawValue屬性和_value屬性都是RefImpl類的私有屬性，用於在RefImpl類中使用的，而暴露出去的也只有value屬性。
經過constructor建構函式的處理後，分別給兩個私有屬性賦值了：
-
_rawValue中存的是ref繫結的值的原始值。 -
如果ref繫結的是原始型別，比如數字0，那麼
_value屬性中存的就是數字0。如果ref繫結的是一個物件，那麼
_value屬性中存的就是繫結的物件轉換後的響應式物件。
RefImpl類的value屬性的getter方法
我們接著來看value屬性的getter方法，程式碼如下：
get value() {
trackRefValue(this);
return this._value;
}
當我們對ref的value屬性進行讀操作時就會走到getter方法中。
我們知道template經過編譯後會變成render函式，執行render函式會生成虛擬DOM，然後由虛擬DOM生成真實DOM。
在執行render函式期間會對count變數進行讀操作，所以此時會觸發count變數的value屬性對應的getter方法。
在getter方法中會呼叫trackRefValue函式進行依賴收集，由於此時是在執行render函式期間，所以收集的依賴就是render函式。
最後在getter方法中會return返回_value私有屬性。
RefImpl類的value屬性的setter方法
我們接著來看value屬性的setter方法，程式碼如下：
set value(newVal) {
newVal = toRaw(newVal);
if (hasChanged(newVal, this._rawValue)) {
this._rawValue = newVal;
this._value = toReactive(newVal);
triggerRefValue(this, 4, newVal);
}
}
當我們對ref的value的屬性進行寫操作時就會走到setter方法中，比如點選count++按鈕，就會對count的值進行+1，觸發寫操作走到setter方法中。
給setter方法打個斷點，點選count++按鈕，此時斷點將會走到setter方法中。初始化count的值為0，此時點選按鈕後新的count值為1，所以在setter方法中接收的newVal的值為1。如下圖：
從上圖中可以看到新的值newVal的值為1，舊的值this._rawValue的值為0。然後使用if (hasChanged(newVal, this._rawValue))判斷新的值和舊的值是否相等，hasChanged的程式碼也很簡單，如下：
const hasChanged = (value, oldValue) => !Object.is(value, oldValue);
Object.is方法大家平時可能用的比較少，作用也是判斷兩個值是否相等。和==的區別為Object.is不會進行強制轉換，其他的區別大家可以參看mdn上的文件。
使用hasChanged函式判斷到新的值和舊的值不相等時就會走到if語句裡面，首先會執行this._rawValue = newVal將私有屬性_rawValue的值更新為最新值。接著就是執行this._value = toReactive(newVal)將私有屬性_value的值更新為最新值。
最後就是執行triggerRefValue函式觸發收集的依賴，前面我們講過了在執行render函式期間由於對count變數進行讀操作。觸發了getter方法，在getter方法中將render函式作為依賴進行收集了。
所以此時執行triggerRefValue函式時會將收集的依賴全部取出來執行一遍，由於render函式也是被收集的依賴，所以render函式會重新執行。重新執行render函式時從count變數中取出的值就是新值1，接著就是生成虛擬DOM，然後將虛擬DOM掛載到真實DOM上，最終在頁面上count變數繫結的值已經更新為1了。
看到這裡你是不是以為關於ref實現響應式已經完啦？
我們來看demo中的第二個例子，user物件，回顧一下在template和script中關於user物件的程式碼如下：
<template>
<div>
<p>user.count的值為：{{ user.count }}</p>
<button @click="user.count++">user.count++</button>
</div>
</template>
<script setup lang="ts">
import { ref } from "vue";
const user = ref({
count: 0,
});
</script>
在button按鈕的click事件中執行的是：user.count++，前面我們講過了對ref的value屬性進行寫操作會走到setter方法中。但是我們這裡ref繫結的是一個物件，點選按鈕時也不是對user.value屬性進行寫操作，而是對user.value.count屬性進行寫操作。所以在這裡點選按鈕不會走到setter方法中，當然也不會重新執行收集的依賴。
那麼當ref繫結的是物件時，我們改變物件的某個屬性時又是怎麼做到響應式更新的呢？
這種情況就要用到Proxy了，還記得我們前面講過的RefImpl類的constructor建構函式嗎？程式碼如下：
class RefImpl {
private _value: T
private _rawValue: T
constructor(value) {
this._rawValue = toRaw(value);
this._value = toReactive(value);
}
}
其實就是這個toReactive函式在起作用。
Proxy實現響應式
還是同樣的套路，這次我們給繫結物件的名為user的ref打個斷點，重新整理頁面程式碼停留在斷點中。還是和前面的流程一樣最終斷點走到RefImpl類的建構函式中，當程式碼執行到this._value = toReactive(value)時將斷點走進toReactive函式。程式碼如下：
const toReactive = (value) => (isObject(value) ? reactive(value) : value);
在toReactive函式中判斷了如果當前的value是物件，就返回reactive(value)，否則就直接返回value。這個reactive函式你應該很熟悉，他會返回一個物件的響應式代理。因為reactive不接收number這種原始型別，所以這裡才會判斷value是否是物件。
我們接著將斷點走進reactive函式，看看他是如何返回一個響應式物件的，在我們這個場景中簡化後的reactive函式程式碼如下：
function reactive(target) {
return createReactiveObject(
target,
false,
mutableHandlers,
mutableCollectionHandlers,
reactiveMap
);
}
從上面的程式碼可以看到在reactive函式中是直接返回了createReactiveObject函式的呼叫，第三個引數是mutableHandlers。從名字你可能猜到了，他是一個Proxy物件的處理器物件，後面會講。
接著將斷點走進createReactiveObject函式，在我們這個場景中簡化後的程式碼如下：
function createReactiveObject(
target,
isReadonly2,
baseHandlers,
collectionHandlers,
proxyMap
) {
const proxy = new Proxy(target, baseHandlers);
return proxy;
}
在上面的程式碼中我們終於看到了大名鼎鼎的Proxy了，這裡new了一個Proxy物件。new的時候傳入的第一個引數是target，這個target就是我們一路傳進來的ref繫結的物件。第二個引數為baseHandlers，是一個Proxy物件的處理器物件。這個baseHandlers是呼叫createReactiveObject時傳入的第三個引數，也就是我們前面講過的mutableHandlers物件。
在這裡最終將Proxy代理的物件進行返回，我們這個demo中ref繫結的是一個名為user的物件，經過前面講過函式的層層return後，user.value的值就是這裡return返回的proxy物件。
當我們對user.value響應式物件的屬性進行讀操作時，就會觸發這裡Proxy的get攔截。
當我們對user.value響應式物件的屬性進行寫操作時，就會觸發這裡Proxy的set攔截。
get和set攔截的程式碼就在mutableHandlers物件中。
Proxy的set和get攔截
在原始碼中使用搜一下mutableHandlers物件，看到他的程式碼是這樣的，如下：
const mutableHandlers = new MutableReactiveHandler();
從上面的程式碼可以看到mutableHandlers物件是使用MutableReactiveHandler類new出來的一個物件。
我們接著來看MutableReactiveHandler類，在我們這個場景中簡化後的程式碼如下：
class MutableReactiveHandler extends BaseReactiveHandler {
set(target, key, value, receiver) {
let oldValue = target[key];
const result = Reflect.set(target, key, value, receiver);
if (target === toRaw(receiver)) {
if (hasChanged(value, oldValue)) {
trigger(target, "set", key, value, oldValue);
}
}
return result;
}
}
在上面的程式碼中我們看到了set攔截了，但是沒有看到get攔截。
MutableReactiveHandler類是繼承了BaseReactiveHandler類，我們來看看BaseReactiveHandler類，在我們這個場景中簡化後的BaseReactiveHandler類程式碼如下：
class BaseReactiveHandler {
get(target, key, receiver) {
const res = Reflect.get(target, key, receiver);
track(target, "get", key);
return res;
}
}
在BaseReactiveHandler類中我們找到了get攔截，當我們對Proxy代理返回的物件的屬性進行讀操作時就會走到get攔截中。
前面講過了經過層層return後user.value的值就是這裡的proxy響應式物件，而我們在template中使用user.count將其渲染到p標籤上，在template中讀取user.count，實際就是在讀取user.value.count的值。
同樣的template經過編譯後會變成render函式，執行render函式會生成虛擬DOM，然後將虛擬DOM轉換為真實DOM渲染到瀏覽器上。在執行render函式期間會對user.value.count進行讀操作，所以會觸發BaseReactiveHandler這裡的get攔截。
在get攔截中會執行track(target, "get", key)函式，執行後會將當前render函式作為依賴進行收集。到這裡依賴收集的部分講完啦，剩下的就是依賴觸發的部分。
我們接著來看MutableReactiveHandler，他是繼承了BaseReactiveHandler。在BaseReactiveHandler中有個get攔截，而在MutableReactiveHandler中有個set攔截。
當我們點選user.count++按鈕時，會對user.value.count進行寫操作。由於對count屬性進行了寫操作，所以就會走到set攔截中，set攔截程式碼如下：
class MutableReactiveHandler extends BaseReactiveHandler {
set(target, key, value, receiver) {
let oldValue = target[key];
const result = Reflect.set(target, key, value, receiver);
if (target === toRaw(receiver)) {
if (hasChanged(value, oldValue)) {
trigger(target, "set", key, value, oldValue);
}
}
return result;
}
}
我們先來看看set攔截接收的4個引數，第一個引數為target，也就是我們proxy代理前的原始物件。第二個引數為key，進行寫操作的屬性，在我們這裡key的值就是字串count。第三個引數是新的屬性值。
第四個引數receiver一般情況下是Proxy返回的代理響應式物件。這裡為什麼會說是一般是呢？看一下MDN上面的解釋你應該就能明白了：
假設有一段程式碼執行
obj.name = "jen"，obj不是一個 proxy，且自身不含name屬性，但是它的原型鏈上有一個 proxy，那麼，那個 proxy 的set()處理器會被呼叫，而此時，obj會作為 receiver 引數傳進來。
接著來看set攔截函式中的內容，首先let oldValue = target[key]拿到舊的屬性值，然後使用Reflect.set(target, key, value, receiver)
在Proxy中一般都是搭配Reflect進行使用，在Proxy的get攔截中使用Reflect.get，在Proxy的set攔截中使用Reflect.set。
這樣做有幾個好處，在set攔截中我們要return一個布林值表示屬性賦值是否成功。如果使用傳統的obj[key] = value的形式我們是不知道賦值是否成功的，而使用Reflect.set會返回一個結果表示給物件的屬性賦值是否成功。在set攔截中直接將Reflect.set的結果進行return即可。
還有一個好處是如果不搭配使用可能會出現this指向不對的問題。
前面我們講過了receiver可能不是Proxy返回的代理響應式物件，所以這裡需要使用if (target === toRaw(receiver))進行判斷。
接著就是使用if (hasChanged(value, oldValue))進行判斷新的值和舊的值是否相等，如果不相等就執行trigger(target, "set", key, value, oldValue)。
這個trigger函式就是用於依賴觸發，會將收集的依賴全部取出來執行一遍，由於render函式也是被收集的依賴，所以render函式會重新執行。重新執行render函式時從user.value.count屬性中取出的值就是新值1，接著就是生成虛擬DOM，然後將虛擬DOM掛載到真實DOM上，最終在頁面上user.value.count屬性繫結的值已經更新為1了。
這就是當ref繫結的是一個物件時，是如何使用Proxy去實現響應式的過程。
看到這裡有的小夥伴可能會有一個疑問，為什麼ref使用RefImpl類去實現，而不是統一使用Proxy去代理一個擁有value屬性的普通物件呢？比如下面這種：
const proxy = new Proxy(
{
value: target,
},
baseHandlers
);
如果是上面這樣做那麼就不需要使用RefImpl類了，全部統一成Proxy去使用響應式了。
但是上面的做法有個問題，就是使用者可以使用delete proxy.value將proxy物件的value屬性給刪除了。而使用RefImpl類的方式去實現就不能使用delete的方法去將value屬性給刪除了。
總結
這篇文章我們講了ref是如何實現響應式的，主要分為兩種情況：ref接收的是number這種原始型別、ref接收的是物件這種非原始型別。
-
當ref接收的是number這種原始型別時是依靠
RefImpl類的value屬性的getter和setter方法中去實現的響應式。當我們對ref的value屬性進行讀操作時會觸發value的
getter方法進行依賴收集。當我們對ref的value屬性進行寫操作時會進行依賴觸發，重新執行render函式，達到響應式的目的。
-
當ref接收的是物件這種非原始型別時，會呼叫
reactive方法將ref的value屬性轉換成一個由Proxy實現的響應式物件。當我們對ref的value屬性物件的某個屬性進行讀操作時會觸發
Proxy的get攔截進行依賴收集。當我們對ref的value屬性物件的某個屬性進行寫操作時會觸發
Proxy的set攔截進行依賴觸發，然後重新執行render函式，達到響應式的目的。
最後我們講了為什麼ref不統一使用Proxy去代理一個有value屬性的普通物件去實現響應式，而是要多搞個RefImpl類。
因為如果使用Proxy去代理的有value屬性的普通的物件，可以使用delete proxy.value將proxy物件的value屬性給刪除了。而使用RefImpl類的方式去實現就不能使用delete的方法去將value屬性給刪除了。
關注公眾號：【前端歐陽】，給自己一個進階vue的機會
