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