vue3.x源码学习 Ref 学习笔记1

ref

ref最重要的作用，其实是提供了一套Ref类型，什么是ref类型呢？

ref类型

export interface Ref<T = any> {
  value: T
  /**
   * Type differentiator only.
   * We need this to be in public d.ts but don't want it to show up in IDE
   * autocomplete, so we use a private Symbol instead.
   */
   // 用此唯一key，来做Ref接口的一个描述符，让isRef函数做类型判断
  [RefSymbol]: true
  /**
   * @internal
   */
  _shallow?: boolean
}

对于基本数据类型，函数传递或者对象解构时，会丢失原始数据的引用，换言之，我们没法让基本数据类型，或者解构后的变量(如果它的值也是基本数据类型的话)，成为响应式的数据。

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

但是有时候，我们确实就是想一个数字、一个字符串是响应式的，或者就是想利用解构的写法。那怎么办呢？只能通过创建一个对象，也即是源码中的Ref数据，然后将原始数据保存在Ref的属性value当中，再将它的引用返回给使用者。既然是我们自己创造出来的对象，也就没必要使用Proxy再做代理了，直接劫持这个value的get/set即可，这就是ref函数与Ref类型的由来。

isRef判断

如何判断是否是ref类型，下面是源代码，还是很简单的。

  // 判断是否是Ref
export function isRef<T>(r: Ref<T> | unknown): r is Ref<T>
export function isRef(r: any): r is Ref {
  return Boolean(r && r.__v_isRef === true)
}

创建Ref

那么是怎么创建ref呢？下面我们就讲讲创建ref。

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

RefImpl构造函数

这里也定义了get/set，没有任何Proxy相关的操作。

class RefImpl<T> {
  private _value: T

  public readonly __v_isRef = true

  constructor(private _rawValue: T, public readonly _shallow = false) {
      // 如果是对象就value就是reactive(val)，否则就是自己
    this._value = _shallow ? _rawValue : convert(_rawValue)
  }
  // 获取数据
  get value() {
      // 监听函数收集依赖的方法
    track(toRaw(this), TrackOpTypes.GET, 'value')
    return this._value
  }
  // 设置新的值 
  set value(newVal) {
    if (hasChanged(toRaw(newVal), this._rawValue)) {
      this._rawValue = newVal
      this._value = this._shallow ? newVal : convert(newVal)
      trigger(toRaw(this), TriggerOpTypes.SET, 'value', newVal)
    }
  }
}

convert源码

const convert = <T extends unknown>(val: T): T =>
  isObject(val) ? reactive(val) : val

这里引入了reactive，如果是对象就value就是reactive(val)，否则就是自己，reactive暂时先不讲，放后面讲

toRef&toRefs

toRef也是创建get/set进行拦截，toRefs就是对数组或者对象的属性进行递归设置get/set。

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

  constructor(private readonly _object: T, private readonly _key: K) {}

  get value() {
    return this._object[this._key]
  }

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

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

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
}