【Vue3 源码解析】ref 全家桶

// 函数重载，以便根据传入的不同参数类型执行不同的处理
export function ref<T extends Ref>(value: T): 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)
}

ref 函数的实现使用了函数重载（function overloading），以便根据不同的参数类型进行不同的处理。

主要作用是创建和处理 Ref 对象。Vue 3 的 Ref 对象用于在响应式数据中包装基本类型或对象，使其具有响应性，以便在视图中进行双向绑定或进行依赖追踪。

让我逐步解释这段代码的功能和实现细节：

1. export function ref<T extends Ref>(value: T): T：这是第一个函数重载的签名。它接受一个泛型参数 T，并要求传入的参数 value 必须是泛型类型 T 的子类型（或者就是 T 自身）。这个函数签名的目的是允许传入一个已经是 Ref 对象的值，并且返回该值本身，而不再包装成新的 Ref 对象。

2. export function ref<T>(value: T): Ref<UnwrapRef<T>>：这是第二个函数重载的签名。它接受一个泛型参数 T，并返回一个 Ref 对象，其中泛型类型 T 会被解包成其基本类型。这个函数签名的目的是创建一个新的 Ref 对象，将传入的值 value 包装在其中。

3. export function ref<T = any>(): Ref<T | undefined>：这是第三个函数重载的签名。它不接受任何参数，返回一个 Ref 对象，其初始值为 undefined。这个函数签名的目的是创建一个初始值为 undefined 的 Ref 对象。

4. ref(value?: unknown)：这是函数的实际实现。它接受一个可选参数 value，默认值为 undefined。根据传入的参数类型，函数会根据上述的不同函数重载来执行相应的操作。

   • 如果传入的参数 value 是一个 Ref 对象（满足第一个函数重载的条件），则直接返回该 Ref 对象本身，不做任何包装。

   • 如果传入的参数 value 不是 Ref 对象（满足第二个和第三个函数重载的条件），则调用 createRef 函数来创建一个新的 Ref 对象，并将传入的值 value 包装在其中。createRef 函数的第二个参数 false 表示这个 Ref 对象不是浅层的。

// 创建 Ref 对象
function createRef(rawValue: unknown, shallow: boolean) {
  if (isRef(rawValue)) {
    return rawValue
  }
  return new RefImpl(rawValue, shallow)
}

这段代码定义了一个名为 createRef 的函数，它用于创建 Ref 对象，或者直接返回已经存在的 Ref 对象（如果 rawValue 已经是 Ref 对象）。让我逐步解释这段代码的功能和实现细节：

1. function createRef(rawValue: unknown, shallow: boolean)：这是 createRef 函数的定义，它接受两个参数：

   • rawValue：要包装在 Ref 对象中的初始值，类型为 unknown，表示可以接受任意类型的值。
   • shallow：一个布尔值，表示是否创建一个浅层的 Ref 对象。如果为 true，则创建的 Ref 对象是浅层的，否则是深层的。浅层只是直接返回当前值，而深层则会调用reactive进行深层数据遍历。

2. if (isRef(rawValue)) { return rawValue }：首先，代码检查传入的 rawValue 是否已经是一个 Ref 对象。这是一种优化，如果 rawValue 已经是 Ref 对象，就不需要再次包装，直接返回原始的 Ref 对象。

3. return new RefImpl(rawValue, shallow)：如果 rawValue 不是 Ref 对象，那么会创建一个新的 Ref 对象。这里调用了 RefImpl 构造函数，传入 rawValue 和 shallow 参数，用来初始化 Ref 对象的属性。RefImpl 是一个自定义的类，它负责管理 Ref 对象的值和其他相关信息。

// 对传入的 value 函数进行判断和修改
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)
    newVal = useDirectValue ? newVal : toRaw(newVal)
    if (hasChanged(newVal, this._rawValue)) {
      this._rawValue = newVal
      this._value = useDirectValue ? newVal : toReactive(newVal)
      triggerRefValue(this, newVal)
    }
  }
}

这段代码定义了一个名为 RefImpl<T> 的类，它是 Vue 3 中用于管理 Ref 对象的实现。让我逐步解释这段代码的功能和实现细节：

1. class RefImpl<T>：这是一个泛型类，表示它可以处理不同类型的值。T 是泛型参数，用于指定 Ref 对象的值的类型。

2. private _value: T 和 private _rawValue: T：这两个私有属性用来存储 Ref 对象的值。_value 存储的是经过响应式处理后的值，而 _rawValue 存储的是原始值。通常情况下，它们的值是一样的，但在一些情况下，可能需要区分它们，例如在浅层 Ref 中。

3. public dep?: Dep = undefined：这是一个公共属性，它用于存储与 Ref 对象相关联的依赖（Dep）。这个属性在需要进行依赖追踪时会被用到。

4. public readonly __v_isRef = true：这是一个只读属性，用于标识该对象是一个 Ref 对象。这是一个 Vue 内部使用的标识，用于区分普通对象和 Ref 对象。

5. constructor(value: T, public readonly __v_isShallow: boolean)：这是类的构造函数，接受两个参数：

   • value：初始值，表示 Ref 对象包装的值。
   • __v_isShallow：一个布尔值，表示是否创建一个浅层的 Ref 对象。

   构造函数在初始化 Ref 对象时执行，它根据 __v_isShallow 参数的值来决定是否要对 value 进行响应式处理（转换为响应式对象）。所以根据创建时传入的 false 可以知道需要继续执行 toReactive 函数。

