您好,登錄后才能下訂單哦!
這篇“Vue3響應(yīng)式核心之reactive源碼分析”文章的知識點大部分人都不太理解,所以小編給大家總結(jié)了以下內(nèi)容,內(nèi)容詳細,步驟清晰,具有一定的借鑒價值,希望大家閱讀完這篇文章能有所收獲,下面我們一起來看看這篇“Vue3響應(yīng)式核心之reactive源碼分析”文章吧。
源碼路徑:packages/reactivity/src/reactive.ts
export function reactive(target: object) { // if trying to observe a readonly proxy, return the readonly version. // 是否是只讀響應(yīng)式對象 if (isReadonly(target)) { return target } return createReactiveObject( target, false, mutableHandlers, mutableCollectionHandlers, reactiveMap ) }
當(dāng)我們執(zhí)行reactive({})
的時候,會執(zhí)行createReactiveObject
這個工廠方法,返回一個響應(yīng)式對象。
源碼路徑:packages/reactivity/src/reactive.ts
function createReactiveObject( target: Target, isReadonly: boolean, baseHandlers: ProxyHandler<any>, collectionHandlers: ProxyHandler<any>, proxyMap: WeakMap<Target, any> ) { // 僅對對象類型有效(對象、數(shù)組和 Map、Set 這樣的集合類型),而對 string、number 和 boolean 這樣的 原始類型 無效。 if (!isObject(target)) { if (__DEV__) { console.warn(`value cannot be made reactive: ${String(target)}`) } return target } // target is already a Proxy, return it. // exception: calling readonly() on a reactive object if ( target[ReactiveFlags.RAW] && !(isReadonly && target[ReactiveFlags.IS_REACTIVE]) ) { return target } // target already has corresponding Proxy const existingProxy = proxyMap.get(target) if (existingProxy) { return existingProxy } // only specific value types can be observed. const targetType = getTargetType(target) if (targetType === TargetType.INVALID) { return target } const proxy = new Proxy( target, targetType === TargetType.COLLECTION ? collectionHandlers : baseHandlers ) proxyMap.set(target, proxy) return proxy }
僅對對象類型有效(對象、數(shù)組和 Map、Set 這樣的集合類型),而對 string、number 和 boolean 這樣的 原始類型 無效。
if (!isObject(target)) { if (__DEV__) { console.warn(`value cannot be made reactive: ${String(target)}`) } return target }
如果 target 已經(jīng)是一個代理對象了,那么直接返回 target
if ( target[ReactiveFlags.RAW] && !(isReadonly && target[ReactiveFlags.IS_REACTIVE]) ) { return target }
如果 target 已經(jīng)有對應(yīng)的代理對象了,那么直接返回代理對象
const existingProxy = proxyMap.get(target) // 存儲響應(yīng)式對象 if (existingProxy) { return existingProxy }
對于不能被觀察的類型,直接返回 target
const targetType = getTargetType(target) if (targetType === TargetType.INVALID) { return target }
// getTargetType源碼 function getTargetType(value: Target) { return value[ReactiveFlags.SKIP] || !Object.isExtensible(value) // 不可擴展 ? TargetType.INVALID : targetTypeMap(toRawType(value)) } // ReactiveFlags枚舉 export const enum ReactiveFlags { // 用于標識一個對象是否不可被轉(zhuǎn)為代理對象,對應(yīng)的值是 __v_skip SKIP = '__v_skip', // 用于標識一個對象是否是響應(yīng)式的代理,對應(yīng)的值是 __v_isReactive IS_REACTIVE = '__v_isReactive', // 用于標識一個對象是否是只讀的代理,對應(yīng)的值是 __v_isReadonly IS_READONLY = '__v_isReadonly', // 用于標識一個對象是否是淺層代理,對應(yīng)的值是 __v_isShallow IS_SHALLOW = '__v_isShallow', // 用于保存原始對象的 key,對應(yīng)的值是 __v_raw RAW = '__v_raw' } // targetTypeMap function targetTypeMap(rawType: string) { switch (rawType) { case 'Object': case 'Array': return TargetType.COMMON case 'Map': case 'Set': case 'WeakMap': case 'WeakSet': return TargetType.COLLECTION default: return TargetType.INVALID } } // toRawType export const toRawType = (value: unknown): string => { // extract "RawType" from strings like "[object RawType]" return toTypeString(value).slice(8, -1) }
創(chuàng)建響應(yīng)式對象(核心代碼)
const proxy = new Proxy( target, targetType === TargetType.COLLECTION ? collectionHandlers : baseHandlers )
接下來將重點講解baseHandlers
這個回調(diào)函數(shù)。
baseHandlers
是mutableHandlers
, 來自于 baseHandlers
文件。
mutableHandlers的源碼如下,分別對get、set、deleteProperty、has、ownKeys做了代理。
export const mutableHandlers: ProxyHandler<object> = { get, set, deleteProperty, has, ownKeys }
接下來看看這些個攔截器的具體實現(xiàn)。
(1)、get的代理
const get = /*#__PURE__*/ createGetter() function createGetter(isReadonly = false, shallow = false) { // 閉包返回 get 攔截器方法 return function get(target: Target, key: string | symbol, receiver: object) { // 如果訪問的是 __v_isReactive 屬性,那么返回 isReadonly 的取反值 if (key === ReactiveFlags.IS_REACTIVE) { return !isReadonly // 如果訪問的是 __v_isReadonly 屬性,那么返回 isReadonly 的值 } else if (key === ReactiveFlags.IS_READONLY) { return isReadonly // 如果訪問的是 __v_isShallow 屬性,那么返回 shallow 的值 } else if (key === ReactiveFlags.IS_SHALLOW) { return shallow // 如果訪問的是 __v_raw 屬性,那么返回 target } else if ( key === ReactiveFlags.RAW && receiver === (isReadonly ? shallow ? shallowReadonlyMap : readonlyMap : shallow ? shallowReactiveMap : reactiveMap ).get(target) ) { return target } // target是否是數(shù)組 const targetIsArray = isArray(target) if (!isReadonly) { // 可讀 // 如果是數(shù)組,并且訪問的是數(shù)組的一些方法,那么返回對應(yīng)的方法 /** * Vue3中使用 arrayInstrumentations對數(shù)組的部分方法做了處理,為什么要這么做呢? * 對于 push、pop、 shift、 unshift、 splice 這些方法, * 寫入和刪除時底層會獲取當(dāng)前數(shù)組的length屬性,如果我們在effect中使用的話, * 會收集length屬性的依賴,當(dāng)使用這些api是也會更改length,就會造成死循環(huán): * */ if (targetIsArray && hasOwn(arrayInstrumentations, key)) { // 返回重寫的push、pop、 shift、 unshift、 splice 'includes', 'indexOf', 'lastIndexOf' return Reflect.get(arrayInstrumentations, key, receiver) } // 如果訪問的是 hasOwnProperty 方法,那么返回 hasOwnProperty 方法 if (key === 'hasOwnProperty') { return hasOwnProperty } } // 獲取 target 的 key 屬性值 const res = Reflect.get(target, key, receiver) // 如果是內(nèi)置的 Symbol,或者是不可追蹤的 key,那么直接返回 res if (isSymbol(key) ? builtInSymbols.has(key) : isNonTrackableKeys(key)) { return res } // 如果不是只讀的,那么進行依賴收集 if (!isReadonly) { track(target, TrackOpTypes.GET, key) } // 如果是淺的,那么直接返回 res if (shallow) { return res } // 如果 res 是 ref,對返回的值進行解包 if (isRef(res)) { // ref unwrapping - skip unwrap for Array + integer key. return targetIsArray && isIntegerKey(key) ? res : res.value } // 如果 res 是對象,遞歸代理 if (isObject(res)) { // Convert returned value into a proxy as well. we do the isObject check // here to avoid invalid value warning. Also need to lazy access readonly // and reactive here to avoid circular dependency. return isReadonly ? readonly(res) : reactive(res) } return res } }
當(dāng)target是數(shù)組的時候,'push', 'pop', 'shift', 'unshift', 'splice'這些方法會改變數(shù)組長度,會導(dǎo)致無限遞歸,因此要先暫停收集依賴, 所以對數(shù)組的以上方法進行了攔截和重寫
if (targetIsArray && hasOwn(arrayInstrumentations, key)) { // 返回重寫的push、pop、 shift、 unshift、 splice 'includes', 'indexOf', 'lastIndexOf' return Reflect.get(arrayInstrumentations, key, receiver) }
重寫的代碼:
const arrayInstrumentations = /*#__PURE__*/ createArrayInstrumentations() function createArrayInstrumentations() { const instrumentations: Record<string, Function> = {} // instrument length-altering mutation methods to avoid length being tracked // which leads to infinite loops in some cases (#2137) ;(['push', 'pop', 'shift', 'unshift', 'splice'] as const).forEach(key => { instrumentations[key] = function (this: unknown[], ...args: unknown[]) { // 由于上面的方法會改變數(shù)組長度,因此暫停收集依賴,不然會導(dǎo)致無限遞歸 console.log('----自定義push等入口:this, args, key'); pauseTracking() console.log('----自定義push等暫停收集依賴&執(zhí)行開始') // 調(diào)用原始方法 const res = (toRaw(this) as any)[key].apply(this, args) console.log('----自定義push等暫停收集依賴&執(zhí)行結(jié)束') //復(fù)原依賴收集 resetTracking() return res } }) return instrumentations }
下圖是執(zhí)行結(jié)果:
可以用以下代碼來理解:
let arr = [1,2,3] let obj = { 'push': function(...args) { // 暫停收集依賴邏輯 return Array.prototype.push.apply(this, [...args]) // 啟動收集依賴邏輯 } } let proxy = new Proxy(arr, { get: function (target, key, receiver) { console.log('get的key為 ===>' + key); let res = ''; if(key === 'push') { //重寫push res = Reflect.get(obj, key, receiver) } else { res = Reflect.get(target, key, receiver) } return res }, set(target, key, value, receiver){ console.log('set的key為 ===>' + key, value); return Reflect.set(target, key, value, receiver); } }) proxy.push('99')
特殊屬性的不進行依賴收集
// 如果是內(nèi)置的 Symbol,或者是不可追蹤的 key,那么直接返回 res if (isSymbol(key) ? builtInSymbols.has(key) : isNonTrackableKeys(key)) { return res; }
這一步是為了過濾一些特殊的屬性,例如原生的Symbol類型的屬性,如:Symbol.iterator、Symbol.toStringTag等等,這些屬性不需要進行依賴收集,因為它們是內(nèi)置的,不會改變;
還有一些不可追蹤的屬性,如:proto、__v_isRef、__isVue這些屬性也不需要進行依賴收集;
依賴收集
// 如果不是只讀的,那么進行依賴收集 if (!isReadonly) { track(target, "get" /* TrackOpTypes.GET */, key); }
淺的不進行遞歸代理
if (shallow) { return res; }
對返回值進行解包
// 如果 res 是 ref,對返回的值進行解包 if (isRef(res)) { // 對于數(shù)組和整數(shù)類型的 key,不進行解包 return targetIsArray && isIntegerKey(key) ? res : res.value; }
這一步是為了處理ref的情況,如果res是ref,那么就對res進行解包,這里有一個判斷,如果是數(shù)組,并且key是整數(shù)類型,那么就不進行解包;因為reactive是深層響應(yīng)式的,所以要把屬性為ref的進行解包
對象的遞歸代理
// 如果 res 是對象,那么對返回的值進行遞歸代理 if (isObject(res)) { return isReadonly ? readonly(res) : reactive(res); }
(2)、set的代理
const set = /*#__PURE__*/ createSetter() function createSetter(shallow = false) { // 返回一個set方法 return function set( target: object, key: string | symbol, value: unknown, receiver: object ): boolean { let oldValue = (target as any)[key] // 獲取舊值 // 如果舊值是只讀的,并且是 ref,并且新值不是 ref if (isReadonly(oldValue) && isRef(oldValue) && !isRef(value)) { return false } if (!shallow) { // 非shallow // 新值非shallow && 非只讀 if (!isShallow(value) && !isReadonly(value)) { // 獲取新舊值的原始值 oldValue = toRaw(oldValue) value = toRaw(value) } // 代理對象非數(shù)組 & 舊值是ref & 新值非ref if (!isArray(target) && isRef(oldValue) && !isRef(value)) { oldValue.value = value return true } } else { // in shallow mode, objects are set as-is regardless of reactive or not } console.log('----set', target, key, value) // 是數(shù)組 & key是整型數(shù)字 ? // 如果 key 小于數(shù)組的長度,那么就是有這個 key : // 如果不是數(shù)組,那么就是普通對象,直接判斷是否有這個 key // 數(shù)組會觸發(fā)兩次set: index和新增的值 和 'length'和新增之后的數(shù)組長度 const hadKey = isArray(target) && isIntegerKey(key) ? Number(key) < target.length : hasOwn(target, key) // 設(shè)置key-value const result = Reflect.set(target, key, value, receiver) // don't trigger if target is something up in the prototype chain of original // 如果目標對象是原始數(shù)據(jù)的原型鏈中的某個元素,則不會觸發(fā)依賴收集 if (target === toRaw(receiver)) { if (!hadKey) {// 如果沒有這個 key,那么就是新增了一個屬性,觸發(fā) add 事件 trigger(target, TriggerOpTypes.ADD, key, value) } else if (hasChanged(value, oldValue)) { // // 如果有這個 key,那么就是修改了一個屬性,觸發(fā) set 事件 trigger(target, TriggerOpTypes.SET, key, value, oldValue) } } // 返回結(jié)果,這個結(jié)果為 boolean 類型,代表是否設(shè)置成功 return result } }
主要邏輯:
獲取舊值
let oldValue = target[key];
判斷舊值是否是只讀的
// 如果舊值是只讀的,并且是 ref,并且新值不是 ref,那么直接返回 false,代表設(shè)置失敗 if (isReadonly(oldValue) && isRef(oldValue) && !isRef(value)) { return false; }
以上就是關(guān)于“Vue3響應(yīng)式核心之reactive源碼分析”這篇文章的內(nèi)容,相信大家都有了一定的了解,希望小編分享的內(nèi)容對大家有幫助,若想了解更多相關(guān)的知識內(nèi)容,請關(guān)注億速云行業(yè)資訊頻道。
免責(zé)聲明:本站發(fā)布的內(nèi)容(圖片、視頻和文字)以原創(chuàng)、轉(zhuǎn)載和分享為主,文章觀點不代表本網(wǎng)站立場,如果涉及侵權(quán)請聯(lián)系站長郵箱:is@yisu.com進行舉報,并提供相關(guān)證據(jù),一經(jīng)查實,將立刻刪除涉嫌侵權(quán)內(nèi)容。
億速云公眾號
手機網(wǎng)站二維碼
Copyright ? Yisu Cloud Ltd. All Rights Reserved. 2018 版權(quán)所有
廣州億速云計算有限公司粵ICP備17096448號-1 粵公網(wǎng)安備 44010402001142號增值電信業(yè)務(wù)經(jīng)營許可證編號:B1-20181529