目錄

• ref()
• 1. ref在模板中自動解包
• 2. ref 在響應式對象中的解包
• 3. 數組和集合類型的 ref 解包
• 總結

ref()

接受一個值，返回一個響應式的，可以修改的ref對象，這個對象只有一個.vaule屬性。

ref對象可以通過.value屬性進行修改，修改后的值也是響應式的，并且修改后會觸發相關的副作用。

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

對于屬性值是ref對象的對象，解構后也具有響應式。

1. ref在模板中自動解包

當ref作為頂層屬性在模板中使用時，自動解包，不用.value即可獲取值。

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

直接使用

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

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

const obj = {
    age: ref(1)
}

<!-- 可以正常顯示-->
<div>{{obj.age}}</div>
<!-- 會報錯  渲染的結果會是一個 [object Object]，因為 obj.age 是一個 ref 對象。需要obj.age.value 才能正常顯示-->
<div>{{obj.age + 1}}</div>

解構后也具有響應式

const {age} = obj;

2. ref 在響應式對象中的解包

一個ref對象嵌套在一個響應式對象中，屬性訪問時會自動解包

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

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

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

只有當嵌套在一個深層響應式對象內時，才會發生 ref 解包。當其作為淺層響應式對象的屬性被訪問時不會解包。

3. 數組和集合類型的 ref 解包

跟響應式對象不同，當 ref 作為響應式數組或像 Map 這種原生集合類型的元素被訪問時，不會進行解包。

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對象，并只有一個屬性.value可通過.value 獲取或修改值。在模板中自動解包，對于對象在模板中使用若需要邏輯操作需.value。解構出來的也具有響應式對于響應式對象可以解包當一個ref對象賦值給另一個ref對象，則會替換舊的ref對象對于響應式數組則不會解包

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