6. get value()：这是一个 getter 方法，用于获取 Ref 对象的值。在获取值时，会调用 trackRefValue(this)，进行依赖追踪收集，以便在值发生变化时能够通知相关的依赖更新。

7. set value(newVal)：这是一个 setter 方法，用于设置 Ref 对象的值。在设置值时，首先判断是否需要使用原始值还是需要将新值转换为响应式对象。然后，通过 hasChanged 函数检查新值是否和旧值发生了变化，如果发生了变化，就更新 _rawValue 和 _value，并调用 triggerRefValue （记住这个函数彩蛋，后面要讲） 触发相关依赖的更新。

// 这段代码已经是 reactive.ts 源码的内容

// 判断是否是引用（数组或者对象）类型
export const toReactive = <T extends unknown>(value: T): T =>
  isObject(value) ? reactive(value) : value

这段代码定义了一个名为 toReactive 的函数，它用于将一个值转换为响应式对象。让我逐步解释这段代码的功能和实现细节：

1. export const toReactive = <T extends unknown>(value: T): T =>：这行代码声明了一个常量 toReactive，它是一个泛型函数。T 是泛型参数，表示输入值的类型，也表示返回值的类型。

2. (value: T)：这是函数的参数列表，它接收一个值 value，该值可以是任意类型。

3. isObject(value) ? reactive(value) : value：这是函数的主体部分，它根据输入值的类型来进行处理：

   • isObject(value)：首先通过 isObject 函数检查输入值是否是一个数组或者对象。
   • 如果 value 是一个数组或者对象，那么调用 reactive(value) 将其转换为响应式。这是 Vue 3 中的响应式处理函数。
   • 如果 value 不是数组或者对象，那么直接返回 value 本身，不进行任何转换。

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

这段代码定义了一个函数 shallowRef，它用于创建一个浅层响应式引用（Shallow Ref）。让我逐步解释这段代码的功能和实现细节：

1. export function shallowRef<T extends object>(value: T): T extends Ref ? T : ShallowRef<T>：这是 shallowRef 函数的第一个重载声明。它接受一个泛型参数 T，表示输入值的类型。如果输入值是一个 Ref 类型，那么返回原始的 Ref 类型；否则，返回一个 ShallowRef 类型。

2. export function shallowRef<T>(value: T): ShallowRef<T>：这是 shallowRef 函数的第二个重载声明。它接受一个泛型参数 T，表示输入值的类型，并返回一个 ShallowRef 类型。

3. export function shallowRef<T = any>(): ShallowRef<T | undefined>：这是 shallowRef 函数的第三个重载声明。它不接受任何参数，返回一个 ShallowRef 类型，其泛型默认为 any，表示引用的内部值可能是任何类型，初始值为 undefined。

4. export function shallowRef(value?: unknown)：这是函数的实际实现部分，它是一个具有多个重载的函数。根据不同的参数类型，会调用相应的重载版本。

5. return createRef(value, true)：实际上，shallowRef 函数的内部逻辑是调用 createRef 函数，传入参数 value 和布尔值 true，以表示创建一个浅层响应式引用。createRef 函数会根据输入值的类型和浅层标记来创建相应的引用对象。

总结一下，shallowRef 函数用于创建一个特殊类型的响应式引用，它与普通引用 (Ref) 不同，它对引用的值进行浅层响应式转换，只有引用的值的直接属性会具有响应式特性，而不会递归地将其内部的属性也转换为响应式。所以在最终调用 RefImpl 构造函数时，传入 true，不会继续执行后续的 toReactive 函数。

彩蛋：以上可以解释 为什么只有 shallowRef 与 ref 的变量同时出现在 template 标签里面才会影响，单独出现不影响。 的问题。就是因为 ref 和 triggerRef 底层调用的都是 triggerRefValue 。他们的 get 方法也都会调用 trackRefValue(this) 来进行依赖追踪。在重新渲染期间，所有组件的模板都会使用最新数据进行更新，所以triggerRefValue 连 shallowRef 的值也一起更新了。

export function triggerRef(ref: Ref) {
  triggerRefValue(ref, __DEV__ ? ref.value : void 0)
}

这段代码定义了一个函数 triggerRef，其作用是手动触发与给定引用对象相关联的依赖效果（effects）。让我解释一下这段代码的功能和实现细节：

• export function triggerRef(ref: Ref)：这是 triggerRef 函数的声明，它接受一个泛型参数 ref，该参数是一个引用对象（Ref），表示要触发的引用。

• triggerRefValue(ref, __DEV__ ? ref.value : void 0)：这是函数的实际实现部分。

  • ref 参数是要触发的引用对象。

  • __DEV__ ? ref.value : void 0 这一部分是一个条件表达式，用于确定要传递给 triggerRefValue 函数的 newValue 值。根据开发环境 (__DEV__) 的设置，如果处于开发模式，则传递引用对象的 value 属性作为 newValue 值；否则，传递 undefined。

  • triggerRefValue(ref, newValue)：这是实际触发引用对象依赖效果的函数调用。它会通知与引用对象相关联的任何依赖效果（如响应式计算属性或 watchEffect）重新运行，以便它们可以获取最新的值并执行相应的操作。

总结一下，triggerRef 函数用于手动触发引用对象的依赖效果，以便强制执行与该引用对象相关联的响应式代码块。这在需要手动控制何时触发依赖效果以进行重新计算时非常有用，特别是在需要手动管理某些响应式代码块的情况下。