export interface Target {  [ReactiveFlags.SKIP]?: boolean // 是否无效标识，用于跳过监听  [ReactiveFlags.IS_REACTIVE]?: boolean // 是否已被reactive相关api处理过  [ReactiveFlags.IS_READONLY]?: boolean // 是否被readonly相关api处理过  [ReactiveFlags.RAW]?: any // 当前代理对象的源对象，即target}

export const reactiveMap = new WeakMap<Target, any>()export const shallowReactiveMap = new WeakMap<Target, any>()export const readonlyMap = new WeakMap<Target, any>()export const shallowReadonlyMap = new WeakMap<Target, any>()

export function reactive(target: object) {  if (target && (target as Target)[ReactiveFlags.IS_READONLY]) {      // 如果监听目标仅可读    return target // 那么直接返回目标本身  } ...}

export function reactive(target: object) {  if (target && (target as Target)[ReactiveFlags.IS_READONLY]) { // 如果监听目标仅可读    return target // 那么直接返回目标本身  }  return createReactiveObject(     target, // 监听目标    false, // 不是只读    mutableHandlers, // 可变数据的常规处理方案    mutableCollectionHandlers, // 可变集合相关数据的特殊处理方案    reactiveMap // 一个WeakMap仓库，用于存取，键为监听目标，值为目标的代理对象的映射关系    // （由于WeakMap是弱引用，键被销毁则值同步被销毁，一般用以节约内存空间，优化性能）  )}

function createReactiveObject(  target: Target,  isReadonly: boolean,  baseHandlers: ProxyHandler<any>,  collectionHandlers: ProxyHandler<any>,  proxyMap: WeakMap<Target, any>) {  if (!isObject(target)) { // 如果监听目标并不是一个Object类型(Object,Array,Set,Map,WeakSet,WeakMap)的数据类型，例如简单数据类型    if (__DEV__) { // 开发环境下报一个warning提示用户      console.warn(`value cannot be made reactive: ${String(target)}`)    }    return target // 直接返回目标本身  }  if (    target[ReactiveFlags.RAW] && // 如果监听目标已经是一个proxy对象    !(isReadonly && target[ReactiveFlags.IS_REACTIVE]) // 并且不只读，也不是vue为其添加的响应式  ) { // 这意味着如果使用readonly处理一个已经经过reactive包装过的代理对象时，将会直接返回    return target  } ...}

function createReactiveObject(  target: Target,  isReadonly: boolean,  baseHandlers: ProxyHandler<any>,  collectionHandlers: ProxyHandler<any>,  proxyMap: WeakMap<Target, any>) {  ...  // 如果目标已经是一个proxy  const existingProxy = proxyMap.get(target) // 先去weakmap里面找一找当前的target  if (existingProxy) { // 如果target已经被监听且推入weakmap仓库中    return existingProxy // 则处于节约性能的考虑，直接返回已经被监听过的proxy对象（所以你不必担心自己重新reactive一个目标，因为vue3会为你处理好他，并不会报错）  }  ...  }

export const reactiveMap = new WeakMap<Target, any>()

function createReactiveObject(  target: Target,  isReadonly: boolean,  baseHandlers: ProxyHandler<any>,  collectionHandlers: ProxyHandler<any>,  proxyMap: WeakMap<Target, any>) 
  ...  const targetType = getTargetType(target)  if (targetType === TargetType.INVALID) { // 如果目标不可拓展(即configerable 为 false)，就直接返回    return target // 原因是proxy无法成功代理configerable为false的目标，导致代理失效，所以还不如直接返回目标算了  }  ...}

export function defineReactive (  obj: Object,  key: string,  val: any,  customSetter?: ?Function,  shallow?: boolean) {  const dep = new Dep()
  const property = Object.getOwnPropertyDescriptor(obj, key)  if (property && property.configurable === false) {    return  }  ...使用Object.defineProperty进行数据监听}

function createReactiveObject(  target: Target,  isReadonly: boolean,  baseHandlers: ProxyHandler<any>,  collectionHandlers: ProxyHandler<any>,  proxyMap: WeakMap<Target, any>) {  ...前置判断逻辑  const proxy = new Proxy( // 如果上述条件都不符合，则生成一个proxy（当然这也是最常规最常用的逻辑）    target,    targetType === TargetType.COLLECTION ? collectionHandlers : baseHandlers // 如果监听目标是map，set， wset，wmap之流，就单起一个handler，如果是常规数据就用常规handler  )  proxyMap.set(target, proxy) // 将目标与目标生成的proxy，作为键值对放入weakmap中，一方面可以自动进行去重，另一方面当监听目标被销毁，proxy也会立即销毁，节约性能  return proxy // 返回依托监听目标而生成的proxy对象（不可结构赋值，解构赋值会使代理失效而变成普通属性）}

const get = /*#__PURE__*/ createGetter()const shallowGet = /*#__PURE__*/ createGetter(false, true)const readonlyGet = /*#__PURE__*/ createGetter(true)const shallowReadonlyGet = /*#__PURE__*/ createGetter(true, true)

function createGetter(isReadonly = false, shallow = false) {  return function get(target: Target, key: string | symbol, receiver: object) {  ...}

function createGetter(isReadonly = false, shallow = false) {  return function get(target: Target, key: string | symbol, receiver: object) {    // 这部分判断只要是用来处理reactive中的ReactiveFlags的私有属性的get    if (key === ReactiveFlags.IS_REACTIVE) { // 如果取到__v_isReactive私有属性      // 这里有两层意思，一来如果数据源不为readonly，则取__v_isReactive直接返回true      // 二来如果数据源是readonly的，无法set自然无需触发trigger，即不是响应式的      return !isReadonly // 则返回isReadonly的反值    } else if (key === ReactiveFlags.IS_READONLY) { // 如果取的是__v_isReadonly      return isReadonly // 直接返回传入的isReadonly    } else if ( // 如果取的是__v_raw，则直接从监听仓库中取到对应receiver的键（receiver既是new Proxy的返回值）,这个键就是代理的原始值      key === ReactiveFlags.RAW &&      receiver ===        (isReadonly          ? shallow            ? shallowReadonlyMap            : readonlyMap          : shallow            ? shallowReactiveMap            : reactiveMap        ).get(target)    ) {      return target    }   ...  }}

function createGetter(isReadonly = false, shallow = false) {  return function get(target: Target, key: string | symbol, receiver: object) {    ...    const targetIsArray = isArray(target) // isArray就是Array.isArray,干净又卫生
    // 取诸如 push pop shift unshift splice (会更改lenggh) 和 indexOf lastIndexOf includes（获取元素位置）的原型方法    // 由于proxy对象的对于get set的代理，所以需要做一些特殊处理    if (!isReadonly && targetIsArray && hasOwn(arrayInstrumentations, key)) {      return Reflect.get(arrayInstrumentations, key, receiver)    }    ...  }}

const arrayInstrumentations: Record<string, Function> = {}

;(['includes', 'indexOf', 'lastIndexOf'] as const).forEach(key => {  const method = Array.prototype[key] as any  arrayInstrumentations[key] = function(this: unknown[], ...args: unknown[]) {    // 由于上面的三种方法，会多对方法本身和length分别进行一个get    // 出于节约性能考虑，我们直接取出原始值，然后遍历进行track get    // 然后再执行原始方法    const arr = toRaw(this)    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 = method.apply(arr, args)
    // 如果目标数组所包含的元素中含有已经被代理过的元素    // 而此时用户肯定会直接arrTarget.includes(item)    // 而不是arrTarget.includes(proxyItem)    // 故而我们需要将其原始值取出来，然后再执行一次includes才能获得正确的结果    if (res === -1 || res === false) {      // if that didn't work, run it again using raw values.      return method.apply(arr, args.map(toRaw))    } else {      return res    }  }})

const arr = toRaw(this)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 = method.apply(arr, args)

if (res === -1 || res === false) {  // if that didn't work, run it again using raw values.  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 any  arrayInstrumentations[key] = function(this: unknown[], ...args: unknown[]) {    pauseTracking()    const res = method.apply(this, args)    resetTracking()    return res  }})

function createGetter(isReadonly = false, shallow = false) {  return function get(target: Target, key: string | symbol, receiver: object) {    ...    const res = Reflect.get(target, key, receiver) // 使用原生Reflect进行get取值
    if ( // 取symbol或者私有属性或者原型对象则直接返回，无需触发track      isSymbol(key)        ? builtInSymbols.has(key as symbol)        : isNonTrackableKeys(key)    ) {      return res    }     ...  }}

function createGetter(isReadonly = false, shallow = false) {  return function get(target: Target, key: string | symbol, receiver: object) {    ...    if (!isReadonly) { // 因为readonly只能get不能set，不能set就不需要trigger，不需要trigger就不需要track      track(target, TrackOpTypes.GET, key) // 除了上述的部分原型链方法和自由属性等，就需要要触发track    }    ...   }}

function createGetter(isReadonly = false, shallow = false) {  return function get(target: Target, key: string | symbol, receiver: object) {    ...    if (shallow) { // 如果是浅响应，就不需要走下面的逻辑了，因为不需要深层监听      return res // 直接监听完返回就好了    }
    if (isRef(res)) { // 通过__v_isRef判断是否为ref包装的数据      // ref unwrapping - does not apply for Array + integer key.      const shouldUnwrap = !targetIsArray || !isIntegerKey(key)      return shouldUnwrap ? res.value : res    }    // 如果是对象 数组 集合 映射 (因为这里用的是typeof) 的话，由于proxy只能监听一层数据    // 所以需要返回一个深层响应的代理数据(保证底层级数据的get能够触发track，set能触发trigger)    if (isObject(res)) {       return isReadonly ? readonly(res) : reactive(res)    }
    return res   }}

function createSetter(shallow = false) {  return function set(    target: object,    key: string | symbol,    value: unknown,    receiver: object): boolean {    let oldValue = (target as any)[key] // 首先把老值取出来，没有则undefined    if (!shallow) { // 如果不是浅监听      value = toRaw(value)      oldValue = toRaw(oldValue)      if (!isArray(target) && isRef(oldValue) && !isRef(value)) {         // 如果target不是数组且老值是ref数据，新值不是ref数据（常规数据类型）        oldValue.value = value // 则用赋值ref的方法，取出value并用新值赋值        return true // 直接return       }    }    ...  }}

function createSetter(shallow = false) {  return function set(    target: object,    key: string | symbol,    value: unknown,    receiver: object): boolean {  ...    const hadKey =      isArray(target) && isIntegerKey(key)        ? Number(key) < target.length        : hasOwn(target, key)    const result = Reflect.set(target, key, value, receiver) // 走常规set逻辑    // don't trigger if target is something up in the prototype chain of original    if (target === toRaw(receiver)) {      if (!hadKey) { // 是否更改的是已有的键        trigger(target, TriggerOpTypes.ADD, key, value) // 如果没有则触发新增trigger      } else if (hasChanged(value, oldValue)) {        trigger(target, TriggerOpTypes.SET, key, value, oldValue) // 如果有则触发触发更改trigger      }    }    return result  }}

export function effect<T = any>(  fn: () => T,  options: ReactiveEffectOptions = EMPTY_OBJ // dev环境下empty_obj已被冻结): ReactiveEffect<T> {  if (isEffect(fn)) { // 如果参数函数已经是个effect    fn = fn.raw // 则取出原函数  }  const effect = createReactiveEffect(fn, options) // 执行createReactiveEffect生成effect  if (!options.lazy) { // 如果此时的effect非惰性    effect() // 则直接执行  }  return effect // 返回生成的effect}

function createReactiveEffect<T = any>(   fn: () => T,  options: ReactiveEffectOptions): ReactiveEffect<T> {  const effect = function reactiveEffect(): unknown {    if (!effect.active) {      return options.scheduler ? undefined : fn()    }    if (!effectStack.includes(effect)) {      cleanup(effect)      try {        enableTracking()        effectStack.push(effect)        activeEffect = effect        return fn()      } finally {        effectStack.pop()        resetTracking()        activeEffect = effectStack[effectStack.length - 1]      }    }  } as ReactiveEffect  effect.id = uid++  effect.allowRecurse = !!options.allowRecurse // 是否允许重复  effect._isEffect = true // 标识是否被createReactiveEffect处理过  effect.active = true // 被createReactiveEffect处理过，会被标识激活，active为true  effect.raw = fn // 原函数会被挂载到raw属性上去，方便溯源  effect.deps = [] // 依赖收集器  effect.options = options // 将原options直接全量挂载在effect上  return effect}

export function trigger(  target: object,  type: TriggerOpTypes,  key?: unknown,  newValue?: unknown,  oldValue?: unknown,  oldTarget?: Map<unknown, unknown> | Set<unknown>) {  const depsMap = targetMap.get(target) // 先从监听数据的仓库里把触发trigger的数据源对应的depsMap取出来  if (!depsMap) { // 如果没有，说明该target中的属性并没有被track    return      return   }
  const effects = new Set<ReactiveEffect>()  const add = (effectsToAdd: Set<ReactiveEffect> | undefined) => {    if (effectsToAdd) {      effectsToAdd.forEach(effect => {        if (effect !== activeEffect || effect.allowRecurse) {          effects.add(effect)        }      })    }  }...}

export function trigger(  target: object,  type: TriggerOpTypes,  key?: unknown,  newValue?: unknown,  oldValue?: unknown,  oldTarget?: Map<unknown, unknown> | Set<unknown>) {  ...  if (type === TriggerOpTypes.CLEAR) {    // collection being cleared    // trigger all effects for target    depsMap.forEach(add)  } else if (key === 'length' && isArray(target)) {    depsMap.forEach((dep, key) => {      if (key === 'length' || key >= (newValue as number)) {        add(dep)      }    })  } else {    // schedule runs for SET | ADD | DELETE    if (key !== void 0) {      add(depsMap.get(key))    }
    // also run for iteration key on ADD | DELETE | Map.SET    switch (type) {      case TriggerOpTypes.ADD:        if (!isArray(target)) {          add(depsMap.get(ITERATE_KEY))          if (isMap(target)) {            add(depsMap.get(MAP_KEY_ITERATE_KEY))          }        } else if (isIntegerKey(key)) {          // new index added to array -> length changes          add(depsMap.get('length'))        }        break      case TriggerOpTypes.DELETE:        if (!isArray(target)) {          add(depsMap.get(ITERATE_KEY))          if (isMap(target)) {            add(depsMap.get(MAP_KEY_ITERATE_KEY))          }        }        break      case TriggerOpTypes.SET:        if (isMap(target)) {          add(depsMap.get(ITERATE_KEY))        }        break    }  }...}

export function trigger(  target: object,  type: TriggerOpTypes,  key?: unknown,  newValue?: unknown,  oldValue?: unknown,  oldTarget?: Map<unknown, unknown> | Set<unknown>) { ...  const run = (effect: ReactiveEffect) => {    if (__DEV__ && effect.options.onTrigger) {      effect.options.onTrigger({        effect,        target,        key,        type,        newValue,        oldValue,        oldTarget      })    }    if (effect.options.scheduler) { // 如果在template中有使用的话，直接调用调度器，触发rerender更新template数据      effect.options.scheduler(effect)    } else {      effect()    }  }
  effects.forEach(run)}

export function ref(value?: unknown) { // 生成一个ref，上方是ts的重载  return createRef(value) // 直接调用createRef}

export function shallowRef<T extends object>(  value: T): T extends Ref ? T : Ref<T>export function shallowRef<T>(value: T): Ref<T>export function shallowRef<T = any>(): Ref<T | undefined>export function shallowRef(value?: unknown) { // 生成一个shallowRef，上方是ts的重载  return createRef(value, true) // 直接调用createRef}

function createRef(rawValue: unknown, shallow = false) {  if (isRef(rawValue)) { // 如果rawValue已经是ref了    return rawValue // 那么就直接返回rawValue  }  return new RefImpl(rawValue, shallow) // 反之则返回一个RefImpl实例}

class RefImpl<T> { // ref实现类(Implement)  private _value: T
  public readonly __v_isRef = true // 提一个问题：typescript的readonly和abstract类是如何实现的？
  constructor(private _rawValue: T, public readonly _shallow = false) { // 传入一个rawValue参数，以及一个用于甄别是否为shallow的参数，默认为deep监听模式    this._value = _shallow ? _rawValue : convert(_rawValue) // 如果是浅监听则私有value直接为rawValue，如果是深监听且为对象则直接调用creative进行包装  }
  get value() {    // 取值的时候触发track，target为经过toRaw处理过的this(RefImpl的实例)    // 至于为什么要使用toRaw处理this，主要是为了处理_rawValue为reactive的情况    track(toRaw(this), TrackOpTypes.GET, 'value')    return this._value  }
  set value(newVal) {    if (hasChanged(toRaw(newVal), this._rawValue)) { // 如果值有所变化且NaN赋值给NaN并不会触发此逻辑，其实用Object.is()会更好      this._rawValue = newVal // 修改_rawValue      this._value = this._shallow ? newVal : convert(newVal) // 如果是深度监听需要重新建立reactive      trigger(toRaw(this), TriggerOpTypes.SET, 'value', newVal) // 赋值后触发trigger，同样使用toRaw生成target    }  }}

export function triggerRef(ref: Ref) {  // 手动触发与当前ref绑定的副作用  trigger(toRaw(ref), TriggerOpTypes.SET, 'value', __DEV__ ? ref.value : void 0)}

export function customRef<T>(factory: CustomRefFactory<T>): Ref<T> {  return new CustomRefImpl(factory) as any // 传入一个工厂参数至用户自定义ref实现类中}

class CustomRefImpl<T> {  private readonly _get: ReturnType<CustomRefFactory<T>>['get']  private readonly _set: ReturnType<CustomRefFactory<T>>['set']
  public readonly __v_isRef = true // 添加ref标识
  constructor(factory: CustomRefFactory<T>) {    const { get, set } = factory( // 工厂参数是一个拥有track和trigger的函数，返回的是经过用户自定义逻辑的get和set      () => track(this, TrackOpTypes.GET, 'value'), // 触发监听      () => trigger(this, TriggerOpTypes.SET, 'value') // 触发响应    )    this._get = get    this._set = set  }
  get value() {    return this._get() // 触发get  }
  set value(newVal) {    this._set(newVal) // 触发set  }}

export function toRefs<T extends object>(object: T): ToRefs<T> {  if (__DEV__ && !isProxy(object)) { // 如果传入的object不是proxy处理过的响应式数据则直接报错    console.warn(`toRefs() expects a reactive object but received a plain one.`)  }  const ret: any = isArray(object) ? new Array(object.length) : {} // 创建一个空值，等长数组或者一个空对象  for (const key in object) {    ret[key] = toRef(object, key) // 调用toRef依次取值赋值  }  return ret}

export function toRef<T extends object, K extends keyof T>(  object: T,  key: K): ToRef<T[K]> {  return isRef(object[key]) // 值已经为ref了，必定内嵌响应式    ? object[key] // 则直接返回，兜底逻辑，实际开发无意义    : (new ObjectRefImpl(object, key) as any) // 如果不是ref则返回ObjectImpl实例}

class ObjectRefImpl<T extends object, K extends keyof T> {  public readonly __v_isRef = true // 为其打上ref标记
  constructor(private readonly _object: T, private readonly _key: K) {}
  get value() { // 相较于上方的refimpl缺啥了track逻辑，这是为什么呢？？？    return this._object[this._key] // 直接取值  }
  set value(newVal) { // 相较于上方的refimpl缺啥了trigger逻辑，这是为什么呢？？？    this._object[this._key] = newVal // 直接赋值  }}

export function computed<T>(getter: ComputedGetter<T>): ComputedRef<T>export function computed<T>(  options: WritableComputedOptions<T>): WritableComputedRef<T>export function computed<T>(  getterOrOptions: ComputedGetter<T> | WritableComputedOptions<T>) {  let getter: ComputedGetter<T>  let setter: ComputedSetter<T>
  if (isFunction(getterOrOptions)) { // 传入options是函数则默认为setter    getter = getterOrOptions    setter = __DEV__      ? () => {          console.warn('Write operation failed: computed value is readonly')        }      : NOOP  } else { // 若是对象则拆解set，get分别赋值    getter = getterOrOptions.get    setter = getterOrOptions.set  }
  return new ComputedRefImpl( // 返回一个 ComputedRefImpl 实例，get会触发track    getter,    setter,    isFunction(getterOrOptions) || !getterOrOptions.set  ) as any}

class ComputedRefImpl<T> {  private _value!: T  private _dirty = true
  public readonly effect: ReactiveEffect<T>
  public readonly __v_isRef = true;  public readonly [ReactiveFlags.IS_READONLY]: boolean
  constructor(    getter: ComputedGetter<T>, // 一个getter参数    private readonly _setter: ComputedSetter<T>, // 一个原则上只读的setter参数    isReadonly: boolean // 原则上只读，除非传入computed的参数既不是函数，而且对象中包含了set，当然，这样的情况开发环境会报错  ) {    this.effect = effect(getter, {      lazy: true,      scheduler: () => {        if (!this._dirty) {          this._dirty = true          trigger(toRaw(this), TriggerOpTypes.SET, 'value')        }      }    })
    this[ReactiveFlags.IS_READONLY] = isReadonly  }
  get value() {    // the computed ref may get wrapped by other proxies e.g. readonly() #3376    const self = toRaw(this)    console.log('this=======>', this)    if (self._dirty) {      self._value = this.effect()      self._dirty = false    }    track(self, TrackOpTypes.GET, 'value') // 追踪依赖当前computed的数据，由于computed原则上也是一个ref，所以取得是value    return self._value // 返回通过effect执行后返回的最新值  }
  set value(newValue: T) {    this._setter(newValue) // set则直接执行传入的setter即可  }}