在看vue3.0 响应性系统过程中,ref.ts中的class RefImpl 时,对类中定义的_rawValue 有点疑问,源码如下:

class RefImpl<T> {
  private _value: T

  public readonly __v_isRef = true

  constructor(private _rawValue: T, public readonly _shallow = false) {
    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)
    }
  }
}

_rawValue属性并没有定义,也没有赋值啊,在set 存值函数中直接this._rawValue进行比较。在网上搜索了一下,才知道这是typescript 语法。 在类的构造函数中参数可以直接定义为属性。我们看个例子:

class RefImpl<T> {
  private _value: T
  public readonly __v_isRef = true

  constructor(private _rawValue: T, public readonly _shallow = false) {
    this._value = _rawValue
  }

  get value() {    
    return this._value
  }

  set value(newVal) {
    this._rawValue = newVal
    this._value = newVal
  }
}

let ref = new RefImpl(10)
console.log(`liubb ref: ${JSON.stringify(ref)}`)

直接简化了一下这个类,并打印出这个类的实例对象,通过打印可以看出_rawValue, _shallow 都成为了实例对象的属性了。

Logo

前往低代码交流专区

更多推荐