shallowRef與ref的原理淺析

vue3中的shallowRef與ref是怎么實現的呢？學習自尚硅谷

目的

使一個正常的js基本類型轉化為響應式對象，能夠對get和set數據的時候進行攔截

解決方案

簡單的說，如果值為基本類型，不是object，那么在內存中創建一個新變量 _value（也可以說是復制）, 在獲取和改動的時候（set）對這個值進行修改和獲取，這樣就可以做到對get和set的時候進行攔截。如果是object類型，參見我前面一篇文章https://www.cnblogs.com/lyzz1314/p/14810559.html，進行reactive華處理。

嚴格來講，這個最后結果還不是響應式對象，只是這個object再增刪改查屬性的時候會觸發自定義邏輯，具體編寫什么樣的邏輯能能夠做到vue3中的響應式，本文沒有闡述。

/*
自定義shallowRef
*/
function shallowRef(target) {
  const result = {
    _value: target, // 用來保存數據的內部屬性
    _is_ref: true, // 用來標識是ref對象
    get value () {
      return this._value
    },
    set value (val) {
      this._value = val
      console.log('set value 數據已更新, 去更新界面')
    }
  }

  return result
}

/* 
自定義ref
*/
function ref(target) {
  if (target && typeof target==='object') {
    target = reactive(target)
  }

  const result = {
    _value: target, // 用來保存數據的內部屬性
    _is_ref: true, // 用來標識是ref對象
    get value () {
      return this._value
    },
    set value (val) {
      this._value = val
      console.log('set value 數據已更新, 去更新界面')
    }
  }

  return result
}

/* 測試自定義shallowRef */
const ref3 = shallowRef({
  a: 'abc',
})
ref3.value = 'xxx'
ref3.value.a = 'yyy'


/* 測試自定義ref */
const ref1 = ref(0)
const ref2 = ref({
  a: 'abc',
  b: [{x: 1}],
  c: {x: [11]},
})
ref1.value++
ref2.value.b[0].x++
console.log(ref1, ref2)