Ref & ShallowRef

ref：接受一個參數(shù)值并返回一個響應(yīng)式且可改變的 ref 對象。ref 對象擁有一個指向內(nèi)部值的單一屬性 .value

可以將 ref 看成 reactive 的一個變形版本，這是由于 reactive 內(nèi)部采用 Proxy 來實現(xiàn)，而 Proxy 只接受對象作為入?yún)?，這才有了 ref 來解決值類型的數(shù)據(jù)響應(yīng)，如果傳入 ref 的是一個對象，內(nèi)部也會調(diào)用 reactive 方法進行深層響應(yīng)轉(zhuǎn)換

const count = ref(0)
console.log(count.value) // 0

count.value++
console.log(count.value) // 1

shallowRef：ref() 的淺層作用形式。和 ref() 不同，淺層 ref 的內(nèi)部值將會原樣存儲和暴露，并且不會被深層遞歸地轉(zhuǎn)為響應(yīng)式。只有對 .value 的訪問是響應(yīng)式的。

const state = shallowRef({ count: 1 })

// 不會觸發(fā)更改
state.value.count = 2

// 會觸發(fā)更改
state.value = { count: 2 }

源碼實現(xiàn)

• @issue1 如果是對象和數(shù)組，則調(diào)用 reactive方法 轉(zhuǎn)化為響應(yīng)式對象（ref會轉(zhuǎn)換，shallowRef不會轉(zhuǎn)換）
• @issue2 getter 取值的時候收集依賴
• @issue3 setter 設(shè)置值的時候觸發(fā)依賴

/**
 * @desc 如果是對象和數(shù)組，則轉(zhuǎn)化為響應(yīng)式對象
 */
function toReactive(value) {
  return isObject(value) ? reactive(value) : value
}

/**
 * @desc RefImpl
 * @issue1 如果是對象和數(shù)組，則轉(zhuǎn)化為響應(yīng)式對象
 */
class RefImpl {
  // ref標(biāo)識
  public __v_isRef = true
  // 存儲effect
  public dep = new Set()
  public _value
  constructor(public rawValue, public _shallow) {
    // @issue1
    this._value = _shallow ? rawValue : toReactive(rawValue)
  }
  get value() {
    // 取值的時候收集依賴
    trackEffects(this.dep)
    return this._value
  }
  set value(newValue) {
    // 新舊值不相等
    if (newValue !== this.rawValue) {
      // @issue1
      this._value = this._shallow ? newValue : toReactive(newValue)
      this.rawValue = newValue
      // 設(shè)置值的時候觸發(fā)依賴
      triggerEffects(this.dep)
    }
  }
}


// 接受一個內(nèi)部值，返回一個響應(yīng)式的、可更改的 ref 對象，此對象只有一個指向其內(nèi)部值的屬性 .value。
export function ref(value) {
  return new RefImpl(value)
}

測試代碼

/**
 * 1. Ref
 **/
const person = ref({
  name: '柏成',
  age: 25,
})
effect(() => {
  app.innerHTML = person.value.name
})

setTimeout(() => {
  person.value.name = '柏成2號' // 會觸發(fā)更改
}, 1000)

/**
 * 2. shallowRef
 */
const person = shallowRef({
  name: '柏成',
  age: 25,
})
effect(() => {
  app.innerHTML = person.value.name
})

setTimeout(() => {
  person.value.name = '柏成2號' // 不會觸發(fā)更改
}, 1000)

setTimeout(() => {
  person.value = {
    name: '柏成9號' // 會觸發(fā)更改
  }
}, 2000)

toRef & toRefs

toRef：基于響應(yīng)式對象上的一個屬性，創(chuàng)建一個對應(yīng)的 ref。這樣創(chuàng)建的 ref 與其源屬性保持同步：改變源屬性的值將更新 ref 的值，反之亦然。

const state = reactive({
  foo: 1,
  bar: 2
})

const fooRef = toRef(state, 'foo')

