技術標籤：typescript

在看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 都成為了例項物件的屬性了。