Vue3 源码阅读（6）：响应式系统 —— ref

 我的开源库：

• fly-barrage 前端弹幕库，项目官网：https://fly-barrage.netlify.app/，可实现类似于 B 站的弹幕效果，并提供了完整的 DEMO，Gitee 推荐项目；
• fly-gesture-unlock 手势解锁库，项目官网：https://fly-gesture-unlock.netlify.app/，在线体验：https://fly-gesture-unlock-online.netlify.app/，可高度自定义锚点的数量、样式以及尺寸；

ref API 的官方文档点击这里，官网中需要注意的点是：如果参数是一个对象的话，ref 的内部会使用 reactive 对参数进行一层转化封装，若要避免这种深层次的转换，请使用 shallowRef() 来替代 ref。

在前面的博客中，Vue 提供了 reactive API 将对象数据转换成响应式的，reactive API 的底层使用了 Proxy 实现了对数据读写操作的拦截，进而实现依赖收集和触发依赖重新执行。

但在我们的业务中，我们有可能需要将一个基础数据类型的值也转换成响应式的，我们需要对基础数据类型的值也进行读写操作的拦截，但 Proxy 无法实现对基础数据类型值读写操作的拦截。

1，ref 的实现原理

Vue3 的做法是借助 ref 将基础数据类型值进行一层封装，如果想读取数据的话，通过 refReturn.value，如果想设置新值的话，也通过 refReturn.value。接下来直接看源码，很简单。

2，ref 源码解读

export function ref(value?: unknown) {
  return createRef(value, false)
}

ref 函数内部借助 createRef 实现功能，接下来看这个函数。

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

createRef 函数的作用就是加一层判断，判断 rawValue 本身是不是一个 Ref，如果是的话，直接 return rawValue，如果不是的话，再进行 Ref 的封装。createRef 函数的内部使用 RefImpl 类实现 Ref 的封装，接下来看 RefImpl 类的实现。

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) {
    newVal = this.__v_isShallow ? newVal : toRaw(newVal)
    if (hasChanged(newVal, this._rawValue)) {
      this._rawValue = newVal
      this._value = this.__v_isShallow ? newVal : toReactive(newVal)
      triggerRefValue(this, newVal)
    }
  }
}

export function toRaw<T>(observed: T): T {
  const raw = observed && (observed as Target)[ReactiveFlags.RAW]
  return raw ? toRaw(raw) : observed
}

export const toReactive = <T extends unknown>(value: T): T =>
  isObject(value) ? reactive(value) : value

export function trackRefValue(ref: RefBase<any>) {
  trackEffects(ref.dep || (ref.dep = createDep()))
}

export function triggerRefValue(ref: RefBase<any>, newVal?: any) {
  triggerEffects(ref.dep)
}

RefImpl 类的实现很简单，首先看看类中四个属性的作用。

• _value：用于保存 ref 当前的值，如果传递的参数是基本数据类型的话，_value 和 _rawValue 相同。如果传递的参数是一个对象的话，_value 就是经过 reactive 函数转化过的值。
• _rawValue：用于保存当前 ref 值对应的原始值，当传递的参数是基本数据类型时，_value 和 _rawValue 相同。如果传递的参数是一个对象的话，_rawValue 用于保存转化前的原始值。
• dep：dep 是一个 Set 类型的数据，它的作用是用来存储当前的 ref 值收集的依赖。
• __v_isRef：一个标志位，用来标识当前的值是一个 Ref。

接下来看看 constructor 函数，构造函数主要进行了 _rawValue 和 _value 属性的赋值，属性如何赋值是根据 __v_isShallow 属性的真假进行的。如果这个属性是 true 的话，则直接使用 value 进行赋值，无需进行 reactive 函数的处理，这一点正好对应 shallowRef API 接口的功能，shallowRef API 不会对对象参数进行响应式的转换。而如果 __v_isShallow 为 false 的话，则说明需要对对象参数进行 reactive 的转化，并且由于参数有可能本身就是响应式数据，所以需要使用 toRaw 函数获取数据的原始值。

ref 函数实现功能的重点在 value 访问器属性。当我们使用 .value 读取属性的时候，会执行 get value(){} 函数，并将函数的返回值作为 .value 读取到的值。当我们通过 .value 设置新值的时候，会执行 set value(){} 进行赋值操作。我们正好可以在 get value(){} 函数中进行依赖的收集，以及在 set value(){} 函数中进行依赖的触发执行。

在 get value() {} 函数中，首先执行 trackRefValue(this) 进行依赖的收集，然后返回 this._value 即可。

在 set value() {} 函数中，判断新值和旧值有没有发生改变，如果有变化的是，则重新赋值 _rawValue 和 _value 属性，并触发当前 ref 值的依赖重新执行。

3，结语

ok，ref 的内容就讲到这里，它的实现很简单，接下来一个一个具体的讲解没有讲到的 API。