欧美bbbwbbbw肥妇,免费乱码人妻系列日韩,一级黄片

Vue3中關(guān)于ref和reactive的區(qū)別分析

 更新時(shí)間：2023年06月28日 09:00:05   作者：狂砍2分4籃板  
這篇文章主要介紹了vue3關(guān)于ref和reactive的區(qū)別分析，文中通過示例代碼介紹的非常詳細(xì)，具有一定的參考學(xué)習(xí)價(jià)值，需要的朋友們下面隨著小編來一起學(xué)習(xí)吧

一、reactive

數(shù)據(jù)類型

reactive()可用于創(chuàng)造一個(gè)響應(yīng)式對象，它接受一個(gè)參數(shù)，這個(gè)參數(shù)的類型是一個(gè)重點(diǎn)，接下來我們先看看Vue3的源碼里是怎么處理的。

function createReactiveObject(
  target: Target,
  isReadonly: boolean,
  baseHandlers: ProxyHandler<any>,
  collectionHandlers: ProxyHandler<any>,
  proxyMap: WeakMap<Target, any>
) {
  if (!isObject(target)) {
    if (__DEV__) {
      console.warn(`value cannot be made reactive: ${String(target)}`)
    }
    return target
  }
  // ...
}

Vue3主要是調(diào)用createReactiveObject函數(shù)來創(chuàng)建reactive對象，從源碼里可以看到，該函數(shù)會首先判斷reactive()傳入的參數(shù)是不是一個(gè)對象，如果不是則不做任何處理，直接返回原值，同時(shí)開發(fā)環(huán)境下會在控制臺輸出一句警告。所以嚴(yán)格上來說，reactive()并不是像有些人說的不能傳入基本類型的參數(shù)，它可以傳，只是這種數(shù)據(jù)會失去響應(yīng)式。

let name = reactive('張三')
setTimeout(() => {
  name = '李四'
  console.log(name, 'name') // 李四
}, 3000)
<template>
  <h1>{{ name }}</h1>
</template>

上面模板里仍然顯示的是張三，因?yàn)閚ame沒有響應(yīng)式不會觸發(fā)視圖更新。

原始數(shù)據(jù)與響應(yīng)式數(shù)據(jù)

我們可以先定義一個(gè)原始對象，再將對象傳入reactive()，此時(shí)原始對象和響應(yīng)式對象會互相干擾。

let data = { name: '張三' } // 原始對象
let state = reactive(data)
setTimeout(() => {
  state.name = '李四'
  console.log(data.name) // 李四
}, 2000)

修改響應(yīng)式對象state.name的值，原始對象data.name也會同步變化。

反過來也是一樣，修改data.name，state.name也會同步變化，但需要注意的是：這種情況下雖然state.name發(fā)生了改變但視圖并不會更新。

let data = { name: '張三' }
let state = reactive(data)
setTimeout(() => {
  data.name = '李四'
  console.log(state.name) // 李四，但template里仍為張三
}, 2000)
</script>
<template>
  <h1>{{ state.name }}</h1>
</template>

所以如果你是通過定義一個(gè)對象再將對象傳入reactive的話，建議始終是對響應(yīng)式對象進(jìn)行操作而不是原始數(shù)據(jù)。

二、ref

數(shù)據(jù)類型

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

從源碼里可以知道，ref()接受一個(gè)參數(shù)，參數(shù)可以是任意類型，這也是ref與reactive的區(qū)別之一，不管是基本類型還是引用類型ref都具備響應(yīng)式，另外ref要通過.value進(jìn)行取值。

let name = ref('張三') // 可以是基本類型
// 也可以是引用類型
let user = ref({
  name: '張三',
  age: 18
})
console.log(name.value)
console.log(user.value)

原始數(shù)據(jù)與響應(yīng)式數(shù)據(jù)

ref與reactive一樣，修改原始數(shù)據(jù)或響應(yīng)式數(shù)據(jù)都會同步改變對方的值，且在修改原始對象時(shí)都無法觸發(fā)視圖更新。

ref也可能是一種reactive

function createRef(rawValue: unknown, shallow: boolean) {
  if (isRef(rawValue)) {
    return rawValue
  }
  return new RefImpl(rawValue, shallow)
}
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) {
    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)
    }
  }
}

通過源碼可以知道，ref是通過RefImpl這個(gè)類來創(chuàng)建的，而在RefImpl內(nèi)部會調(diào)用toReactive函數(shù)，如果不是基本類型的數(shù)據(jù)，會將其轉(zhuǎn)換成reactive。

可重新賦值對象

使用reactive時(shí)，對響應(yīng)式對象重新賦值是會失去響應(yīng)式的。

let state = reactive({ name: '張三' })
setTimeout(() => {
  state = { name: '李四'}
  console.log(state.name) // 李四，數(shù)據(jù)變更了但視圖不會更新
}, 2000)

ref則沒有這種問題。

let state = ref({ name: '張三' })
setTimeout(() => {
  state.value = { name: '李四'}
  console.log(state.value.name) // 數(shù)據(jù)變更，同時(shí)視圖也會更新
}, 2000)

使用watch監(jiān)聽ref對象需要deep

let state = ref({ name: '張三' })
setTimeout(() => {
  state.value.name = '李四'
}, 2000)
watch(state, () => {
  console.log(state.value.name)
}, { deep: true })

reactive不加deep: truewatch也會觸發(fā)，而ref則需要手動加上。

小結(jié)

  • 對于響應(yīng)式而言，ref支持對象類型和基本類型，而reactive只支持對象類型
  • 當(dāng)ref是對象類型的時(shí)候，本質(zhì)上也是一個(gè)reactive
  • 對象類型的ref和reactive，其響應(yīng)式底層原理都是Proxy

以上就是Vue3中關(guān)于ref和reactive的區(qū)別分析的詳細(xì)內(nèi)容，更多關(guān)于vue3 ref 和reactive的資料請關(guān)注腳本之家其它相關(guān)文章！

相關(guān)文章

最新評論