一、目標對象標識

**
類似于渲染系統，vue3.0的響應式系統也有自己的一套flag，用于標記目標對象target（通常是我們傳入的數據源）的一些特性

export const enum ReactiveFlags {skip = '__v_skip', isReactive = '__v_isReactive',isReadonly = '__v_isReadonly',raw = '__v_raw',reactive = '__v_reactive',readonly = '__v_readonly' }// 為目標對象target，即待轉化為響應式對象的源對象做標記 interface Target {__v_skip?: boolean // 跳過，不對target做響應式處理__v_isReactive?: boolean // target是響應式的__v_isReadonly?: boolean // target是只讀的__v_raw?: any // target對應的原始數據源，未經過響應式代理__v_reactive?: any // target經過響應式代理后的數據源__v_readonly?: any // target經過響應式代理后的只讀數據源 }

二、reactive核心模塊

createReactiveObject：
將target轉化為響應式對象

function createReactiveObject(target: Target,isReadonly: boolean,baseHandlers: ProxyHandler<any>,collectionHandlers: ProxyHandler<any> ) {// 被轉化的target必須是objectif (!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 objectif (target.__v_raw && !(isReadonly && target.__v_isReactive)) {return target}// target已經被轉化為響應式對象，響應式對象的__v_readonly、__v_reactive分別掛載轉化為// proxy的只讀、非只讀的對象if (hasOwn(target, isReadonly ? ReactiveFlags.readonly : ReactiveFlags.reactive)) {return isReadonly ? target.__v_readonly : target.__v_reactive}// 只有target在可轉化類型白名單里才會進行轉化，否則直接返回target// canObserve會校驗target的__v_skip是否為true、target類型是否在白名單里、target是否 // 為凍結對象，三折同時滿足才會繼續轉化if (!canObserve(target)) {return target}// 轉化proxy對象，并將轉化后的對象掛載到target的__v_readonly（只讀模式）或__v_reactive（非只讀模式）屬性上const observed = new Proxy(target,// Set、WeakSet、Map、WeakMap類型用的collectionHandlers，其他對象類型使用baseHandlerscollectionTypes.has(target.constructor) ? collectionHandlers : baseHandlers)def(target,isReadonly ? ReactiveFlags.readonly : ReactiveFlags.reactive,observed)return observed }

createGetter：
在createReactiveObject方法里創建Proxy對象時會為Proxy設置handlers，createGetter就是創建getter攔截器的。
涉及到Reflect的可以參考下面鏈接或自行官網查找：
Reflect：Reflect詳解
其實中心思想很簡單，記住一點就可以：反射機制是為了獲取或修改程序運行時信息，ES6將很多object方法統一收容到Reflect上，對外暴露統一的訪問渠道，符合程序設計的合理規范性。Reflect搭配Proxy使用非常棒，本身就是為Proxy量身定制的。
說一下receiver這個參數，主要有以下作用：

• Reflect中可以改變訪問屬性所屬trap（如getter、setter…）的this指向
• Proxy中指向觸發trap的實際來源

舉個例子，當我們訪問某個key時，會觸發Proxy對應的攔截器（handler），而receiver正是指向訪問屬性并觸發handler的真正源頭對象，我們觸發handler自然是通過Proxy實例對象，此時分兩種情況：

直接訪問Proxy實例中的key；

源頭對象（source）原型鏈上有Proxy實例，我們訪問某個key如果source對象本身沒有，會順著原型鏈往下游找，如果遇到Proxy實例，就會觸發對應的handler，那么此時handler中的receiver就指向source。

function createGetter(isReadonly = false, shallow = false) {return function get(target: object, key: string | symbol, receiver: object) {// 訪問對應標志位的處理邏輯if (key === ReactiveFlags.isReactive) {return !isReadonly} else if (key === ReactiveFlags.isReadonly) {return isReadonly} else if (key === ReactiveFlags.raw && receiver ===(isReadonly? (target as any).__v_readonly: (target as any).__v_reactive) // receiver指向調用者，這里的判斷是為了保證觸發攔截handler的是proxy對象本身// 而非proxy的繼承者。觸發攔截器的兩種途徑：1??訪問proxy對象本身的屬性；2??訪問// 訪問對象原型鏈上有proxy對象的對象的屬性，因為查詢屬性會沿著原型鏈向下游依次// 查詢，因此同樣會觸發攔截器) {// 通過proxy對象本身訪問__v_raw屬性，返回target本身，即響應式對象的原始值return target}// 訪問Array對象上的方法，vue3.0對數組方法進行了hack，// 存儲在arrayInstrumentations工具集里const targetIsArray = isArray(target)if (targetIsArray && hasOwn(arrayInstrumentations, key)) {// 這里在調用indexOf等數組方法時是通過proxy來調用的，因此// arrayInstrumentations[key]的this一定指向proxy實例// 也即receiverreturn Reflect.get(arrayInstrumentations, key, receiver)}// Proxy預返回值const res = Reflect.get(target, key, receiver)// key是symbol或訪問的是__proto__屬性不做依賴收集和遞歸響應式轉化，直接返回結果if (isSymbol(key) && builtInSymbols.has(key) || key === '__proto__') {return res}// 只讀target無需收集依賴，因為屬性不會變化，因此無法觸發setter，也就不會觸發依賴更新if (!isReadonly) {// 通過track函數將依賴存儲到對應的全局倉庫中track(target, TrackOpTypes.GET, key)}// 淺轉換至將target的第一層值轉化為響應式，不做遞歸轉化if (shallow) {return res}// 訪問屬性已經是ref對象，保證訪問ref屬性時得到的是ref對象的value屬性值，數組除外if (isRef(res)) {// ref unwrapping, only for Objects, not for Arrays.return targetIsArray ? res : res.value}if (isObject(res)) {// key對應的值如果是對象，需要遞歸的進行響應式轉化，readonly和reactive函數最終// 調用的都是createReactiveObject函數，只是觸發的響應式轉化模式不同// ??此處有一點需要注意，3.0版本對響應式做出了優化。在2.0版本中，響應式轉化// 是在初始化階段一次性遞歸轉化完成，3.0的處理方式則更加優雅，只有getter攔截到// 對象時，才會繼續向對象的下游做響應式轉化，這樣的好處就是：只有真正訪問到的數據// 才會做轉化，如果我們定義了某個數據，但是實際上并沒有使用到它，那么我們不會觸發// getter，自然也就不會繼續做響應式轉化，這樣就做到了“按需轉化”return isReadonly ? readonly(res) /* 只讀響應式轉化 */ : reactive(res) /* 非只讀響應式轉化 */}return res} }

數組方法攔截hack：
響應式系統對數組的兩種類別的原生方法進行了hack：

• 遍歷查找的方法（indexOf, lastIndexOf, includes）
• 改變數組長度的方法（push, pop, shift, unshift, splice）

hack后的方法統一增加了一個this參數，用來指定trap的上下文，通常也就是數組源對象，因為Reflect.get(arrayInstrumentations, key, receiver)獲取到的對應方法上下文默認是指向arrayInstrumentations，但是我們顯然是要操作數組源對象，因此需要傳入對應上下文。

原因：

• 查找遍歷相當于將數組中的元素全部訪問一遍，滿足收集依賴的條件
• 對于改變的數組長度的方法，執行期間會觸發get length和set length，因此會觸發track -> trigger無限循環

vue-next倉庫issues里有對應的測試用例，改變數組長度函數hack也是后期修復這個用例產生的問題才加上的：

const arr = reactive([])watchEffect(()=>{arr.push(1) })

簡單解釋下watchEffect，watchEffect內部會生成一個effect，這個effect的作用就是為了在響應式數據變化時執行它自己，因此通常就是在回調里get響應式數據，后面修改這個數據時再觸發回調執行。在上面的用例中，回調里push會get length將依賴收集起來，然后會set length，這時會觸發剛剛收集的依賴，然后依賴又會重新執行回調，形成track - trigger的死循環。因此要避免訪問改變數組長度的方法在執行期間收集依賴

改變數組長度的方法一定會先get length，再set length，舉個簡單的例子：

const arr = [2, 3, 6， 7， 8] const proxy = new Proxy(arr, {get(target, key, receiver) {console.log('get', key)return Reflect.get(target, key, receiver);},set(target, key, value, receiver) {console.log('set', key, value)return Reflect.set(target, key, value, receiver);} }) proxy.push(2)

打印結果如下：
get push
get length
set 3 2
set length 4

因此需要在對應數組方法執行期間禁用掉依賴收集，在執行完再恢復

const arrayInstrumentations: Record<string, Function> = {}// 查詢遍歷方法 ;(['includes', 'indexOf', 'lastIndexOf'] as const).forEach(key => {const method = Array.prototype[key] as any// 由于直接通過Reflect.get(arrayInstrumentations, key, receiver)取到的// 數組方法this指向arrayInstrumentations，因此函數需要傳入正確的上下文thisarrayInstrumentations[key] = function(this: unknown[], ...args: unknown[]) {// 去掉響應式wrapper，獲取源數組對象const arr = toRaw(this)// 按照數組下標收集依賴for (let i = 0, l = this.length; i < l; i++) {track(arr, TrackOpTypes.GET, i + '')}// 優先調用Array原生方法查找傳入值const res = method.apply(arr, args)if (res === -1 || res === false) {// 沒有查詢到對應的值，有可能是包裝后的響應式數據，有wrapper，引用不同所以// 有可能查不到，嘗試去掉wrapper再查詢return method.apply(arr, args.map(toRaw))} else {return res}} })// 改變數組長度的方法 ;(['push', 'pop', 'shift', 'unshift', 'splice'] as const).forEach(key => {const method = Array.prototype[key] as anyarrayInstrumentations[key] = function(this: unknown[], ...args: unknown[]) {// 執行前禁用依賴收集pauseTracking()const res = method.apply(this, args)// 執行后恢復之前track狀態resetTracking()return res} })

track：
track方法是觸發getter過程中的做依賴收集的函數，會將收集到的依賴添加到依賴倉庫，結構為target -> key -> dep

export function track(target: object, type: TrackOpTypes, key: unknown) {// activeEffect是當前處于激活狀態的effect，也就是觸發getter時當前訪問的effect，// 如果沒有對應的激活態effect，也就沒必要做依賴收集了if (!shouldTrack || activeEffect === undefined) {return}// targetMap為全局數據響應關系倉庫，為Map類型，key為組件數據源，每個數據源對應Map中的// 一個key，value是一個Set，Set中存放的是數據源中每個key對應的deps，即收集的依賴let depsMap = targetMap.get(target)if (!depsMap) {targetMap.set(target, (depsMap = new Map()))}// 數據源中每個key對應的依賴倉庫let dep = depsMap.get(key)if (!dep) {depsMap.set(key, (dep = new Set()))}// 添加激活訂閱者，deps里存儲的effects是收集的訂閱者們（依賴），相當于vue2.0中的watcherif (!dep.has(activeEffect)) {dep.add(activeEffect)activeEffect.deps.push(dep)if (__DEV__ && activeEffect.options.onTrack) {activeEffect.options.onTrack({effect: activeEffect,target,type,key})}} }

createSetter：
響應式對象proxy對應的setter handler，用來做更新派發

function createSetter(shallow = false) {return function set(target: object,key: string | symbol,value: unknown,receiver: object): boolean {const oldValue = (target as any)[key]if (!shallow) {// 通過setter入參的新值獲取它的原始值，新傳入值可能是響應式數據，如果直接和// target上的原始值比較是沒有任何實際意義的value = toRaw(value)// target不是數組，且舊值為ref，新值非ref，直接將ref.value更新為新值if (!isArray(target) && isRef(oldValue) && !isRef(value)) {oldValue.value = valuereturn true}} else {// in shallow mode, objects are set as-is regardless of reactive or not}const hadKey = hasOwn(target, key)const result = Reflect.set(target, key, value, receiver)// don't trigger if target is something up in the prototype chain of original// 這里其實就是為了判斷receiver是proxy實例還是原型鏈上有proxy的對象，只有前者會觸發// 更新派發，防止通過原型鏈觸發攔截器觸發更新。// 這里處理的非常巧妙，看下createGetter代碼，在getter handler中做了一層攔截，當訪問// __v_raw屬性時，只有receiver本身時proxy實例時才會返回target，即原始目標對象。再看// 下面的createSetter代碼，toRaw會訪問receiver的__v_raw屬性，從而觸發getter// handler，由于我們已經做了原型鏈訪問攔截，所以在setter里如果receiver位于原型鏈上，// 那么是訪問不到__v_raw屬性的，因此確保了只有receiver本身是proxy實例才觸發更新派發if (target === toRaw(receiver)) {// 區分是新增屬性和固有屬性if (!hadKey) {trigger(target, TriggerOpTypes.ADD, key, value)} else if (hasChanged(value, oldValue)) {trigger(target, TriggerOpTypes.SET, key, value, oldValue)}}return result} }

trigger：

export function trigger(target: object,type: TriggerOpTypes,key?: unknown,newValue?: unknown,oldValue?: unknown,oldTarget?: Map<unknown, unknown> | Set<unknown> ) {const depsMap = targetMap.get(target)if (!depsMap) {// never been trackedreturn}const effects = new Set<ReactiveEffect>() // 普通effect集合const computedRunners = new Set<ReactiveEffect>() // 計算effect集合// add方法用來將依賴Map中的對應dep Set添加到局部集合中，以便后續觸發（run）// add函數用于過濾出符合條件的依賴，用于批量觸發const add = (effectsToAdd: Set<ReactiveEffect> | undefined) => {if (effectsToAdd) {effectsToAdd.forEach(effect => {// effect和當前激活的effect引用相同，且shouldTrack = true時不會將// 遍歷的effect推入局部Set，shouldTrack為true表示開啟依賴收集模式，// 該模式下，activeEffect是當前正在收集中的依賴，依賴收集未完成不能// 派發該依賴的更新// effect不能和當前激活的effect相同，為了避免effect的無限觸發，比如// effect的getter回調里是foo.value++這種情況，首先foo.value會觸發// Proxy的get攔截器，track收集當前激活的effect，然后// foo.value = foo.value + 1會觸發Proxy的set攔截器，trigger剛剛收集到的// effect，然后effect執行getter回調，會繼續重復相同的過程（同一個effect track// -> trigger），陷入死循環，因此需要避免掉收集當前激活的effectif (effect !== activeEffect || !shouldTrack) {if (effect.options.computed) {computedRunners.add(effect)} else {effects.add(effect)}} else {// the effect mutated its own dependency during its execution.// this can be caused by operations like foo.value++// do not trigger or we end in an infinite loop}})}}if (type === TriggerOpTypes.CLEAR) {// collection being cleared// trigger all effects for target// 清空依賴時，將target對應的依賴map中的依賴全部添加到局部Set，準備triggerdepsMap.forEach(add)} else if (key === 'length' && isArray(target)) {depsMap.forEach((dep, key) => {// 源對象是數組且trigger的key是length，需要觸發length對應的effects，// 同時，由于觸發length時一定是數組長度變化了，當數組長度變短時，需要// 做已刪除數組元素的effects的trigger工作，也就是索引號 >= 數組// 最新length的元素們所對應的effects，對它們做清除后的批量觸發。if (key === 'length' || key >= (newValue as number)) {add(dep)}})} else {// schedule runs for SET | ADD | DELETE// key不是undefined就會觸發依賴局部添加，只不過如果是新增屬性對應的dep為空if (key !== void 0) {add(depsMap.get(key))}// also run for iteration key on ADD | DELETE | Map.SET// 對于新增屬性或者刪除屬性的處理const isAddOrDelete =type === TriggerOpTypes.ADD ||(type === TriggerOpTypes.DELETE && !isArray(target))// 新增或刪除屬性，如果是數組，會觸發length對應的依賴，如果書普通對象，會觸發// ITERATE_KEY對應的依賴；如果是Map設置屬性，會觸發ITERATE_KEYif (isAddOrDelete ||(type === TriggerOpTypes.SET && target instanceof Map)) {// Object新增屬性不會觸發getter，因此無依賴收集，需要觸發ITERATE_KEY收集的依賴add(depsMap.get(isArray(target) ? 'length' : ITERATE_KEY))}// 對于Map新增或刪除屬性，統一觸發MAP_KEY_ITERATE_KEY所對應的依賴if (isAddOrDelete && target instanceof Map) {add(depsMap.get(MAP_KEY_ITERATE_KEY))}}// run函數用來批量執行add方法添加過的effectconst run = (effect: ReactiveEffect) => {if (__DEV__ && effect.options.onTrigger) {effect.options.onTrigger({effect,target,key,type,newValue,oldValue,oldTarget})}if (effect.options.scheduler) {// 非立即執行的effect，即需要使用schedular調度器的effect，比如計算effecteffect.options.scheduler(effect)} else {// 立即執行的effect，無需特殊調度處理effect()}}// Important: computed effects must be run first so that computed getters// can be invalidated before any normal effects that depend on them are run.computedRunners.forEach(run)effects.forEach(run) }

createInstrumentationGetter（ES6集合、映射）：

vue3.0對ES6新增數據結構（我們統稱為collection）單獨做了一套攔截處理機制，因為Map、Set的訪問與修改并不是像普通數據類型那樣直接操作的，而是通過對象提供的API，要想對collection類型對象進行響應式處理，那么就必須在這些API上去做手腳。vue3.0的做法簡單直接，直接對方法進行hack，通過類似于vue2.0對數組方法的hack，通過侵入原生API達到理想效果。

hack的方法有has、delete、add、clear、get、set、forEach，屬性有size，規則類似于普通對象和數組，大致可以分為以下幾類：

設置(set)、添加(add, set)、刪除元素(delete)、清空(clear)時trigger派發更新；

遍歷(forEach)、檢索元素(has)時track收集依賴；

獲取數據結構尺寸(size)，有專門的key來收集依賴

function createInstrumentationGetter(isReadonly: boolean, shallow: boolean) {// 指定對應版本的重寫方法集const instrumentations = shallow? shallowInstrumentations: isReadonly? readonlyInstrumentations: mutableInstrumentationsreturn (target: CollectionTypes,key: string | symbol,receiver: CollectionTypes) => {// ... 省略無關代碼// 核心處理邏輯，如果訪問的是重寫的方法，直接食用重寫方法，否則正常訪問值即可return Reflect.get(hasOwn(instrumentations, key) && key in target? instrumentations: target,key,receiver)} }

collection各方法hack處理
這里僅介紹可變響應式數據對應trap的hack邏輯，對于只讀模式、淺轉化模式的響應式數據trap不加贅述，邏輯也簡單得多，可以理解為可變數據模式響應式數據的閹割版。
PS：trap入參額外傳入this的原因和數組hack一樣。，函數第一個入參都是上下文對象（源對象對應的響應式對象），后面的參數和對應原生API一致

// traps總入口，對collection現有原聲API進行了侵入改寫 const mutableInstrumentations: Record<string, Function> = {get(this: MapTypes, key: unknown) {return get(this, key)},get size() {return size((this as unknown) as IterableCollections)},has,add,set,delete: deleteEntry,clear,forEach: createForEach(false, false) }// get function get(target: MapTypes,key: unknown,isReadonly = false,isShallow = false ) {// target傳入的是Proxy，去wrapper，獲取轉化前的原始值重新賦值給targettarget = (target as any)[ReactiveFlags.RAW]// 將target源對象和訪問的key都去wrapper化（遞歸一路扒光到底），// 獲取未包裝的原始值，因為有可能是經過響應式轉化的const rawTarget = toRaw(target)const rawKey = toRaw(key)// 包裝后的key和原始key均向依賴倉庫進行依賴收集（track）if (key !== rawKey) {!isReadonly && track(rawTarget, TrackOpTypes.GET, key)}!isReadonly && track(rawTarget, TrackOpTypes.GET, rawKey)const { has } = getProto(rawTarget)// 獲取對應的響應式轉換函數const wrap = isReadonly ? toReadonly : isShallow ? toShallow : toReactive// 1. 如果collection源對象有key對應的屬性，通過原生get方法取到值，并對改值// 進行響應式轉換，返回轉換后的響應式對象（按需轉換）// 2. 如果直接通過key未匹配到對應的屬性值，則用去wrapper的key原始值去查找，// 如果找到的話，其他操作和1中相同if (has.call(rawTarget, key)) {return wrap(target.get(key))} else if (has.call(rawTarget, rawKey)) {return wrap(target.get(rawKey))} }// has // has trap在Set和Map中都有，但是入參形式一致，只是參數意義不同，這里的key // 如果是Map那就是鍵值，如果是Set那就是值 function has(this: CollectionTypes, key: unknown, isReadonly = false): boolean {const target = (this as any)[ReactiveFlags.RAW]const rawTarget = toRaw(target)const rawKey = toRaw(key)// 查找的key做對應的依賴收集，和get類似if (key !== rawKey) {!isReadonly && track(rawTarget, TrackOpTypes.HAS, key)}!isReadonly && track(rawTarget, TrackOpTypes.HAS, rawKey)// 返回查詢結果，優先查找key，key匹配不到結果再查詢key原始值對應的查找結果return key === rawKey? target.has(key): target.has(key) || target.has(rawKey) }// size // mutableInstrumentations對size屬性做了getter攔截代理 function size(target: IterableCollections, isReadonly = false) {target = (target as any)[ReactiveFlags.RAW]// 訪問size和數組訪問length類似，都有專門的key做依賴收集// 即ITERATE_KEY!isReadonly && track(toRaw(target), TrackOpTypes.ITERATE, ITERATE_KEY)return Reflect.get(target, 'size', target) }// add function add(this: SetTypes, value: unknown) {value = toRaw(value)const target = toRaw(this)const proto = getProto(target)const hadKey = proto.has.call(target, value)const result = target.add(value)// Set新增的值做依賴收集，由于Set中無重復值，因此用集合元素值做依賴收集的// key是沒有任何問題的if (!hadKey) {trigger(target, TriggerOpTypes.ADD, value, value)}return result }// set function set(this: MapTypes, key: unknown, value: unknown) {// 去wrapper，獲取value和this上下文對象的原始值value = toRaw(value)// target指向collection源對象const target = toRaw(this)const { has, get } = getProto(target)// 判斷源對象是否已經存在key對應的屬性// 1. 優先直接查找源對象是否已有key對應的屬性// 2. 如果1步驟查找不到，再查找key對應原始值對應的屬性在源對象中是否已經存在let hadKey = has.call(target, key)if (!hadKey) {key = toRaw(key)hadKey = has.call(target, key)} else if (__DEV__) {checkIdentityKeys(target, has, key)}// 獲取key對應的舊值const oldValue = get.call(target, key)// 調用原生set APIconst result = target.set(key, value)// trigger: 觸發依賴，新增屬性和更改已有屬性分開進行trigger，// 便于記錄trigger的來源類型if (!hadKey) {trigger(target, TriggerOpTypes.ADD, key, value)} else if (hasChanged(value, oldValue)) {trigger(target, TriggerOpTypes.SET, key, value, oldValue)}return result }// delete // delete也是Set、Map共有的API，入參key在Set中是元素值，在Map中是鍵值 function deleteEntry(this: CollectionTypes, key: unknown) {const target = toRaw(this)const { has, get } = getProto(target)let hadKey = has.call(target, key)if (!hadKey) {key = toRaw(key)hadKey = has.call(target, key)} else if (__DEV__) {checkIdentityKeys(target, has, key)}const oldValue = get ? get.call(target, key) : undefined// forward the operation before queueing reactionsconst result = target.delete(key)// 已有的屬性派發依賴if (hadKey) {trigger(target, TriggerOpTypes.DELETE, key, undefined, oldValue)}return result }// clear // clear操作清空collection中所有數據，因此需要將源對象中所有key對應的依賴全部觸發 function clear(this: IterableCollections) {const target = toRaw(this)const hadItems = target.size !== 0const oldTarget = __DEV__? isMap(target)? new Map(target): new Set(target): undefined// forward the operation before queueing reactionsconst result = target.clear()if (hadItems) {trigger(target, TriggerOpTypes.CLEAR, undefined, undefined, oldTarget)}return result }// forEach // 遍歷方法，和size一樣，用迭代器專鍵值ITERATE_KEY來做依賴收集 function createForEach(isReadonly: boolean, isShallow: boolean) {return function forEach(this: IterableCollections,callback: Function,thisArg?: unknown) {const observed = this as anyconst target = observed[ReactiveFlags.RAW]const rawTarget = toRaw(target)const wrap = isReadonly ? toReadonly : isShallow ? toShallow : toReactive// ITERATE_KEY做依賴收集!isReadonly && track(rawTarget, TrackOpTypes.ITERATE, ITERATE_KEY)// 執行原生forEach方法return target.forEach((value: unknown, key: unknown) => {// important: make sure the callback is// 1. invoked with the reactive map as `this` and 3rd arg// 2. the value received should be a corresponding reactive/readonly.return callback.call(thisArg, wrap(value), wrap(key), observed)})} }// 迭代器方法 // 迭代方法依賴收集同樣是對應特定的key // 如果僅訪問keys，key為 MAP_KEY_ITERATE_KEY // 否則key為 ITERATE_KEY function createIterableMethod(method: string | symbol,isReadonly: boolean,isShallow: boolean ) {return function(this: IterableCollections,...args: unknown[]): Iterable & Iterator {const target = (this as any)[ReactiveFlags.RAW]const rawTarget = toRaw(target)const targetIsMap = isMap(rawTarget)// 方法是否是獲取鍵值對const isPair =method === 'entries' || (method === Symbol.iterator && targetIsMap)// 方法是否僅獲取keysconst isKeyOnly = method === 'keys' && targetIsMap// 直行原生迭代器方法，并獲取迭代器對象: // { next, [Symbol.iterator] }const innerIterator = target[method](...args)const wrap = isReadonly ? toReadonly : isShallow ? toShallow : toReactive// 收集依賴到指定的key!isReadonly &&track(rawTarget,TrackOpTypes.ITERATE,isKeyOnly ? MAP_KEY_ITERATE_KEY : ITERATE_KEY)// 根據原生迭代器的返回值進行hack包裝，包裝成對應的響應式版本的迭代器，// 迭代器對象是通過next方法進行元素訪問的，return {// iterator protocolnext() {// 當前訪問的值和是否迭代完成flagconst { value, done } = innerIterator.next()// 通過next訪問下一個元素（對）時等價于普通數據類型通過get訪問對應屬性值，// 在普通數據類型中如果對應訪問屬性是Object，需要對其進行響應式數據的// 訪問時按需轉化。迭代器其實類似，只不過是通過迭代指向下一個訪問元素，// 因此也需要做同樣的訪問時按需轉換。// 如果done為true說明迭代完成，此時value是undefined，因此沒有必要做// 轉換return done? { value, done }: {value: isPair ? [wrap(value[0]), wrap(value[1])] : wrap(value),done}},// iterable protocol[Symbol.iterator]() {return this}}} }

三、effect模塊

effect：
effect相當于vue2.0中的watcher，靈感來源于react的hooks，但vue3.0整體的設計風格是函數式的，融入了composition API將各個功能模塊做的更加通用化，擁有很高的靈活性，使用時的約束要少得多，vue2.0主要是面向對象式的寫法，很多功能模塊都是封裝在class中，推崇的主要是option API，雖然這樣的好處是看似很多工作都在框架內部完成了，但是靈活性要低得多，而且做大的弊病是代碼復用率很低，比如我想在多處復用一份響應式數據源，正常來說就實現起來不太容易。
effect就是vue3.0中的“依賴”（也可以叫“副作用”），通過響應式數據的getter攔截器進行收集，既然是依賴，就應該具有基礎的組成成分：執行函數（你想讓依賴執行的自定義邏輯，也可以是getter，用于觸發響應式數據訪問）、全局依賴激活能力（以便攔截器收集依賴）、調度能力（用于調度依賴自身，以在合適的時機執行）

export function effect<T = any>(fn: () => T,options: ReactiveEffectOptions = EMPTY_OBJ ): ReactiveEffect<T> {// fn本身就是effect函數if (isEffect(fn)) {fn = fn.raw // effect.raw是effect的執行函數}// 創建一個新的effect函數const effect = createReactiveEffect(fn, options)// 執行effect函數if (!options.lazy) { // lazy在computedEffect會用到，懶更新，不執行effect，而是暴露給外部，由computed// 控制流程來控制effect的執行時機。其他情況立即執行effect函數即可effect()}return effect }

options參數為effect的配置項，結構如下：

export interface ReactiveEffectOptions {lazy?: boolean // 計算屬性懶更新computed?: boolean // 計算屬性scheduler?: (job: ReactiveEffect) => void // 調度處理onTrack?: (event: DebuggerEvent) => void // 依賴收集時的鉤子onTrigger?: (event: DebuggerEvent) => void // 更新派發時的鉤子onStop?: () => void // effect被stop時的鉤子 }

createReactiveEffect：
創建effect函數，effect函數中的fn是執行函數，和vue2.0 watcher.run()類似，fn函數執行會觸發對應target[key]的getter，完成依賴收集，在依賴收集前后采用棧數據結構（effectStack）來做effect的執行調度，保證當前effect的優先級最高，并及時清除已收集依賴的內存。

function createReactiveEffect<T = any>(fn: (...args: any[]) => T,options: ReactiveEffectOptions ): ReactiveEffect<T> {const effect = function reactiveEffect(...args: unknown[]): unknown {if (!effect.active) {return options.scheduler ? undefined : fn(...args)}// effectStack是一個全局effect棧，用于effect調度。if (!effectStack.includes(effect)) { // 防止effect重復添加，因為如果effect在effect棧中，出棧時// 一定會輪到它被收集，沒必要在push一個相同的。// 每次執行effect時做當前effect的清理時非常必要的，目的是// 為了保證當前effect的被持有方（dep）是最新且有效的，因為// 同一effect通常會多次執行，比如最常見的render effect// 但是收集它的getter中內容可是不確定的：// 1. 同一數據源內部會變化，比如刪除某個屬性 // 2. 有不同的數據源來收集同一effect。// 最簡單的來說，對于已刪除的屬性，肯定是不能對曾經持有的effect// 繼續持有，因此每次執行effect時同一清理再重新收集是能夠保證// effect和依賴倉庫間的正確持有關系// 說的更直白一些，getter是生產者，setter是消費者，當effect// 被消費掉后，被清理是保持閉環的關鍵所在cleanup(effect)try {// 重點說明一下：在setup函數自行期間，會將pauseTracking將依賴收集// 停掉，防止無意義的依賴注入，因此需要在effect生成時開放track恢復// 收集，當getter收集當前effect完畢時，將track狀態恢復到上次的狀態enableTracking()// effect壓棧effectStack.push(effect)// 將當前effect設置為全局激活effect，在getter中會收集activeEffect持有的effect// activeEffect表示當前依賴收集系統正在處理的effectactiveEffect = effect// 執行effect的執行函數，比如訪問target[key]，會觸發getter，在getter中// 將activeEffect收集到依賴倉庫。// fn在render時就是render邏輯，即生成vnode并patch到真實dom那一套流程return fn(...args)} finally {// 此時fn執行完畢，依賴已收集到依賴倉庫，因此將當前effect出棧，及時釋放內存effectStack.pop()resetTracking()// 將activeEffect恢復到effect棧中最后一個effect，即上次的activeEffect，繼續// 做該effect的收集工作activeEffect = effectStack[effectStack.length - 1]}}} as ReactiveEffecteffect.id = uid++ // effect的uideffect._isEffect = true // 標記是否是effecteffect.active = true // effect睡否處于激活狀態effect.raw = fn // effect的執行函數effect.deps = [] // 包含當前effect的dep數組effect.options = options // effect的配置項，包含配置項及hooksreturn effect }// 用于停止effect，對于確定已經消費掉的effect進行清理，將effect置為非激活態 // PS: 在watch偵聽中stop會作為停止偵聽的控制器被透出 export function stop(effect: ReactiveEffect) {if (effect.active) {cleanup(effect)if (effect.options.onStop) {effect.options.onStop()}effect.active = false} }// effect清理 function cleanup(effect: ReactiveEffect) {// 遍歷持有當前effect的所有key對應的依賴倉庫，將該effect從依賴倉庫// 中移除const { deps } = effectif (deps.length) {for (let i = 0; i < deps.length; i++) {deps[i].delete(effect)}deps.length = 0} }

四、ref模塊核心方法

createRef：
用于創建ref對象，用于將某個值轉化為響應式對象，不同于reactive方法的是，reactive只能接受object類型的入參，ref可以接受基本類型和引用類型。比如，我們可以這樣創建一個響應式對象：

const state = ref('ref test');

這樣生成的state會掛載getter和setter對value屬性進行代理攔截，訪問value時會通過track函數進行依賴收集，設置value同樣會通過track派發更新。
通常在業務中使用時更推薦直接使用ref方法來生成響應式對象，原因之一如下：

• ref可接受基本類型數據和引用類型數據，你可以直接將一個基本類型的數據轉化為基于全局依賴倉庫托管的響應式對象。
• ref給予createReactive方法封裝，當傳入引用類型數據源時，ref中會調用createReactive方法對數據源進行響應式轉化，因此可以將ref看作createReactive方法的一種擴展。

ref的源碼在rc最后幾個版本進行了形式上的調整，但是總體思路基本沒什么變化，只不過從函數式的實現調整為class形式的實現，至于原因，應該就是ref這塊的整體設計比較純粹、簡單、低耦合，且其trap攔截式的功能很適合抽象成一個class來進行托管，因此這樣的調整也是合理的。
不過這里我依然放之前版本的ref代碼了，大體上思路沒有任何變化。

const convert = <T extends unknown>(val: T): T =>isObject(val) ? reactive(val) : valfunction createRef(rawValue: unknown, shallow = false) {// 已經是ref對象直接返回if (isRef(rawValue)) {return rawValue}// shallow開啟時，代表是淺轉化模式，只對value進行攔截代理，不對value進行遞歸響應式轉化let value = shallow ? rawValue : convert(rawValue)const r = {__v_isRef: true, // 標示是否為ref對象get value() {// 依賴收集track(r, TrackOpTypes.GET, 'value')return value},set value(newVal) {// 當值發生變化時派發更新，需要比較原始值（raw），因為newVal有可能是proxy響應式// 對象，比較proxy的原始值具有更強的準確性if (hasChanged(toRaw(newVal), rawValue)) {rawValue = newVal// 將新設置的值進行對應的響應式轉化value = shallow ? newVal : convert(newVal)trigger(r,TriggerOpTypes.SET,'value',__DEV__ ? { newValue: newVal } : void 0)}}}return r }

四、計算屬性

計算屬性是vue對發布訂閱設計模式和響應式系統的一個很妙的實踐，源碼實現非常簡潔，缺實現了很實用的使用效果，在實際開發中一個computed真的能幫你節省很多不必要的代碼。
我們先拋開vue源碼，如果讓我們自己設計一個computed，作為業務使用方，它的偽代碼應該是類似這樣的：

targetVal = computed(() => {return val1 + val2; })

想要達到的效果：***由響應式數據自動計算出的一個target值供業務使用，當計算依賴的響應式數據發生改變時，動態的計算出最新的target。***并且，期待computed函數包裝后的同樣返回一個響應式數據。
既然是數據發生變化就做某件事，那么大方向上自然而然的就會想到用發布訂閱模式來處理這類場景，只是細節如何處理的問題。
知道了想要什么，那我們再看源碼就會清晰很多了。

export function computed<T>(getterOrOptions: ComputedGetter<T> | WritableComputedOptions<T> ) {let getter: ComputedGetter<T>let setter: ComputedSetter<T>// computed函數可接受兩種類型的入參，1??ComputedGetter，也就是我們傳入的// () => {return a + b}這種回調，這類computed是只讀的，如果我們為生成的// computedRef賦值，會warning；2??包含ComputedGetter和ComputedSetter// 的options，該模式下允許使用者為computedRef.value賦值，此時的computedRef// 完全就是一個響應式對象，因此需要在getter中收集依賴if (isFunction(getterOrOptions)) {getter = getterOrOptionssetter = __DEV__? () => {console.warn('Write operation failed: computed value is readonly')}: NOOP} else {getter = getterOrOptions.getsetter = getterOrOptions.set}let dirty = truelet value: Tlet computed: ComputedRef<T>// 當觸發getter時，getter中的響應式數據會觸發數據對應的getter攔截器，因此下面的// runner會被當作依賴收集到各數據對應的dep中const runner = effect(getter, {// lazy用于標示effect是懶更新，即effect包裝時不立即執行，而是// 返回外部由外部決定執行時機lazy: true, // mark effect as computed so that it gets priority during trigger// 標示是計算屬性，在trigger時保證優先執行computed: true,// 調度，trigger中檢查effect.options中到有scheduler時，會優先執行scheduler回調// 通常非立即執行effect可借助scheduler做一些中間態的過度行為，配合effect外部執行// effect本身的時機，形成一條時序可控的操作流程，比如計算屬性的時序如下：// 1??getter中的響應數據更新，觸發trigger派發更新，trigger中會觸發effect的// scheduler回調，將dirty置為true，等待觸發computedRef；2??getter中的響應數據更新// 同時會觸發渲染effect的執行，渲染effect立即執行，其getter會觸發render函數，重新// 生成vnode -> patch，期間會訪問計算屬性，觸發computedRef的getter，此時由于// 已經在scheduler中將dirty置為true，因此computedEffect的getter會重新計算最新值。scheduler: () => {if (!dirty) {dirty = truetrigger(computed, TriggerOpTypes.SET, 'value')}}})computed = {__v_isRef: true,// expose effect so computed can be stoppedeffect: runner,get value() {// dirty控制get新的計算值的時機，只有dirty為true時才會觸發新的計算if (dirty) {// 執行runner時會觸發effect的getter，也就是我們傳入的計算函數，// 計算函數會觸發對應響應式數據的getter -> track，執行依賴收集，因此計算依賴// 的值會將computed對應的effect存入想對象的dep，當依賴的響應數據// 變化時，觸發對應的setter -> trigger，trigger中對computedEffect有// 相應的處理邏輯，可移步trigger查看～value = runner()dirty = false}// 如果computed非只讀，就需要收集依賴，用于值改變時的triggertrack(computed, TrackOpTypes.GET, 'value')return value},set value(newValue: T) {setter(newValue)}} as anyreturn computed }

五、偵聽

watch在vue2.0中是廣受廣大開發者喜愛的一個功能，可以很方便的對指定數據源的某個屬性進行偵聽，當數據發生變化時在回調里做一些你想做的邏輯，這樣能讓開發者少寫不少重復的代碼，所有數據變化觸發的業務邏輯都寫到watch鉤子里就好了，功能用戶友好且很好維護。
這么方便使用的功能在vue3.0中自然是依舊保留它原有的優點，但是不止如此，watch也迎來了比較重大的升級，其整體的設計風格也是composition API化，不再像2.0中那樣在固定的context中對某一個屬性使用，而是設計的更加獨立化、自由化、廣義化。
可以看下watch的主函數重載部分：

// 數據源組 + 回調 + options // 數據源source為數組，也就是可以傳入一組待偵聽的單體數據源 export function watch<T extends Readonly<Array<WatchSource<unknown> | object>>,Immediate extends Readonly<boolean> = false >(sources: T,cb: WatchCallback<MapSources<T, false>, MapSources<T, Immediate>>,options?: WatchOptions<Immediate> ): WatchStopHandle// 單體數據源 + 回調 + options export function watch<T, Immediate extends Readonly<boolean> = false>(source: WatchSource<T>,cb: WatchCallback<T, Immediate extends true ? (T | undefined) : T>,options?: WatchOptions<Immediate> ): WatchStopHandle// 響應式單體數據源 + 回調 + options export function watch<T extends object,Immediate extends Readonly<boolean> = false >(source: T,cb: WatchCallback<T, Immediate extends true ? (T | undefined) : T>,options?: WatchOptions<Immediate> ): WatchStopHandle

數據源可接受的類型總結：Ref、Reactive Object、函數

// 函數數據源類型 export type WatchEffect = (onInvalidate: InvalidateCbRegistrator) => void// Ref、計算Ref、函數類型 export type WatchSource<T = any> = Ref<T> | ComputedRef<T> | (() => T)

核心處理API doWatch：
doWatch要達到的目的是當數據源(source)發生變化時，觸發回調(cb)的執行，很明顯需要通過發布訂閱模式進行實現，也就順理成章的按照vue3.0的章法來執行：通過getter來收集對應的effect，而effect的實際執行者就是cb
從架構設計層面，watch作為一套偵聽機制，必不可少的就是數據源（source）、執行器（cb）、控制器（watch返回的stop回調）、自定義配置項（options），這樣的架構設計是完美形成閉環：功能實現層實現了基本的偵聽機制，調度控制層可以讓你在你想要的時機去自由的控制偵聽系統的狀態，比如你可以在你的邏輯里去選擇合適stop你的偵聽

function doWatch(source: WatchSource | WatchSource[] | WatchEffect | object,cb: WatchCallback | null,{ immediate, deep, flush, onTrack, onTrigger }: WatchOptions = EMPTY_OBJ,instance = currentInstance ): WatchStopHandle {const warnInvalidSource = (s: unknown) => {warn(`Invalid watch source: `,s,`A watch source can only be a getter/effect function, a ref, ` +`a reactive object, or an array of these types.`)}// 根據數據源解析出對應的getterlet getter: () => anylet forceTrigger = falseif (isRef(source)) {// Refgetter = () => (source as Ref).valueforceTrigger = !!(source as Ref)._shallow} else if (isReactive(source)) {// 響應式數據需要深度偵聽getter = () => sourcedeep = true} else if (isArray(source)) {// 數據源數組，對數組中的各個數據源進行遍歷get，以達到依賴收集的目的getter = () =>source.map(s => {if (isRef(s)) {return s.value} else if (isReactive(s)) {// 遍歷子代數據收集依賴return traverse(s)} else if (isFunction(s)) {return callWithErrorHandling(s, instance, ErrorCodes.WATCH_GETTER)} else {__DEV__ && warnInvalidSource(s)}})} else if (isFunction(source)) {// 函數類型的數據源if (cb) {// getter with cbgetter = () =>callWithErrorHandling(source, instance, ErrorCodes.WATCH_GETTER)} else {// no cb -> simple effectgetter = () => {if (instance && instance.isUnmounted) {return}if (cleanup) {cleanup()}return callWithErrorHandling(source,instance,ErrorCodes.WATCH_CALLBACK,[onInvalidate])}}} else {getter = NOOP__DEV__ && warnInvalidSource(source)}if (cb && deep) {// traverse就是將數據源的所有子代屬性全部get一遍，達到依賴被深層收集的目的const baseGetter = gettergetter = () => traverse(baseGetter())}let cleanup: () => voidconst onInvalidate: InvalidateCbRegistrator = (fn: () => void) => {cleanup = runner.options.onStop = () => {callWithErrorHandling(fn, instance, ErrorCodes.WATCH_CLEANUP)}}// in SSR there is no need to setup an actual effect, and it should be noop// unless it's eagerif (__NODE_JS__ && isInSSRComponentSetup) {if (!cb) {getter()} else if (immediate) {callWithAsyncErrorHandling(cb, instance, ErrorCodes.WATCH_CALLBACK, [getter(),undefined,onInvalidate])}return NOOP}let oldValue = isArray(source) ? [] : INITIAL_WATCHER_VALUEconst job: SchedulerJob = () => {if (!runner.active) {return}if (cb) {// watch(source, cb)// 執行effect（runner）通過getter獲取到偵聽數據的最新值const newValue = runner()if (deep || forceTrigger || hasChanged(newValue, oldValue)) {// cleanup before running cb againif (cleanup) {cleanup()}// 執行偵聽回調，并以新值、舊值、無效化函數作為入參callWithAsyncErrorHandling(cb, instance, ErrorCodes.WATCH_CALLBACK, [newValue,// pass undefined as the old value when it's changed for the first timeoldValue === INITIAL_WATCHER_VALUE ? undefined : oldValue,onInvalidate])// 更新舊值oldValue = newValue}} else {// watchEffectrunner()}}// important: mark the job as a watcher callback so that scheduler knows// it is allowed to self-trigger (#1727)// 標記任務是否允許自我觸發，有回調表示允許自我觸發job.allowRecurse = !!cblet scheduler: ReactiveEffectOptions['scheduler']// 通過調度配置項決定偵聽effect執行時機，可以為同步、延后、前置三種執行時機，通過effect// 的scheduler選項函數來控制if (flush === 'sync') {// 在數據源發生變化時，setter直接同步觸發偵聽effect對應的scheduler函數執行scheduler = job} else if (flush === 'post') {// effect.scheduler實際為queuePostCb(調度器一節有介紹)，也就是說數據源setter觸發時// 會通過queuePostCb將job先推入render effect后置任務隊列，在清空render effect主// 隊列后在批量執行后置任務隊列中的jobs，達到的效果就是偵聽任務在渲染任務全部執行完成// 后在進行調度批量執行scheduler = () => queuePostRenderEffect(job, instance && instance.suspense)} else {// default: 'pre'// 效果和post相反，在渲染任務批量執行前進行批量清隊執行scheduler = () => {if (!instance || instance.isMounted) {queuePreFlushCb(job)} else {// with 'pre' option, the first call must happen before// the component is mounted so it is called synchronously.job()}}}// 偵聽effect主體，lazy模式，非立即執行const runner = effect(getter, {lazy: true,onTrack,onTrigger,scheduler})// 把偵聽effect記錄到組件實例的effect棧里recordInstanceBoundEffect(runner)// 初次執行if (cb) {if (immediate) {// 立即執行effect對應的job，也就是說會立即執行外部傳入的cb回調，// 同時執行runner effect獲取到最新的值作為cb入參，vue會在每次// 執行job()} else {// 非立即執行偵聽，只需要觸發effect getter的執行，完成偵聽依賴的收集oldValue = runner()}} else if (flush === 'post') {queuePostRenderEffect(runner, instance && instance.suspense)} else {runner()}// watch返回執行停止偵聽與狀態清理的回調return () => {// 停止當前的偵聽effectstop(runner)// 由于當前的runner effect已經處于非激活態，無效化的effect需要// 從對應的組件實例上移除掉if (instance) {remove(instance.effects!, runner)}} }

總結

以上是生活随笔為你收集整理的Vue3.0源码解读 - 响应式系统的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。