// 更改該 ref 會更新源屬性
fooRef.value++
console.log(state.foo) // 2

// 更改源屬性也會更新該 ref
state.foo++
console.log(fooRef.value) // 3

toRefs：將一個響應(yīng)式對象轉(zhuǎn)換為一個普通對象，這個普通對象的每個屬性都是指向源對象相應(yīng)屬性的 ref。每個單獨的 ref 都是使用 toRef() 創(chuàng)建的。

const state = reactive({
  foo: 1,
  bar: 2
})

const stateAsRefs = toRefs(state)

// 這個 ref 和源屬性已經(jīng) “鏈接上了”
state.foo++
console.log(stateAsRefs.foo.value) // 2

stateAsRefs.foo.value++
console.log(state.foo) // 3

源碼實現(xiàn)

class ObjectRefImpl {
  // 只是將.value屬性代理到原始類型上
  constructor(public object, public key) {}
  
  get value() {
    return this.object[this.key]
  }
  
  set value(newValue) {
    this.object[this.key] = newValue
  }
}

// 基于響應(yīng)式對象上的一個屬性，創(chuàng)建一個對應(yīng)的 ref。這樣創(chuàng)建的 ref 與其源屬性保持同步：改變源屬性的值將更新 ref 的值，反之亦然。
export function toRef(object, key) {
  return new ObjectRefImpl(object, key)
}

// 將一個響應(yīng)式對象轉(zhuǎn)換為一個普通對象，這個普通對象的每個屬性都是指向源對象相應(yīng)屬性的 ref。每個單獨的 ref 都是使用 toRef() 創(chuàng)建的。
export function toRefs(object) {
  const result = isArray(object) ? new Array(object.length) : {}

  for (let key in object) {
    result[key] = toRef(object, key)
  }

  return result
}

測試代碼

// 對象
const person = reactive({
  name: '柏成',
  age: 18
})
// 數(shù)組
const numbers = reactive([1, 2, 3, 4, 5])

// 注意！直接解構(gòu)后會丟失響應(yīng)性的特點?。?！
// let { name, age } = person

const {
  name,
  age
} = toRefs(person)
const [first] = toRefs(numbers)

effect(() => {
  app.innerHTML = `${name.value}，${age.value}歲。第一個數(shù)字為${first.value}。`
})

setTimeout(() => {
  name.value = '柏成9號'
  first.value = 999
}, 1000)

自動脫ref

在js中訪問ref時需要.value獲取，但是在模版中卻可以直接取值，不需要加.value！這里就用到了 proxyRefs 自動脫ref方法文章來源地址http://www.zghlxwxcb.cn/news/detail-776637.html

源碼實現(xiàn)

export function proxyRefs(object) {
  return new Proxy(object, {
    // 代理的思想，如果是ref 則取ref.value
    get(target, key, recevier) {
      let r = Reflect.get(target, key, recevier)
      return r.__v_isRef ? r.value : r
    },
    // 設(shè)置的時候如果是ref,則給ref.value賦值
    set(target, key, value, recevier) {
      let oldValue = target[key]
      if (oldValue.__v_isRef) {
        oldValue.value = value
        return true
      } else {
        return Reflect.set(target, key, value, recevier)
      }
    },
  })
}

測試代碼

const name = ref('柏成')
const age = ref('24')

const person = proxyRefs({
  name,
  age,
  sex: '男'
})

effect(() => {
  app.innerHTML = `${person.name}，${person.age}歲。性別${person.sex}。`
})

setTimeout(() => {
  name.value = '柏成9號'
}, 1000)

到了這里，關(guān)于【源碼系列#05】Vue3響應(yīng)式原理（Ref）的文章就介紹完了。如果您還想了解更多內(nèi)容，請在右上角搜索TOY模板網(wǎng)以前的文章或繼續(xù)瀏覽下面的相關(guān)文章，希望大家以后多多支持TOY模板網(wǎng)！