vue3中的ref()詳解

更新時(shí)間：2023年05月12日 14:27:35 作者：海闊天空BM

ref對(duì)象可以通過(guò).value屬性進(jìn)行修改，修改后的值也是響應(yīng)式的，并且修改后會(huì)觸發(fā)相關(guān)的副作用，這篇文章主要介紹了vue3中的ref(),需要的朋友可以參考下

ref()

接受一個(gè)值，返回一個(gè)響應(yīng)式的，可以修改的ref對(duì)象，這個(gè)對(duì)象只有一個(gè).vaule屬性。

ref對(duì)象可以通過(guò).value屬性進(jìn)行修改，修改后的值也是響應(yīng)式的，并且修改后會(huì)觸發(fā)相關(guān)的副作用。

如果將一個(gè)對(duì)象賦值給ref，則這個(gè)對(duì)象會(huì)通過(guò)reactive()轉(zhuǎn)為具有深層次的響應(yīng)式對(duì)象。

對(duì)于屬性值是ref對(duì)象的對(duì)象，解構(gòu)后也具有響應(yīng)式。

1. ref在模板中自動(dòng)解包

當(dāng)ref作為頂層屬性在模板中使用時(shí)，自動(dòng)解包，不用.value即可獲取值。

const count = ref(1);
count.value = 2;

直接使用

<!-- count值為2 -->
<div>{{count}}</div>
<!-- 正確 -->
<div>{{count + 1}}</div>

若不是頂層屬性, 假如值需要邏輯操作，則會(huì)出現(xiàn)問(wèn)題。

const obj = {
    age: ref(1)
}

<!-- 可以正常顯示-->
<div>{{obj.age}}</div>
<!-- 會(huì)報(bào)錯(cuò)  渲染的結(jié)果會(huì)是一個(gè) [object Object]，因?yàn)?obj.age 是一個(gè) ref 對(duì)象。需要obj.age.value 才能正常顯示-->
<div>{{obj.age + 1}}</div>

解構(gòu)后也具有響應(yīng)式

const {age} = obj;

2. ref 在響應(yīng)式對(duì)象中的解包

一個(gè)ref對(duì)象嵌套在一個(gè)響應(yīng)式對(duì)象中，屬性訪問(wèn)時(shí)會(huì)自動(dòng)解包

const a = ref(1)
const state = reactive({
    age: a
})
console.log(state.age); // 1 直接解包，不用state.age.value

如果將一個(gè)新的 ref 賦值給另一個(gè)對(duì)象具有 ref屬性的，那么它會(huì)替換掉舊的 ref。

const b = ref(3);
// 假如將b直接賦值給state.age,因?yàn)閎是一個(gè)ref對(duì)象，則會(huì)替代之前的ref對(duì)象，則現(xiàn)在state.age不管如何變化都變量a沒(méi)有了關(guān)系
state.age = b;
console.log(stata.age); // 3
console.log(a); // 1
// 假如將b.value賦值給state.age,其實(shí)b.value就相等于一個(gè)值，并不是ref對(duì)象，則不會(huì)替代之前的ref對(duì)象，則state.age變化，之前的變量a也會(huì)隨之變化
state.age = b.value;
console.log(state.age); // 3
console.log(a); // 3

只有當(dāng)嵌套在一個(gè)深層響應(yīng)式對(duì)象內(nèi)時(shí)，才會(huì)發(fā)生 ref 解包。當(dāng)其作為淺層響應(yīng)式對(duì)象的屬性被訪問(wèn)時(shí)不會(huì)解包。

3. 數(shù)組和集合類型的 ref 解包

跟響應(yīng)式對(duì)象不同，當(dāng) ref 作為響應(yīng)式數(shù)組或像 Map 這種原生集合類型的元素被訪問(wèn)時(shí)，不會(huì)進(jìn)行解包。

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)

總結(jié)

返回一個(gè)具有響應(yīng)式的ref對(duì)象，并只有一個(gè)屬性.value可通過(guò).value 獲取或修改值。在模板中自動(dòng)解包，對(duì)于對(duì)象在模板中使用若需要邏輯操作需.value。解構(gòu)出來(lái)的也具有響應(yīng)式對(duì)于響應(yīng)式對(duì)象可以解包當(dāng)一個(gè)ref對(duì)象賦值給另一個(gè)ref對(duì)象，則會(huì)替換舊的ref對(duì)象對(duì)于響應(yīng)式數(shù)組則不會(huì)解包

到此這篇關(guān)于vue3中的ref()的文章就介紹到這了,更多相關(guān)vue3中的ref()內(nèi)容請(qǐng)搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關(guān)文章希望大家以后多多支持腳本之家！

您可能感興趣的文章: