下面是ref的整个源码流程。

ref的定义

源码路径：packages/reactivity/src/ref.ts

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

createRef的定义

源码路径：packages/reactivity/src/ref.ts

function createRef(rawValue: unknown, shallow: boolean) {
  // 如果本身是一个ref对象，则直接返回
  if (isRef(rawValue)) {
   return rawValue
  }
  // 构建ref对象
  return new RefImpl(rawValue, shallow)
}

RefImpl的定义

源码路径：packages/reactivity/src/ref.ts

class RefImpl<T> {
  private _value: T
  ...

  constructor(value: T, public readonly __v_isShallow: boolean) {
   ...
   // __v_isShallow(调用shallowRef时为true)为true时就是原有值
   // 否则调用toReactive(该方法参数为对象时调用reactive返回Proxy对象，否则直接返回value)
   // e.g: ref(1)，则_value为1
   // e.g: ref({num: 1})，则_value = reactive({num: 1})，即Proxy对象
   this._value = __v_isShallow ? value : toReactive(value)
  }

  get value() {
   ...
  }

  set value(newVal) {
   ...
  }
}

toReactive的定义

源码路径：packages/reactivity/src/reactive.ts

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

总结