/*源碼位置:/packages/reactivity/src/reactive.ts*/
/**
?* 創(chuàng)建響應(yīng)式代理對象
?* @param target 被代理對象
?* @param isReadonly 是否只讀
?* @param baseHandlers 普通對象的攔截操作
?* @param collectionHandlers 集合對象的攔截操作
?* @param proxyMap 代理Map
?* @returns?
?*/
function createReactiveObject(
? target: Target,
? isReadonly: boolean,
? baseHandlers: ProxyHandler<any>,
? collectionHandlers: ProxyHandler<any>,
? proxyMap: WeakMap<Target, any>
) {
? //如果不是對象,則警告,Proxy代理只支持對象
? if (!isObject(target)) {
? ? if (__DEV__) {
? ? ? console.warn(`value cannot be made reactive: ${String(target)}`)
? ? }
? ? return target
? }
? //如果被代理對象已經(jīng)是一個(gè)proxy對象且是響應(yīng)式的并且此次創(chuàng)建的新代理對象不是只讀的,則直接返回被代理對象
? //這兒存在一種情況需要重新創(chuàng)建,即被代理對象已經(jīng)是一個(gè)代理對象了,且可讀可寫。但新創(chuàng)建的代理對象是只讀的
? //那么,本次生成的那個(gè)代理對象最終是只讀的。響應(yīng)式必須可讀可寫,只讀的代理對象是非響應(yīng)式的。
? if (
? ? target[ReactiveFlags.RAW] &&
? ? !(isReadonly && target[ReactiveFlags.IS_REACTIVE])
? ) {
? ? return target
? }
? //從map中找,如果對象已經(jīng)被代理過,則直接從map中返回,否則生成代理
? const existingProxy = proxyMap.get(target)
? if (existingProxy) {
? ? return existingProxy
? }
? // 獲取代理類型,即采用集合類型的代理還是普通對象類型的代理
? const targetType = getTargetType(target)
? if (targetType === TargetType.INVALID) {
? ? return target
? }
? // 生成代理對象并存入map中
? const proxy = new Proxy(
? ? target,
? ? targetType === TargetType.COLLECTION ? collectionHandlers : baseHandlers
? )
? proxyMap.set(target, proxy)
? return proxy
}

//源碼位置: /packages/reactivity/src/baseHandlers.ts
function createArrayInstrumentations() {
? const instrumentations: Record<string, Function> = {}
? // instrument identity-sensitive Array methods to account for possible reactive
? // values
? ;(['includes', 'indexOf', 'lastIndexOf'] as const).forEach(key => {
? ? instrumentations[key] = function (this: unknown[], ...args: unknown[]) {
? ? ? //獲取原始數(shù)組
? ? ? const arr = toRaw(this) as any
? ? ? for (let i = 0, l = this.length; i < l; i++) {
? ? ? ? //收集依賴 鍵值為索引 i
? ? ? ? track(arr, TrackOpTypes.GET, i + '')
? ? ? }
? ? ? // 調(diào)用數(shù)組的原始方法
? ? ? const res = arr[key](...args)
? ? ? if (res === -1 || res === false) {
? ? ? ? // 如果不存在，則將參數(shù)參數(shù)轉(zhuǎn)換為原始數(shù)據(jù)在試一次(這兒可能是防止傳入的是代理對象導(dǎo)致獲取失敗)
? ? ? ? return arr[key](...args.map(toRaw))
? ? ? } else {
? ? ? ? return res
? ? ? }
? ? }
? })
? // 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[]) {
? ? ? //由于上面的方法會(huì)改變數(shù)組長度,因此暫停收集依賴，不然會(huì)導(dǎo)致無限遞歸
? ? ? pauseTracking()
? ? ? //調(diào)用原始方法
? ? ? const res = (toRaw(this) as any)[key].apply(this, args)
? ? ? //復(fù)原依賴收集
? ? ? resetTracking()
? ? ? return res
? ? }
? })
? return instrumentations
}

