Vue3超詳細(xì)的ref()用法教程(看這一篇就夠了!)
ref( ) 接受一個內(nèi)部值，返回一個ref 對象，這個對象是響應(yīng)式的、可更改的，且只有一個指向其內(nèi)部值的屬性 .value。
ref() 將傳入?yún)?shù)的值包裝為一個帶 .value 屬性的 ref 對象。
1、ref 對象是可更改的，即可以為 .value 賦予新的值
舉例：
const a = ref(1);
// 為 a.value 賦予新的值
a.value = 2;
console.log("a--->", a);
console.log("a.value--->", a.value);查看打印結(jié)果：
2、ref 對象是響應(yīng)式的，即所有對 .value 的操作都將被追蹤，并且寫操作會觸發(fā)與之相關(guān)的副作用。
ref()方法允許創(chuàng)建可以使用任何值類型的響應(yīng)式 ref
ref 的 .value 屬性也是響應(yīng)式的。
當(dāng)ref的值為對象類型時，會用 reactive() 自動轉(zhuǎn)換它的 .value。
舉例：一個包含對象類型值的 ref 可以響應(yīng)式地替換整個對象
const b = ref({ name: 'vue3' });
// 響應(yīng)式替換
b.value = { name: 'vite' };
console.log("b--->", b);
console.log("b.value--->", b.value);查看打印結(jié)果：
ref 被傳遞給函數(shù)或是從一般對象上被解構(gòu)時，不會丟失響應(yīng)性：
const obj = {
foo: ref(0),
bar: ref(1)
}
// 該函數(shù)接收一個 ref
// 需要通過 .value 取值
// 但它會保持響應(yīng)性
callSomeFunction(obj.foo);
// 仍然是響應(yīng)式的
const { foo, bar } = obj;總結(jié)：ref() 讓我們能創(chuàng)造一種對任意值的 “引用”，并能夠在不丟失響應(yīng)性的前提下傳遞這些引用。這個功能很重要，因為它經(jīng)常用于將邏輯提取到組合函數(shù)中。
3、ref 在模板中的解包
當(dāng) ref 在模板中作為頂層屬性被訪問時，它們會被自動“解包”，所以不需要使用 .value。
<script setup>
import { ref } from 'vue';
const a = ref(1);
</script>
<template>
<!-- 無需 .value -->
<div>a:{{ a }}</div>
</template>??請注意，僅當(dāng) ref 是模板渲染上下文的頂層屬性時才適用自動“解包”。
<script setup>
import { ref } from 'vue';
const obj = {
count: ref(1)
}
</script>
<template>
<div>{{ obj.count + 1 }}</div>
</template>渲染的結(jié)果是 [object Object]1，因為 object.count 是一個 ref 對象
可以通過將 count 改成頂層屬性來解決這個問題：
<script setup>
import { ref } from 'vue';
const obj = {
count: ref(1)
}
// 將 count 改成頂層屬性
const { count } = obj;
</script>
<template>
<div>{{ count + 1 }}</div>
</template>渲染結(jié)果是 2
??如果一個 ref 是文本插值計算的最終值，它也將被解包
<script setup>
import { ref } from 'vue';
const obj = {
count: ref(1)
}
const { count } = obj;
</script>
<template>
<div>{{ count + 1 }}</div>
<div class="count">{{ obj.count }}</div>
</template><div class="count">{{ obj.count }}</div>的渲染結(jié)果為 1
這只是文本插值的一個方便功能，相當(dāng)于 {{ object.foo.value }}
4、ref 在響應(yīng)式對象中的解包
當(dāng)一個 ref 被嵌套在一個響應(yīng)式對象中，作為屬性被訪問或更改時，它會自動解包，因此會表現(xiàn)得和一般的屬性一樣：
import { ref, reactive } from 'vue';
const a = ref(0);
const obj = reactive({
a
})
console.log("obj.a--->", obj.a);
obj.a = 2;
console.log("a.value--->", a.value);查看打印結(jié)果：
如果將一個新的 ref 賦值給一個關(guān)聯(lián)了已有 ref 的屬性，那么它會替換掉舊的 ref：
import { ref, reactive } from 'vue';
const a = ref(0);
const other = ref(1);
const obj = reactive({
a
})
// 將一個新的 ref 賦值給一個關(guān)聯(lián)了已有 ref 的屬性
obj.a = other;
console.log("obj.a--->", obj.a);
// 原始 ref 現(xiàn)在已經(jīng)和 obj.a 失去聯(lián)系
console.log("a.value--->", a.value);查看打印結(jié)果：
只有當(dāng)嵌套在一個深層響應(yīng)式對象內(nèi)時，才會發(fā)生 ref 解包。當(dāng)其作為淺層響應(yīng)式對象的屬性被訪問時不會解包。
5、ref在數(shù)組和集合類型的解包
跟響應(yīng)式對象不同，當(dāng) ref 作為響應(yīng)式數(shù)組或像 Map 這種原生集合類型的元素被訪問時，不會進(jìn)行解包。
import { ref, reactive } from 'vue';
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);6、ts為 ref() 標(biāo)注類型
ref 會根據(jù)初始化時的值推導(dǎo)其類型：
import { ref } from 'vue'
// 推導(dǎo)出的類型：Ref<number>
const year = ref(2020)
// => TS Error: Type 'string' is not assignable to type 'number'.
year.value = '2020'有時我們可能想為 ref 內(nèi)的值指定一個更復(fù)雜的類型，可以通過使用 Ref 這個類型
import { ref } from 'vue'
import type { Ref } from 'vue'
const year: Ref<string | number> = ref('2020')
year.value = 2020 // 成功！或者，在調(diào)用 ref() 時傳入一個泛型參數(shù)，來覆蓋默認(rèn)的推導(dǎo)行為：
// 得到的類型：Ref<string | number>
const year = ref<string | number>('2020')
year.value = 2020 // 成功！如果你指定了一個泛型參數(shù)但沒有給出初始值，那么最后得到的就將是一個包含 undefined 的聯(lián)合類型：
// 推導(dǎo)得到的類型：Ref<number | undefined> const n = ref<number>()
總結(jié)
到此這篇關(guān)于Vue3超詳細(xì)ref()用法的文章就介紹到這了,更多相關(guān)Vue3的ref()用法內(nèi)容請搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關(guān)文章希望大家以后多多支持腳本之家！
相關(guān)文章
FcDesigner是基于Vue3.0的低代碼可視化表單設(shè)計器,可數(shù)據(jù)驅(qū)動表單渲染,提高開發(fā)效率,本文給大家介紹了Vue3如何使用FcDesigner生成一個文檔,需要的朋友可以參考下2026-05-05
vuex中數(shù)據(jù)持久化插件vuex-persistedstate使用詳解
這篇文章主要介紹了vuex中數(shù)據(jù)持久化插件vuex-persistedstate使用詳解，具有很好的參考價值，希望對大家有所幫助。如有錯誤或未考慮完全的地方，望不吝賜教2022-03-03
這篇文章主要為大家介紹了如何利用Vue實現(xiàn)輸入框@功能，文中的示例代碼講解詳細(xì)，對我們學(xué)習(xí)Vue有一定的幫助，感興趣的可以學(xué)習(xí)一下2022-05-05
antd vue表格可編輯單元格以及求和實現(xiàn)方式
這篇文章主要介紹了antd vue表格可編輯單元格以及求和實現(xiàn)方式，具有很好的參考價值，希望對大家有所幫助。如有錯誤或未考慮完全的地方，望不吝賜教2023-04-04
詳解使用vue-router進(jìn)行頁面切換時滾動條位置與滾動監(jiān)聽事件
本篇文章主要介紹了詳解使用vue-router進(jìn)行頁面切換時滾動條位置與滾動監(jiān)聽事件，具有一定的參考價值，感興趣的小伙伴們可以參考一下。2017-03-03
完美解決element-ui的el-input設(shè)置number類型后的相關(guān)問題
Vue ElementUI中Upload組件批量上傳的實現(xiàn)代碼
