Vue3响应式系统源码解析-Ref篇

// 生成一个唯一key，开发环境下增加描述符 'refSymbol'
export const refSymbol = Symbol(__DEV__ ? 'refSymbol' : undefined)

// 声明Ref接口
export interface Ref<T = any> {
  // 用此唯一key，来做Ref接口的一个描述符，让isRef函数做类型判断
  [refSymbol]: true
  // value值，存放真正的数据的地方。关于UnwrapNestedRefs这个类型，我后续单独解释
  value: UnwrapNestedRefs<T>
}

// 判断是否是Ref数据的方法
// 对于is关键词，若不熟悉，见：http://www.typescriptlang.org/docs/handbook/advanced-types.html#using-type-predicates
export function isRef(v: any): v is Ref {
  return v ? v[refSymbol] === true : false
}

// 见下文解释
export type UnwrapNestedRefs<T> = T extends Ref ? T : UnwrapRef<T>

// 不应该继续递归的引用数据类型
type BailTypes =
  | Function
  | Map<any, any>
  | Set<any>
  | WeakMap<any, any>
  | WeakSet<any>

// 递归地获取嵌套数据的类型
// Recursively unwraps nested value bindings.
export type UnwrapRef<T> = {
  // 如果是ref类型，继续解套
  ref: T extends Ref<infer V> ? UnwrapRef<V> : T
  // 如果是数组，循环解套
  array: T extends Array<infer V> ? Array<UnwrapRef<V>> : T
  // 如果是对象，遍历解套
  object: { [K in keyof T]: UnwrapRef<T[K]> }
  // 否则，停止解套
  stop: T
}[T extends Ref
  ? 'ref'
  : T extends Array<any>
    ? 'array'
    : T extends BailTypes
      ? 'stop' // bail out on types that shouldn't be unwrapped
      : T extends object ? 'object' : 'stop']

// 声明类型别名：UnwrapNestedRefs
// 它是这样的类型：如果该类型已经继承于Ref，则不需要解套，否则可能是嵌套的ref，走递归解套
export type UnwrapNestedRefs<T> = T extends Ref ? T : UnwrapRef<T>

// 从@vue/shared中引入，判断一个数据是否为对象
// Record<any, any>代表了任意类型key，任意类型value的类型
// 为什么不是 val is object 呢？可以看下这个回答：https://stackoverflow.com/questions/52245366/in-typescript-is-there-a-difference-between-types-object-and-recordany-any
export const isObject = (val: any): val is Record<any, any> =>
  val !== null && typeof val === 'object'

// 如果传递的值是个对象(包含数组/Map/Set/WeakMap/WeakSet)，则使用reactive执行，否则返回原数据
// 从上篇文章知道，这个reactive就是将我们的数据转成响应式数据
const convert = (val: any): any => (isObject(val) ? reactive(val) : val)

export function ref<T>(raw: T): Ref<T> {
  // 转化数据
  raw = convert(raw)
  const v = {
    [refSymbol]: true,
    get value() {
      // track的代码在effect中，暂时不看，能猜到此处就是监听函数收集依赖的方法。
      track(v, OperationTypes.GET, '')
      // 返回刚刚被转化后的数据
      return raw
    },
    set value(newVal) {
      // 将设置的值，转化为响应式数据，赋值给raw
      raw = convert(newVal)
      // trigger也暂时不看，能猜到此处就是触发监听函数执行的方法
      trigger(v, OperationTypes.SET, '')
    }
  }
  return v as Ref<T>
}

// 我们是永远没办法让`a`或`x`这样的基本数据成为响应式的数据的，Proxy也无法劫持基本数据。
const a = 1;
const { x: 1 } = { x: 1 }

export function toRefs<T extends object>(
  object: T
): { [K in keyof T]: Ref<T[K]> } {
  const ret: any = {}
  // 遍历对象的所有key，将其值转化为Ref数据
  for (const key in object) {
    ret[key] = toProxyRef(object, key)
  }
  return ret
}
function toProxyRef<T extends object, K extends keyof T>(
  object: T,
  key: K
): Ref<T[K]> {
  const v = {
    [refSymbol]: true,
    get value() {
      // 注意，这里没用到track
      return object[key]
    },
    set value(newVal) {
      // 注意，这里没用到trigger
      object[key] = newVal
    }
  }
  return v as Ref<T[K]>
}