vue3中的ref()詳解

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

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

ref()

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

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

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

對于屬性值是ref對象的對象，解構(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>

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

const obj = {
    age: ref(1)
}

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

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

const {age} = obj;

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

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

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

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

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

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

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

跟響應(yīng)式對象不同，當(dāng) ref 作為響應(yīng)式數(shù)組或像 Map 這種原生集合類型的元素被訪問時(shí)，不會進(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對象，并只有一個(gè)屬性.value可通過.value 獲取或修改值。在模板中自動(dòng)解包，對于對象在模板中使用若需要邏輯操作需.value。解構(gòu)出來的也具有響應(yīng)式對于響應(yīng)式對象可以解包當(dāng)一個(gè)ref對象賦值給另一個(gè)ref對象，則會替換舊的ref對象對于響應(yīng)式數(shù)組則不會解包

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

您可能感興趣的文章: