Vue3源碼reactivity響應式篇之Reactive

概覽

vue3中reactive用于將普通對象轉換為響應式對象，它的實現原理是通過Proxy和Reflect來實現的。具體的實現文件參見packages\reactivity\src\reactive.ts。本文會介紹reactive的相關api如下：

reactive：將普通對象轉換為響應式對象
readonly：將普通對象轉換為只讀響應式對象
isReactive：判斷一個對象是否是響應式對象
isReadonly：判斷一個對象是否是只讀響應式對象
isShallow：判斷一個對象是否是淺層響應式對象
isProxy：判斷一個對象是否是代理對象
shallowReactive：創建一個淺層響應式對象
shallowReadonly：創建一個淺層只讀響應式對象
markRaw：標記一個對象為原始對象，避免被轉換為響應式對象
toReadonly：將一個響應式對象轉換為只讀響應式對象

源碼分析

在分析reactive.ts的源碼之前，先了解如下幾個變量，它們分別是：

const reactiveMap = /* @__PURE__ */ new WeakMap(); // 響應式對象的緩存Map
const shallowReactiveMap = /* @__PURE__ */ new WeakMap(); // 淺層響應式對象的緩存Map
const readonlyMap = /* @__PURE__ */ new WeakMap(); // 只讀響應式對象的緩存Map
const shallowReadonlyMap = /* @__PURE__ */ new WeakMap(); // 淺層只讀響應式對象的緩存Map

`isReadonly`

isReadonly用于判斷一個對象是否是只讀響應式對象，它的實現如下：

function isReadonly(value) {return !!(value && value["__v_isReadonly"]);
}

isReadonly就是判斷參數value的__v_isReadonly屬性值的布爾值，若為true則表示是只讀對象；否則不是只讀對象。

`reactive`

reactive的實現如下：

function reactive(target) {// 判斷target是否是只讀對象，若是，則直接返回if (isReadonly(target)) {return target;}// 調用 createReactiveObject 函數創建響應式對象,并返回return createReactiveObject(target, // 目標對象false, // 是否只讀，默認為falsemutableHandlers, // 普通對象的代理處理函數mutableCollectionHandlers, // 集合對象的代理處理函數reactiveMap // 響應式對象的緩存Map);
}

`createReactiveObject`

reactive的核心實現是createReactiveObject函數，它的實現如下：

function createReactiveObject(target, isReadonly2, baseHandlers, collectionHandlers, proxyMap) {// 判斷target是否是對象，若不是，則彈出警告，并直接返回if (!isObject(target)) {{warn(`value cannot be made ${isReadonly2 ? "readonly" : "reactive"}: ${String(target)}`);}return target;}if (target["__v_raw"] && !(isReadonly2 && target["__v_isReactive"])) {return target;}const targetType = getTargetType(target);if (targetType === 0 /* INVALID */) {return target;}const existingProxy = proxyMap.get(target);if (existingProxy) {return existingProxy;}const proxy = new Proxy(target,targetType === 2 /* COLLECTION */ ? collectionHandlers : baseHandlers);proxyMap.set(target, proxy);return proxy;
}function targetTypeMap(rawType) {switch (rawType) {case "Object":case "Array":return 1 /* COMMON */;case "Map":case "Set":case "WeakMap":case "WeakSet":return 2 /* COLLECTION */;default:return 0 /* INVALID */;}
}
function getTargetType(value) {return value["__v_skip"] || !Object.isExtensible(value) ? 0 /* INVALID */ : targetTypeMap(toRawType(value));
}

createReactiveObject函數接受5個參數，依次為：目標對象target、是否只讀isReadonly2、基本類型處理函數baseHandlers、集合對象的代理處理函數collectionHandlers、響應式對象的緩存proxyMap。

createReactiveObject在確保target為對象后，會檢測target是一個響應式對象，若是則直接返回；然后會從緩存proxyMap中獲取target的代理對象，若存在則直接返回該代理對象；否則調用getTargetType函數判斷目標對象target的類型，若類型為INVALID，則直接返回target；否則根據類型創建代理對象，并將其緩存到proxyMap中，最后返回該代理對象。

getTargetType的實現也在上面，若target存在__v_skip屬性且為true，或者target不是可擴展的對象，則返回INVALID；否則根據target的類型調用targetTypeMap函數返回類型。

由上targetTypeMap函數可知,targetTypeMap函數根據target的類型返回一個數字，分別表示：

0：INVALID，表示target不是一個對象
1：COMMON，表示target是一個普通對象或數組
2：COLLECTION，表示target是一個集合對象

綜上，可以理解createReactiveObject函數根據target創建代理對象的邏輯如下：

若target為普通對象或數組，則創建普通對象的代理對象，使用baseHandlers處理函數；
若target為Map/Set/WeakMap/WeakSet，則創建集合對象的代理對象，使用collectionHandlers處理函數；
其余情況，則直接返回target。

關于處理器baseHandlers和collectionHandlers的實現，會在后面的章節中介紹。

`readonly`/`shallowReactive`/`shallowReadonly`

readonly/shallowReactive/shallowReadonly的實現如下：

function readonly(target) {return createReactiveObject(target,true, // 表示只讀readonlyHandlers, // 普通對象的只讀代理處理函數readonlyCollectionHandlers, // 集合對象的只讀代理處理函數readonlyMap // 只讀響應式對象的緩存readonlyMap);
}function shallowReactive(target) {return createReactiveObject(target,false, // 不是只讀shallowReactiveHandlers, // 普通對象的淺層響應式代理處理函數shallowCollectionHandlers, // 集合對象的淺層響應式代理處理函數shallowReactiveMap // 淺層響應式對象的緩存shallowReactiveMap);
}function shallowReadonly(target) {return createReactiveObject(target,true, // 表示只讀shallowReadonlyHandlers, // 普通對象的淺層只讀代理處理函數shallowReadonlyCollectionHandlers, // 集合對象的淺層只讀代理處理函數shallowReadonlyMap // 淺層只讀響應式對象的緩存shallowReadonlyMap);
}

readonly的實現和reactive的實現類似，不同就是調用createReactiveObject函數時，傳參不同。

類似的還有shallowReactive、shallowReadonly。

它們的不同如下所示

函數	只讀	淺層	緩存	普通對象的代理方法	集合對象的代理方法
`reactive`	否	否	`reactiveMap`	`baseHandlers`	`collectionHandlers`
`shallowReactive`	否	是	`shallowReactiveMap`	`shallowReactiveHandlers`	`shallowCollectionHandlers`
`readonly`	是	否	`readonlyMap`	`readonlyHandlers`	`readonlyCollectionHandlers`
`shallowReadonly`	是	是	`shallowReadonlyMap`	`shallowReadonlyHandlers`	`shallowReadonlyCollectionHandlers`

`isReactive`

isReactive的實現如下：

function isReactive(value) {if (isReadonly(value)) {return isReactive(value["__v_raw"]);}return !!(value && value["__v_isReactive"]);
}

isReactive會先判斷value是否為只讀響應式數據，若為只讀響應式數據，則會遞歸調用isReactive函數判斷value的原始數據是否為響應式數據；否則，會判斷value是否為響應式數據，若為響應式數據，則返回true，否則返回false。

`isShallow` / `isProxy` / `isReadonly`

function isShallow(value) {return !!(value && value["__v_isShallow"]);
}
function isProxy(value) {return value ? !!value["__v_raw"] : false;
}
function isReadonly(value) {return !!(value && value["__v_isReadonly"]);
}

isShallow/isProxy/isReadonly的實現都比較簡單，都是判斷參數是否存在某個屬性，若存在則返回true，否則返回false。它們讀取的屬性__v_isShallow/__v_raw/__v_isReadonly實際上都是針對代理對象的，而它們的邏輯處理也是在處理器方法中實現的，后續會講到

`markRaw`

markRaw用于標記對象為原始對象，這種對象不會被轉換為響應式對象，也不會被代理，其實現如下：

function markRaw(value) {if (!hasOwn(value, "__v_skip") && Object.isExtensible(value)) {def(value, "__v_skip", true);}return value;
}

markRaw首先會判斷對象是否可擴展，若可擴展，則會在對象上定義一個__v_skip屬性,打一個標記，值為true；最后返回該對象。使用reactive(target)創建響應式對象時，若target不可擴展，則在調用createReactiveObject時，其內部調用getTargetType的返回值就是0.

def內部就是調用Object.defineProperty定義對象上屬性

`toReadonly`

toReadonly用于將響應式對象轉換為只讀對象，其實現如下：

const toReadonly = (value) => isObject(value) ? readonly(value) : value;

toReadonly會判斷參數是否為對象，若為是，則會調用readonly函數將參數轉換為只讀響應式對象，并返回該代理對象；否則，直接返回參數。這和toReactive很類似，只是toReactive會將參數轉換為響應式對象，而toReadonly會將參數轉換為只讀響應式對象。