Vue3源码系列 (四) ref

我们知道，一般用reactive来定义一个响应式对象，ref常用来定义一个响应式的原始值。上篇文章已经聊过了reactive，知晓了如何通过Proxy来对目标对象进行代理从而实现响应式，而非对象的这些原始值的响应式问题就交给ref来解决了。

一、ref 和 shallowRef的函数签名

ref和shallowRef各有三种重载，入参各不相同，都返回一个Ref/ShallowRef类型的值。通过createRef函数创建一个响应式的值。和 reactive 相似，reactive也是通过调用createReactiveObject来创建一个响应式的对象。而createRef创建并返回一个 RefImpl 实例。

// ref
export function ref<T extends object>(
  value: T
): [T] extends [Ref] ? T : Ref<UnwrapRef<T>>;
export function ref<T>(value: T): Ref<UnwrapRef<T>>;
export function ref<T = any>(): Ref<T | undefined>;
export function ref(value?: unknown) {
  return createRef(value, false);
}

// shallowRef
export function shallowRef<T extends object>(
  value: T
): T extends Ref ? T : ShallowRef<T>;
export function shallowRef<T>(value: T): ShallowRef<T>;
export function shallowRef<T = any>(): ShallowRef<T | undefined>;
export function shallowRef(value?: unknown) {
  return createRef(value, true);
}

// ...

// createRef
function createRef(rawValue: unknown, shallow: boolean) {
  if (isRef(rawValue)) {
    return rawValue;
  }
  return new RefImpl(rawValue, shallow);
}

二、RefImpl

顺带一说，在ts里，关键字class既声明了一个值，也声明了一个ts类型。RefImpl算是ref的核心内容了，构造器函数接收两个参数，value是传入的原本的值，__v_isShallow在上一篇讲reeactive和readonly的文章里，也有这个属性，用于区别深层/浅层。且isShallow()函数也会利用这个属性来做判断。在这里两个作用，一是作为实例属性供isShallow判断；而是根据传入时来值来判断是否是浅层的Ref，因为函数shallowRef也是创建一个RefImpl实例。

可以看到，Ref的响应式实现就比较简单了，用_value属性来存储实际的值，用dep属性存储依赖，用在class的getter里通过trackRefValue(this)来收集依赖，在setter里调用triggerRefValue(this, newVal)。和vue2里的实现相似，只是这里使用的 class 的getter和setter，而vue2里使用的是属性描述符里的getter和setter。

class RefImpl<T> {
  private _value: T;
  private _rawValue: T;

  public dep?: Dep = undefined;
  public readonly __v_isRef = true;

  constructor(value: T, public readonly __v_isShallow: boolean) {
    this._rawValue = __v_isShallow ? value : toRaw(value);
    this._value = __v_isShallow ? value : toReactive(value);
  }

  get value() {
    trackRefValue(this);
    return this._value;
  }

  set value(newVal) {
    const useDirectValue =
      this.__v_isShallow || isShallow(newVal) || isReadonly(newVal);
    // shallowRef或者 新值 是浅层的或者只读的，则设置值的之前对新值解包
    newVal = useDirectValue ? newVal : toRaw(newVal);
    // 对比新值和旧值，如果有改变则触发更新
    if (hasChanged(newVal, this._rawValue)) {
      this._rawValue = newVal;
      this._value = useDirectValue ? newVal : toReactive(newVal);
      triggerRefValue(this, newVal);
    }
  }
}

三、trackRefValue

trackRefValue用于收集Ref的依赖，接收一个RefBase类型的值。在ref函数中则是接收RefImpl的实例。shouldTrack是从effect的模块引入的，用做暂停和恢复捕获依赖的标志；activeEffect也是从effect的模块引入，标记当前活跃的effect。可以看到，内部调用trackEffects函数来收集依赖，该函数来自effect的模块，放在effect的篇章里讲。

// trackRefValue
export function trackRefValue(ref: RefBase<any>) {
  if (shouldTrack && activeEffect) {
    // 对Ref进行解包
    ref = toRaw(ref);
    if (__DEV__) {
      trackEffects(ref.dep || (ref.dep = createDep()), {
        target: ref,
        type: TrackOpTypes.GET,
        key: "value",
      });
    } else {
      trackEffects(ref.dep || (ref.dep = createDep()));
    }
  }
}

四、triggerRefValue

triggerRefValue函数用于触发Ref的响应式更新。triggerEffects函数来自effect的模块，在effect的篇章里讲到。

export function triggerRefValue(ref: RefBase<any>, newVal?: any) {
  // 对Ref进行解包
  ref = toRaw(ref);
  // 当有收集到依赖时，触发更新
  if (ref.dep) {
    if (__DEV__) {
      triggerEffects(ref.dep, {
        target: ref,
        type: TriggerOpTypes.SET,
        key: "value",
        newValue: newVal,
      });
    } else {
      triggerEffects(ref.dep);
    }
  }
}

五、customRef 和 CustomRefImpl

Vue3还提供了自定义的Ref，自己传入getter和setter，可以自由选择track和trigger的时机。

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);
  }
}

export function customRef<T>(factory: CustomRefFactory<T>): Ref<T> {
  return new CustomRefImpl(factory) as any;
}

六、toRef、toRefs 和 ObjectRefImpl

在setup函数中返参时，我们有时候想要对响应式对象的某个属性进行解构，往往是用到toRef来创建一个ObjectRefImpl实例。

可以看到，原来的响应式对象依然被这个ObjectRefImpl实例通过_object属性引用。而在getter里面，会通过原本的响应式对象_object来访问该值，因而依赖的收集是由原本的响应式对象_object来进行的；同样的，在setter里，也是通过引用原本的响应式对象_object来达到赋值的操作，从而在_object中触发更新。也就是说，ObjectRefImpl不负责依赖收集和响应式更新，这些都是借由原本的响应式对象_object完成的。

toRef简要判断入参是否是一个Ref，是则直接返回，否则返回一个新建的ObjectRefImpl。

class ObjectRefImpl<T extends object, K extends keyof T> {
  public readonly __v_isRef = true;

  constructor(
    // 私有只读属性 原本的响应式对象
    private readonly _object: T,
    private readonly _key: K,
    private readonly _defaultValue?: T[K]
  ) {}

  get value() {
    const val = this._object[this._key];
    return val === undefined ? (this._defaultValue as T[K]) : val;
  }

  set value(newVal) {
    this._object[this._key] = newVal;
  }
}

// ts类型ToRef<T>
export type ToRef<T> = IfAny<T, Ref<T>, [T] extends [Ref] ? T : Ref<T>>;

// 重载
export function toRef<T extends object, K extends keyof T>(
  object: T,
  key: K
): ToRef<T[K]>;

export function toRef<T extends object, K extends keyof T>(
  object: T,
  key: K,
  defaultValue: T[K]
): ToRef<Exclude<T[K], undefined>>;

export function toRef<T extends object, K extends keyof T>(
  object: T,
  key: K,
  defaultValue?: T[K]
): ToRef<T[K]> {
  const val = object[key];
  return isRef(val)
    ? val
    : (new ObjectRefImpl(object, key, defaultValue) as any);
}

而toRefs则是对传入的对象/数组进行遍历并进行toRef解构。

export function toRefs<T extends object>(object: T): ToRefs<T> {
  if (__DEV__ && !isProxy(object)) {
    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);
  }
  return ret;
}