详解Vue3中响应式的特殊处理

const obj = {foo: 1}
const ITERATE_KEY = symbol()
const p = new Proxy(obj, {
   track(target, ITERATE_KEY)
   return Reflect.ownKeys(target)
})

trigger(target, isArray(target) ? 'length' : ITERATE_KEY) // 数组的情况追踪 length

effect(() => {
    for(let i in obj) {
        console.log(i)
    }
})

p.newKey = 1

function createSetter(shallow = false) {
  return function set(
    target: object,
    key: string | symbol,
    value: unknown,
    receiver: object
  ): boolean {
    let oldValue = (target as any)[key]
    ...
    // 这里是表明是否有 key 也就是判断是否是新增元素
    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
    if (target === toRaw(receiver)) {
      if (!hadKey) {
         // 这里表明是新增元素时，走的 trigger 逻辑
        trigger(target, TriggerOpTypes.ADD, key, value)
      } else if (hasChanged(value, oldValue)) {
        trigger(target, TriggerOpTypes.SET, key, value, oldValue)
      }
    }
    return result
  }
}

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 tracked
    return
  }
    ...

    // also run for iteration key on ADD | DELETE | Map.SET
    switch (type) {
    // 这种情况就是我们刚刚确定的 trigger 的执行
      case TriggerOpTypes.ADD:
        if (!isArray(target)) {
        // 拿到收集的 ITERATE_KEY 的依赖
          deps.push(depsMap.get(ITERATE_KEY))
          if (isMap(target)) {
            deps.push(depsMap.get(MAP_KEY_ITERATE_KEY))
          }
        } else if (isIntegerKey(key)) {
          // new index added to array -> length changes
          deps.push(depsMap.get('length'))
        }
        break
         ...
  }
    for (const dep of deps) {
      if (dep) {
        effects.push(...dep)
      }
    }
    ...
    triggerEffects(createDep(effects))
    ...
  }
}

function triggerEffect(
  effect: ReactiveEffect,
  debuggerEventExtraInfo?: DebuggerEventExtraInfo
) {
  if (effect !== activeEffect || effect.allowRecurse) {
    if (__DEV__ && effect.onTrigger) {
      effect.onTrigger(extend({ effect }, debuggerEventExtraInfo))
    }
    if (effect.scheduler) {
      effect.scheduler()
    } else {
     // 执行所有的 effect 函数
      effect.run()
    }
  }
}

const obj = {}
const arr = reactive([obj])
console.log(arr.includes(obj) // false

new Proxy(obj, {
    get() {
        if (!isReadonly && targetIsArray && hasOwn(arrayInstrumentations, key)) {
          return Reflect.get(arrayInstrumentations, key, receiver)
        }
    }
})
   
const arrayInstrumentations =  createArrayInstrumentations()

// 处理集中数组遍历方法中的问题。
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[]) {
      const arr = toRaw(this) as any
      for (let i = 0, l = this.length; i < l; i++) {
        track(arr, TrackOpTypes.GET, i + '')
      }
      // we run the method using the original args first (which may be reactive)
      // 先使用原始参数，可能是原始对象，也可能是代理对象。
      const res = arr[key](...args)
      if (res === -1 || res === false) {
        // if that didn't work, run it again using raw values.
        // 如果没有找到，就拿到原始参数去比较，脱完响应式的数据。
        return arr[key](...args.map(toRaw)) 
      } else {
        return res
      }
    }
  })

cosnt arr = reactive([])
effect(() => {
    arr.push(1)
})
effect(() => {
    arr.push(1)
})

;(['push', 'pop', 'shift', 'unshift', 'splice'] as const).forEach(key => {
    instrumentations[key] = function (this: unknown[], ...args: unknown[]) {
      // 禁止追踪变化， 
      pauseTracking()
      const res = (toRaw(this) as any)[key].apply(this, args)
      // 等函数执行完毕时再回复追踪。
      resetTracking()
      return res
    }
  })