Vue3响应式对象Reactive和Ref的用法解读

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
  }
  //如果被代理对象已经是一个proxy对象且是响应式的并且此次创建的新代理对象不是只读的,则直接返回被代理对象
  //这儿存在一种情况需要重新创建,即被代理对象已经是一个代理对象了,且可读可写。但新创建的代理对象是只读的
  //那么,本次生成的那个代理对象最终是只读的。响应式必须可读可写,只读的代理对象是非响应式的。
  if (
    target[ReactiveFlags.RAW] &&
    !(isReadonly && target[ReactiveFlags.IS_REACTIVE])
  ) {
    return target
  }
  //从map中找,如果对象已经被代理过,则直接从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[]) {
      //获取原始数组
      const arr = toRaw(this) as any
      for (let i = 0, l = this.length; i < l; i++) {
        //收集依赖 键值为索引 i
        track(arr, TrackOpTypes.GET, i + '')
      }
      // 调用数组的原始方法
      const res = arr[key](...args)
      if (res === -1 || res === false) {
        // 如果不存在，则将参数参数转换为原始数据在试一次(这儿可能是防止传入的是代理对象导致获取失败)
        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[]) {
      //由于上面的方法会改变数组长度,因此暂停收集依赖，不然会导致无限递归
      pauseTracking()
      //调用原始方法
      const res = (toRaw(this) as any)[key].apply(this, args)
      //复原依赖收集
      resetTracking()
      return res
    }
  })
  return instrumentations
}

//源码位置: /packages/reactivity/src/baseHandlers.ts

function createGetter(isReadonly = false, shallow = false) {
  return function get(target: Target, key: string | symbol, receiver: object) {
    //这儿不重要，其实就是通过代理对象访问这几个特殊属性时,返回相应的值,和响应式无关
    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)
    //如果是调用的数组方法,则调用重写后的数组方法,前提不是只读的
    if (!isReadonly && targetIsArray && hasOwn(arrayInstrumentations, key)) {
      return Reflect.get(arrayInstrumentations, key, receiver)
    }
    //调用原始行为获取值
    const res = Reflect.get(target, key, receiver)
    //访问Symbol对象上的属性和__proto__,__v_isRef,__isVue这3个属性,直接返回结果值
    if (isSymbol(key) ? builtInSymbols.has(key) : isNonTrackableKeys(key)) {
      return res
    }
    if (!isReadonly) {
      //不是只读,则收集依赖
      track(target, TrackOpTypes.GET, key)
    }
    if (shallow) {
      //如果对象是浅响应的 则返回结果
      return res
    }
    if (isRef(res)) {
      //如果值是Ref对象且是通过数组代理对象的下标访问的,则不做解包装操作,否则返回解包装后的值
      // ref unwrapping - does not apply for Array + integer key.
      const shouldUnwrap = !targetIsArray || !isIntegerKey(key)
      return shouldUnwrap ? res.value : res
    }
    if (isObject(res)) {
      //走到这儿需要满足非浅响应。如果结果是一个对象,则将改对象转换为只读代理对象或者响应式代理对象返回
      //e.g. 
      // test:{
      //   a:{
      //     c:10
      //   }
      // }
      //以上测试对象当访问属性a时,此时res是一个普通对象,如果不转换为代理对象,则对a.c的操作不会被拦截处理,导致无法响应式处理
      // 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

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个值,如果旧值是Ref对象,新值不是,则直接变Ref对象的value属性
      if (!isArray(target) && isRef(oldValue) && !isRef(value)) {
        //这儿看似没有触发依赖更新,其实Ref对象的value进行赋值会触发Ref对象的写操作，在那个操作里面会触发依赖更新
        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
    // 这个判断其实是处理一个代理对象的原型也是代理对象的情况,以下是测试代码
    // 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
    // 当存在上述情形,第一次设置值时,由于子代理没有prop属性方法,会触发父代理的set方法。父代理的这个判断此时是false,算是一个优化,避免2个触发更新
    if (target === toRaw(receiver)) {
      if (!hadKey) {
        //触发add类型依赖更新
        trigger(target, TriggerOpTypes.ADD, key, value)
      } else if (hasChanged(value, oldValue)) {
        //触发set类型依赖更新
        trigger(target, TriggerOpTypes.SET, key, value, oldValue)
      }
    }
    return result
  }
}

//源码位置: /packages/reactivity/src/baseHandlers.ts

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) {
    //触发依赖更新
    trigger(target, TriggerOpTypes.DELETE, key, undefined, oldValue)
  }
  return result
}

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
}

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;
    //此时dummy = 2,a对象值的改变触发了依赖更新

    const a = 1
    let dummy
    let calls = 0
    effect(() => {
      calls++
      dummy = a;
    })
    a= 2;
    //此时dummy = 1,a的改变没有触发依赖更新

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) {
    //原始数据
    this._rawValue = _shallow ? value : toRaw(value)
    //外部访问到的数据,转换为响应式
    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)) {
      //如果原始数据之间的比较不一样,则赋值
      this._rawValue = newVal
      //把新值转换为响应式对象
      this._value = this._shallow ? newVal : toReactive(newVal)
      //触发依赖
      triggerRefValue(this, newVal)
    }
  }
}
//转换响应式对象方法
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()) {
    //获取原始数据
    ref = toRaw(ref)
    if (!ref.dep) {
      //如果不存在依赖,就创建一个依赖对象
      ref.dep = createDep()
    }
    //收集依赖
    if (__DEV__) {
      trackEffects(ref.dep, {
        target: ref,
        type: TrackOpTypes.GET,
        key: 'value'
      })
    } else {
      trackEffects(ref.dep)
    }
  }
}
//触发依赖更新
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)
    }
  }
}

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
    //此时dummy = 2；

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