export function reactive(target: object) {
  // if trying to observe a readonly proxy, return the readonly version.
  // 是否是只讀響應(yīng)式對(duì)象
  if (isReadonly(target)) {
    return target
  }
  return createReactiveObject(
    target,
    false,
    mutableHandlers,
    mutableCollectionHandlers,
    reactiveMap
  )
}

function createReactiveObject(
  target: Target,
  isReadonly: boolean,
  baseHandlers: ProxyHandler<any>,
  collectionHandlers: ProxyHandler<any>,
  proxyMap: WeakMap<Target, any>
) {
  // 僅對(duì)對(duì)象類型有效（對(duì)象、數(shù)組和 Map、Set 這樣的集合類型），而對(duì) 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
}

if (!isObject(target)) {
    if (__DEV__) {
      console.warn(`value cannot be made reactive: ${String(target)}`)
    }
    return target
}

if (
    target[ReactiveFlags.RAW] &&
    !(isReadonly && target[ReactiveFlags.IS_REACTIVE])
  ) {
    return target
}

const existingProxy = proxyMap.get(target) // 存儲(chǔ)響應(yīng)式對(duì)象
if (existingProxy) {
    return existingProxy
}

const targetType = getTargetType(target)
if (targetType === TargetType.INVALID) {
    return target
}

// getTargetType源碼
function getTargetType(value: Target) {
  return value[ReactiveFlags.SKIP] || !Object.isExtensible(value) // 不可擴(kuò)展
    ? TargetType.INVALID
    : targetTypeMap(toRawType(value))
}

// ReactiveFlags枚舉
export const enum ReactiveFlags {
  // 用于標(biāo)識(shí)一個(gè)對(duì)象是否不可被轉(zhuǎn)為代理對(duì)象，對(duì)應(yīng)的值是 __v_skip 
  SKIP = '__v_skip', 
  // 用于標(biāo)識(shí)一個(gè)對(duì)象是否是響應(yīng)式的代理，對(duì)應(yīng)的值是 __v_isReactive
  IS_REACTIVE = '__v_isReactive', 
  // 用于標(biāo)識(shí)一個(gè)對(duì)象是否是只讀的代理，對(duì)應(yīng)的值是 __v_isReadonly
  IS_READONLY = '__v_isReadonly',
  // 用于標(biāo)識(shí)一個(gè)對(duì)象是否是淺層代理，對(duì)應(yīng)的值是 __v_isShallow
  IS_SHALLOW = '__v_isShallow',
  // 用于保存原始對(duì)象的 key，對(duì)應(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)
}

const proxy = new Proxy(
    target,
    targetType === TargetType.COLLECTION ? collectionHandlers : baseHandlers
)

export const mutableHandlers: ProxyHandler<object> = {
  get,
  set,
  deleteProperty,
  has,
  ownKeys
}

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ù)組的一些方法，那么返回對(duì)應(yīng)的方法
      
    /**
     * Vue3中使用 arrayInstrumentations對(duì)數(shù)組的部分方法做了處理，為什么要這么做呢？ 
     * 對(duì)于 push、pop、 shift、 unshift、 splice 這些方法，
     * 寫入和刪除時(shí)底層會(huì)獲取當(dāng)前數(shù)組的length屬性，如果我們?cè)趀ffect中使用的話，
     * 會(huì)收集length屬性的依賴，當(dāng)使用這些api是也會(huì)更改length，就會(huì)造成死循環(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
    }

    // 如果不是只讀的，那么進(jìn)行依賴收集
    if (!isReadonly) {
      track(target, TrackOpTypes.GET, key)
    }

    // 如果是淺的，那么直接返回 res
    if (shallow) {
      return res
    }
    // 如果 res 是 ref，對(duì)返回的值進(jìn)行解包
    if (isRef(res)) {
      // ref unwrapping - skip unwrap for Array + integer key.
      return targetIsArray && isIntegerKey(key) ? res : res.value
    }
    // 如果 res 是對(duì)象，遞歸代理
    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
  }
}

  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[]) {
      // 由于上面的方法會(huì)改變數(shù)組長度,因此暫停收集依賴，不然會(huì)導(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
}

let arr = [1,2,3]
let obj = {
    'push': function(...args) {
        // 暫停收集依賴邏輯
        return Array.prototype.push.apply(this, [...args])
        // 啟動(dòng)收集依賴邏輯
    }
}
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;
    }

// 如果不是只讀的，那么進(jìn)行依賴收集
    if (!isReadonly) {
        track(target, "get" /* TrackOpTypes.GET */, key);
    }

if (shallow) {
  return res;
}

 // 如果 res 是 ref，對(duì)返回的值進(jìn)行解包
    if (isRef(res)) {
        // 對(duì)于數(shù)組和整數(shù)類型的 key，不進(jìn)行解包
        return targetIsArray && isIntegerKey(key) ? res : res.value;
    }

 // 如果 res 是對(duì)象，那么對(duì)返回的值進(jìn)行遞歸代理
    if (isObject(res)) {
        return isReadonly ? readonly(res) : reactive(res);
    }

const set = /*#__PURE__*/ createSetter()

function createSetter(shallow = false) {
  // 返回一個(gè)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)
      }
      // 代理對(duì)象非數(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ù)組的長度，那么就是有這個(gè) key ： 
    // 如果不是數(shù)組，那么就是普通對(duì)象，直接判斷是否有這個(gè) key
    // 數(shù)組會(huì)觸發(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
    // 如果目標(biāo)對(duì)象是原始數(shù)據(jù)的原型鏈中的某個(gè)元素，則不會(huì)觸發(fā)依賴收集
    if (target === toRaw(receiver)) {
      if (!hadKey) {// 如果沒有這個(gè) key，那么就是新增了一個(gè)屬性，觸發(fā) add 事件
        trigger(target, TriggerOpTypes.ADD, key, value)
      } else if (hasChanged(value, oldValue)) { // // 如果有這個(gè) key，那么就是修改了一個(gè)屬性，觸發(fā) set 事件
        trigger(target, TriggerOpTypes.SET, key, value, oldValue)
      }
    }
    // 返回結(jié)果，這個(gè)結(jié)果為 boolean 類型，代表是否設(shè)置成功
    return result
  }
}

let oldValue = target[key];

// 如果舊值是只讀的，并且是 ref，并且新值不是 ref，那么直接返回 false，代表設(shè)置失敗
    if (isReadonly(oldValue) && isRef(oldValue) && !isRef(value)) {
        return false;
    }