//源碼位置: /packages/reactivity/src/baseHandlers.ts
/**
?* 創(chuàng)建并且返回一個(gè)Get方法
?* @param isReadonly 是否只讀
?* @param shallow 是否淺響應(yīng)
?* @returns?
?*/
function createGetter(isReadonly = false, shallow = false) {
? return function get(target: Target, key: string | symbol, receiver: object) {
? ? //這兒不重要，其實(shí)就是通過代理對象訪問這幾個(gè)特殊屬性時(shí),返回相應(yīng)的值,和響應(yīng)式無關(guān)
? ? if (key === ReactiveFlags.IS_REACTIVE) {
? ? ? return !isReadonly
? ? } else if (key === ReactiveFlags.IS_READONLY) {
? ? ? return isReadonly
? ? } else if (
? ? ? key === ReactiveFlags.RAW &&
? ? ? receiver ===
? ? ? ? (isReadonly
? ? ? ? ? ? shallow
? ? ? ? ? ? ? shallowReadonlyMap
? ? ? ? ? ? : readonlyMap
? ? ? ? ? : shallow
? ? ? ? ? ? shallowReactiveMap
? ? ? ? ? : reactiveMap
? ? ? ? ).get(target)
? ? ) {
? ? ? return target
? ? }
??
? ? const targetIsArray = isArray(target)
? ? //如果是調(diào)用的數(shù)組方法,則調(diào)用重寫后的數(shù)組方法,前提不是只讀的
? ? if (!isReadonly && targetIsArray && hasOwn(arrayInstrumentations, key)) {
? ? ? return Reflect.get(arrayInstrumentations, key, receiver)
? ? }
? ? //調(diào)用原始行為獲取值
? ? const res = Reflect.get(target, key, receiver)
? ? //訪問Symbol對象上的屬性和__proto__,__v_isRef,__isVue這3個(gè)屬性,直接返回結(jié)果值
? ? if (isSymbol(key) ? builtInSymbols.has(key) : isNonTrackableKeys(key)) {
? ? ? return res
? ? }
? ? if (!isReadonly) {
? ? ? //不是只讀,則收集依賴
? ? ? track(target, TrackOpTypes.GET, key)
? ? }
? ? if (shallow) {
? ? ? //如果對象是淺響應(yīng)的 則返回結(jié)果
? ? ? return res
? ? }
? ? if (isRef(res)) {
? ? ? //如果值是Ref對象且是通過數(shù)組代理對象的下標(biāo)訪問的,則不做解包裝操作,否則返回解包裝后的值
? ? ? // ref unwrapping - does not apply for Array + integer key.
? ? ? const shouldUnwrap = !targetIsArray || !isIntegerKey(key)
? ? ? return shouldUnwrap ? res.value : res
? ? }
? ? if (isObject(res)) {
? ? ? //走到這兒需要滿足非淺響應(yīng)。如果結(jié)果是一個(gè)對象,則將改對象轉(zhuǎn)換為只讀代理對象或者響應(yīng)式代理對象返回
? ? ? //e.g.?
? ? ? // test:{
? ? ? // ? a:{
? ? ? // ? ? c:10
? ? ? // ? }
? ? ? // }
? ? ? //以上測試對象當(dāng)訪問屬性a時(shí),此時(shí)res是一個(gè)普通對象,如果不轉(zhuǎn)換為代理對象,則對a.c的操作不會(huì)被攔截處理,導(dǎo)致無法響應(yīng)式處理
? ? ? // 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
? }
}

//源碼位置: /packages/reactivity/src/baseHandlers.ts
/**
?* 創(chuàng)建并返回一個(gè)Set方法
?* @param shallow 是否淺響應(yīng)
?* @returns?
?*/
function createSetter(shallow = false) {
? return function set(
? ? target: object,
? ? key: string | symbol,
? ? value: unknown,
? ? receiver: object
? ): boolean {
? ? //獲取改變之前的值
? ? let oldValue = (target as any)[key]
? ? if (!shallow) {
? ? ? value = toRaw(value)
? ? ? oldValue = toRaw(oldValue)
? ? ? //對Ref類型值的特殊處理
? ? ? //比較2個(gè)值,如果舊值是Ref對象,新值不是,則直接變Ref對象的value屬性
? ? ? if (!isArray(target) && isRef(oldValue) && !isRef(value)) {
? ? ? ? //這兒看似沒有觸發(fā)依賴更新,其實(shí)Ref對象的value進(jìn)行賦值會(huì)觸發(fā)Ref對象的寫操作，在那個(gè)操作里面會(huì)觸發(fā)依賴更新
? ? ? ? oldValue.value = value
? ? ? ? return true
? ? ? }
? ? } else {
? ? ? // in shallow mode, objects are set as-is regardless of reactive or not
? ? }
? ? const hadKey =
? ? ? isArray(target) && isIntegerKey(key)
? ? ? ? ? Number(key) < target.length
? ? ? ? : 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
? ? // 這個(gè)判斷其實(shí)是處理一個(gè)代理對象的原型也是代理對象的情況,以下是測試代碼
? ? // let hiddenValue: any
? ? // const obj = reactive<{ prop?: number }>({})
? ? // const parent = reactive({
? ? // ? set prop(value) {
? ? // ? ? hiddenValue = value
? ? // ? },
? ? // ? get prop() {
? ? // ? ? return hiddenValue
? ? // ? }
? ? // })
? ? // Object.setPrototypeOf(obj, parent)
? ? // obj.prop = 4
? ? // 當(dāng)存在上述情形,第一次設(shè)置值時(shí),由于子代理沒有prop屬性方法,會(huì)觸發(fā)父代理的set方法。父代理的這個(gè)判斷此時(shí)是false,算是一個(gè)優(yōu)化,避免2個(gè)觸發(fā)更新
? ? if (target === toRaw(receiver)) {
? ? ? if (!hadKey) {
? ? ? ? //觸發(fā)add類型依賴更新
? ? ? ? trigger(target, TriggerOpTypes.ADD, key, value)
? ? ? } else if (hasChanged(value, oldValue)) {
? ? ? ? //觸發(fā)set類型依賴更新
? ? ? ? trigger(target, TriggerOpTypes.SET, key, value, oldValue)
? ? ? }
? ? }
? ? return result
? }
}

//源碼位置: /packages/reactivity/src/baseHandlers.ts
/**
?* delete操作符時(shí)觸發(fā)
?* @param target 目標(biāo)對象
?* @param key 鍵值
?* @returns?
?*/
function deleteProperty(target: object, key: string | symbol): boolean {
? const hadKey = hasOwn(target, key)
? const oldValue = (target as any)[key]
? const result = Reflect.deleteProperty(target, key)
? if (result && hadKey) {
? ? //觸發(fā)依賴更新
? ? trigger(target, TriggerOpTypes.DELETE, key, undefined, oldValue)
? }
? return result
}
/**
?* in 操作符時(shí)觸發(fā)
?* @param target 目標(biāo)對象
?* @param key 鍵值
?* @returns?
?*/
function has(target: object, key: string | symbol): boolean {
? const result = Reflect.has(target, key)
? if (!isSymbol(key) || !builtInSymbols.has(key)) {
? ?? ?//收集依賴
? ? track(target, TrackOpTypes.HAS, key)
? }
? return result
}
/**
?* Object.keys()等類似方法時(shí)調(diào)用
?* @param target 目標(biāo)對象
?* @returns?
?*/
function ownKeys(target: object): (string | symbol)[] {
? //收集依賴
? track(target, TrackOpTypes.ITERATE, isArray(target) ? 'length' : ITERATE_KEY)
? return Reflect.ownKeys(target)
}

?? ?//源碼位置 /packages/reactivity/__test__/ref.spec.ts
? ? const a = ref(1)
? ? let dummy
? ? let calls = 0
? ? effect(() => {
? ? ? calls++
? ? ? dummy = a.value;
? ? })
? ? a.value = 2;
? ? //此時(shí)dummy = 2,a對象值的改變觸發(fā)了依賴更新

? ? const a = 1
? ? let dummy
? ? let calls = 0
? ? effect(() => {
? ? ? calls++
? ? ? dummy = a;
? ? })
? ? a= 2;
? ? //此時(shí)dummy = 1,a的改變沒有觸發(fā)依賴更新

class RefImpl<T> {
? private _value: T
? private _rawValue: T
? public dep?: Dep = undefined
? public readonly __v_isRef = true
? constructor(value: T, public readonly _shallow: boolean) {
? ? //原始數(shù)據(jù)
? ? this._rawValue = _shallow ? value : toRaw(value)
? ? //外部訪問到的數(shù)據(jù),轉(zhuǎn)換為響應(yīng)式
? ? this._value = _shallow ? value : toReactive(value)
? }
? get value() {
? ? //跟蹤依賴
? ? trackRefValue(this)
? ? return this._value
? }
? set value(newVal) {
? ? newVal = this._shallow ? newVal : toRaw(newVal)
? ? if (hasChanged(newVal, this._rawValue)) {
? ? ? //如果原始數(shù)據(jù)之間的比較不一樣,則賦值
? ? ? this._rawValue = newVal
? ? ? //把新值轉(zhuǎn)換為響應(yīng)式對象
? ? ? this._value = this._shallow ? newVal : toReactive(newVal)
? ? ? //觸發(fā)依賴
? ? ? triggerRefValue(this, newVal)
? ? }
? }
}
//轉(zhuǎn)換響應(yīng)式對象方法
export const toReactive = <T extends unknown>(value: T): T =>
? isObject(value) ? reactive(value) : value
type CustomRefFactory<T> = (
? track: () => void,
? trigger: () => void
) => {
? get: () => T
? set: (value: T) => void
}
//收集依賴
export function trackRefValue(ref: RefBase<any>) {
? //是否可以收集
? if (isTracking()) {
? ? //獲取原始數(shù)據(jù)
? ? ref = toRaw(ref)
? ? if (!ref.dep) {
? ? ? //如果不存在依賴,就創(chuàng)建一個(gè)依賴對象
? ? ? ref.dep = createDep()
? ? }
? ? //收集依賴
? ? if (__DEV__) {
? ? ? trackEffects(ref.dep, {
? ? ? ? target: ref,
? ? ? ? type: TrackOpTypes.GET,
? ? ? ? key: 'value'
? ? ? })
? ? } else {
? ? ? trackEffects(ref.dep)
? ? }
? }
}
//觸發(fā)依賴更新
export function triggerRefValue(ref: RefBase<any>, newVal?: any) {
? ref = toRaw(ref)
? if (ref.dep) {
? ? if (__DEV__) {
? ? ? triggerEffects(ref.dep, {
? ? ? ? target: ref,
? ? ? ? type: TriggerOpTypes.SET,
? ? ? ? key: 'value',
? ? ? ? newValue: newVal
? ? ? })
? ? } else {
? ? ? triggerEffects(ref.dep)
? ? }
? }
}
/**
?* 自定義響應(yīng)式對象
?*/
class CustomRefImpl<T> {
? public dep?: Dep = undefined
? private readonly _get: ReturnType<CustomRefFactory<T>>['get']
? private readonly _set: ReturnType<CustomRefFactory<T>>['set']
? public readonly __v_isRef = true
? constructor(factory: CustomRefFactory<T>) {
? ? const { get, set } = factory(
? ? ? () => trackRefValue(this),
? ? ? () => triggerRefValue(this)
? ? )
? ? this._get = get
? ? this._set = set
? }
? get value() {
? ? return this._get()
? }
? set value(newVal) {
? ? this._set(newVal)
? }
}

? ? let value = 1
? ? const custom = customRef((track, trigger) => ({
? ? ? get() {
? ? ? ? track()
? ? ? ? return value
? ? ? },
? ? ? set(newValue: number) {
? ? ? ? value = newValue
? ? ? ? trigger()
? ? ? }
? ? }))
? ? let dummy
? ? effect(() => {
? ? ? dummy = custom.value?
? ? })
? ? custom.value = 2
? ? //此時(shí)dummy = 2；

export const enum TrackOpTypes {
? GET = 'get',
? HAS = 'has',
? ITERATE = 'iterate'
}
export const enum TriggerOpTypes {
? SET = 'set',
? ADD = 'add',
? DELETE = 'delete',
? CLEAR = 'clear'
}