快捷導航

Vue3關(guān)于響應(yīng)式數(shù)據(jù)類型詳解(ref、reactive、toRef、及toRefs)

更新時間：2023年01月29日 14:55:46 作者：Oxygen_liu

這篇文章主要介紹了Vue3關(guān)于響應(yīng)式數(shù)據(jù)類型(ref、reactive、toRef、以及toRefs),本文結(jié)合示例代碼給大家介紹的非常詳細，對大家的學習或工作具有一定的參考借鑒價值，需要的朋友可以參考下

ref

接受一個內(nèi)部值，返回一個響應(yīng)式的、可更改的 ref 對象，此對象只有一個指向其內(nèi)部值的 property .value。

類型

function ref<T>(value: T): Ref<UnwrapRef<T>>

interface Ref<T> {
  value: T
}

詳細信息

ref 對象是可更改的，也就是說你可以為 .value 賦予新的值。它也是響應(yīng)式的，即所有對 .value 的操作都將被追蹤，并且寫操作會觸發(fā)與之相關(guān)的副作用。
如果將一個對象賦值給 ref，那么這個對象將通過 reactive() 轉(zhuǎn)為具有深層次響應(yīng)式的對象。這也意味著如果對象中包含了嵌套的 ref，它們將被深層地解包。
若要避免這種深層次的轉(zhuǎn)換，請使用 shallowRef() 來替代

示例

import { ref } from 'vue
const count = ref<number>(0)
console.log(count.value) // 0
count.value++
console.log(count.value) // 1

reactive

返回一個對象的響應(yīng)式代理

類型

function reactive<T extends object>(target: T): UnwrapNestedRefs<T>

詳細信息

響應(yīng)式轉(zhuǎn)換是“深層”的：它會影響到所有嵌套的 property。一個響應(yīng)式對象也將深層地解包任何 ref property，同時保持響應(yīng)性。

值得注意的是，當訪問到某個響應(yīng)式數(shù)組或 Map 這樣的原生集合類型中的 ref 元素時，不會執(zhí)行 ref 的解包。

若要避免深層響應(yīng)式轉(zhuǎn)換，只想保留對這個對象頂層次訪問的響應(yīng)性，請使用 shallowReactive() 作替代。

返回的對象以及其中嵌套的對象都會通過 ES Proxy 包裹，因此不等于源對象，建議只使用響應(yīng)式代理，避免依賴于原始對象。

示例

import { reactive } from 'vue'
interface Obj {
  count: number
}
const obj = reactive<Obj>({ count: 0 })
obj.count++

ref 的解包：

const count = ref(1)
const obj = reactive({ count })

// ref 會被解包
console.log(obj.count === count.value) // true

// 會更新 `obj.count`
count.value++
console.log(count.value) // 2
console.log(obj.count) // 2

// 也會更新 `count` ref
obj.count++
console.log(obj.count) // 3
console.log(count.value) // 3

注意當訪問到某個響應(yīng)式數(shù)組或 Map 這樣的原生集合類型中的 ref 元素時，不會執(zhí)行 ref 的解包

const books = reactive([ref('Vue 3 Guide')])
// 這里需要 .value
console.log(books[0].value)

const map = reactive(new Map([['count', ref(0)]]))
// 這里需要 .value
console.log(map.get('count').value)

將一個 ref 賦值給為一個 reactive 屬性時，該 ref 會被自動解包：

const count = ref(1)
const obj = reactive({})

obj.count = count

console.log(obj.count) // 1
console.log(obj.count === count.value) // true

toRef()

可用于為響應(yīng)式對象上的 property 創(chuàng)建 ref。這樣創(chuàng)建的 ref 與其源 property 保持同步：改變源 property 將更新 ref，反之亦然。

類型

function toRef<T extends object, K extends keyof T>(
  object: T,
  key: K,
  defaultValue?: T[K]
): ToRef<T[K]>

type ToRef<T> = T extends Ref ? T : Ref<T>

示例

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

請注意，這不同于：

const fooRef = ref(state.foo)
//上面這個 ref 不會和 state.foo 保持同步，因為這個 ref() 接收到的是一個純數(shù)值。

//toRef() 這個函數(shù)在你想把一個 prop 的 ref 傳遞給一個組合式函數(shù)時會很有用

<script setup>
import { toRef } from 'vue'

const props = defineProps(/* ... */)

// 將 `props.foo` 轉(zhuǎn)換為 ref，然后傳入
// 一個組合式函數(shù)
useSomeFeature(toRef(props, 'foo'))
</script>

當 toRef 與組件 prop 結(jié)合使用時，關(guān)于對 prop 做出更改的通用限制依然有效。嘗試將新的值傳遞給 ref 等效于嘗試直接更改 prop，這是不允許的。在這種場景下，你可能可以考慮使用帶有 get 和 set 的 computed 替代。

即使源 property 當前不存在，toRef() 也會返回一個可用的 ref。這讓它在處理可選 prop 的時候格外實用，而可選 prop 在使用 toRefs 時不會被保留。

toRefs()

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

類型

function toRefs<T extends object>(
  object: T
): {
  [K in keyof T]: ToRef<T[K]>
}

type ToRef = T extends Ref ? T : Ref<T>

示例

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

const stateAsRefs = toRefs(state)
/*
stateAsRefs 的類型：{
  foo: Ref<number>,
  bar: Ref<number>
}
*/

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

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

當從組合式函數(shù)中返回響應(yīng)式對象時，toRefs 大有作為，使用它，消費者組件可以解構(gòu)/擴展返回的對象而不會失去響應(yīng)性：

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

  // ...基于狀態(tài)的操作邏輯

  // 在返回時都轉(zhuǎn)為 ref
  return toRefs(state)
}

// 可以解構(gòu)而不會失去響應(yīng)性
const { foo, bar } = useFeatureX()

toRefs 在調(diào)用時只會為源對象上可以列舉出的 property 創(chuàng)建 ref。如果要為可能還不存在的 property 創(chuàng)建 ref，請改用 toRef 。

到此這篇關(guān)于Vue3關(guān)于響應(yīng)式數(shù)據(jù)類型(ref、reactive、toRef、以及toRefs)的文章就介紹到這了,更多相關(guān)Vue3響應(yīng)式數(shù)據(jù)類型內(nèi)容請搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關(guān)文章希望大家以后多多支持腳本之家！

您可能感興趣的文章: