vue3源码值ref

一、入口函数：

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

二、实际调用方法为

createRef

:

function createRef(rawValue: unknown, shallow: boolean) {
  // 首先进行判断传入的 rawValue 是否为 ref
  if (isRef(rawValue)) {
    return rawValue
  }
  // 传入的 rawValue 是一个非 ref 的值，将他传入对象 RefImpl 构造为一个 ref 
  return new RefImpl(rawValue, shallow)
}
           

ref 的核心类 RefImpl，ref 方法的核心就是通过它进行实例化类：

​ 我们在使用

ref

的时候，会通过

ref.value

获取值，此处的

value

就是该类中的 get 和 set ，get 和 set 就是通过getter/setter来截取对象成员的访问。

​ 分析一下getter和setter是什么？

getter：

​ 定义：

get

语法将对象属性绑定到查询该属性时将被调用的函数。

​ 语法：

{get prop() { ... } }

​ 参数： prop： 要绑定到给定函数的属性名。

​ 描述：有时需要允许访问返回动态计算值的属性，或者你可能需要反映内部变量的状态，而不需要使用显式方法调用。在 JavaScript 中，可以使用 getter 来实现。

​ 注意：

​ 1、在class中使用时，属性会被定义在实例的原型上

​ 2、当使用

Object.defineProperty()

时，属性将被定义在实例自身上。

​ 简单理解：在调用一个对象的时候，如果不想调用显示方法来获取某个值，可以通过调用 get 来实现。

setter：

定义：当尝试设置属性时，**

set

**语法将对象属性绑定到要调用的函数。

语法：

{set prop(val) { . . . }}

参数：prop: 要绑定到给定函数的属性名。

​ val: 用于保存尝试分配给

prop

的值的变量的一个别名。

描述： javascript 中，如果试着改变一个属性的值，那么对应的 setter 将被执行。setter 经常和 getter 连用以创建一个伪属性。不可能在具有真实值的属性上同时拥有一个 setter 器。

简单理解：如果想要去改变属性的值，可以调用 set。

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) {
    // toRaw 返回传入值的原始对象
    // toReactive 判断是否返回 reactive 类型
    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)
    }
  }
}
           

最后分析一下，第一步中判断传入 rawValue 是否为 ref :

function createRef(rawValue: unknown, shallow: boolean) {
  // 首先进行判断传入的 rawValue 是否为 ref
  if (isRef(rawValue)) {
    return rawValue
  }
  // 传入的 rawValue 是一个非 ref 的值，将他传入对象 RefImpl 构造为一个 ref 
  return new RefImpl(rawValue, shallow)
}
           

在这一步中，核心是调用了 ifRef（） 方法进行判断：

如果是一个 ref 实例，那么它自身就会具有 .__v_isRef 属性。

export function isRef<T>(r: Ref<T> | unknown): r is Ref<T>
export function isRef(r: any): r is Ref {
  // 判断传入的 r 是否具有 __v_isRef 属性且为true，如果具有此属性，说明它本身就是一个 ref 的实例
  return !!(r && r.__v_isRef === true)
}