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)性的前提下傳遞這些引用。這個功能很重要,因?yàn)樗?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,因?yàn)?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 是文本插值計(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
這只是文本插值的一個方便功能,相當(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)文章
使用el-form-item設(shè)置標(biāo)簽長度
這篇文章主要介紹了使用el-form-item設(shè)置標(biāo)簽長度方式,具有很好的參考價值,希望對大家有所幫助,如有錯誤或未考慮完全的地方,望不吝賜教2023-10-10
談?wù)勔騐ue.js引發(fā)關(guān)于getter和setter的思考
最近因?yàn)楣镜男马?xiàng)目決定使用Vue.js來做,但在使用的過程中發(fā)現(xiàn)了一個有趣的事情,因?yàn)榘l(fā)現(xiàn)的這個事情展開了一些對于getter和setter的思考,具體是什么下面通過這篇文章來一起看看吧,有需要的朋友們可以參考學(xué)習(xí)。2016-12-12
vue-cli3.0.4中webpack的dist路徑如何修改
這篇文章主要介紹了vue-cli3.0.4中webpack的dist路徑如何修改,具有很好的參考價值,希望對大家有所幫助。如有錯誤或未考慮完全的地方,望不吝賜教2022-04-04

