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 的操作都將被追蹤，并且寫操作會(huì)觸發(fā)與之相關(guān)的副作用。
ref()方法允許創(chuàng)建可以使用任何值類型的響應(yīng)式 ref
ref 的 .value 屬性也是響應(yīng)式的。
當(dāng)ref的值為對(duì)象類型時(shí)，會(huì)用 reactive() 自動(dòng)轉(zhuǎn)換它的 .value。
舉例：一個(gè)包含對(duì)象類型值的 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
// 需要通過 .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 在模板中作為頂層屬性被訪問時(shí)，它們會(huì)被自動(dòng)“解包”，所以不需要使用 .value。
<script setup>
import { ref } from 'vue';
const a = ref(1);
</script>
<template>
<!-- 無需 .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ì)象
可以通過將 count 改成頂層屬性來解決這個(gè)問題：
<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ì)象中，作為屬性被訪問或更改時(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ì)象的屬性被訪問時(shí)不會(huì)解包。
5、ref在數(shù)組和集合類型的解包
跟響應(yīng)式對(duì)象不同，當(dāng) ref 作為響應(yīng)式數(shù)組或像 Map 這種原生集合類型的元素被訪問時(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)注類型
ref 會(huì)根據(jù)初始化時(shí)的值推導(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'有時(shí)我們可能想為 ref 內(nèi)的值指定一個(gè)更復(fù)雜的類型，可以通過使用 Ref 這個(gè)類型
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ù)，來覆蓋默認(rèn)的推導(dǎo)行為：
// 得到的類型：Ref<string | number>
const year = ref<string | number>('2020')
year.value = 2020 // 成功！如果你指定了一個(gè)泛型參數(shù)但沒有給出初始值，那么最后得到的就將是一個(gè)包含 undefined 的聯(lián)合類型：
// 推導(dǎo)得到的類型：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)文章
本文主要介紹了vue-socket.io使用教程與踩坑記錄，文中通過示例代碼介紹的非常詳細(xì)，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下2022-04-04
使用el-form-item設(shè)置標(biāo)簽長(zhǎng)度
這篇文章主要介紹了使用el-form-item設(shè)置標(biāo)簽長(zhǎng)度方式,具有很好的參考價(jià)值,希望對(duì)大家有所幫助,如有錯(cuò)誤或未考慮完全的地方,望不吝賜教2023-10-10
談?wù)勔騐ue.js引發(fā)關(guān)于getter和setter的思考
最近因?yàn)楣镜男马?xiàng)目決定使用Vue.js來做，但在使用的過程中發(fā)現(xiàn)了一個(gè)有趣的事情，因?yàn)榘l(fā)現(xiàn)的這個(gè)事情展開了一些對(duì)于getter和setter的思考，具體是什么下面通過這篇文章來一起看看吧，有需要的朋友們可以參考學(xué)習(xí)。2016-12-12
這篇文章主要介紹了vue自定義全局消息框組件問題及解決方法，本文給大家介紹的非常詳細(xì)，具有一定的參考借鑒價(jià)值,需要的朋友可以參考下2019-11-11
vue-cli3.0.4中webpack的dist路徑如何修改
這篇文章主要介紹了vue-cli3.0.4中webpack的dist路徑如何修改，具有很好的參考價(jià)值，希望對(duì)大家有所幫助。如有錯(cuò)誤或未考慮完全的地方，望不吝賜教2022-04-04
今天小編就為大家分享一篇在vue中阻止瀏覽器后退的實(shí)例，具有很好的參考價(jià)值，希望對(duì)大家有所幫助。一起跟隨小編過來看看吧2019-11-11
這篇文章主要介紹了vue-cli在 history模式下的配置詳解，文中通過示例代碼介紹的非常詳細(xì)，對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值，需要的朋友們下面隨著小編來一起學(xué)習(xí)學(xué)習(xí)吧2019-11-11
在實(shí)際項(xiàng)目開發(fā)過程中，如果公共數(shù)據(jù)比較多我們會(huì)使用vuex做公共狀態(tài)管理，但是在對(duì)瀏覽器進(jìn)行刷新操作的時(shí)候，會(huì)導(dǎo)致vuex內(nèi)的數(shù)據(jù)丟失，這種情況有些時(shí)候是沒問題的，但是有的時(shí)候我們需要某些數(shù)據(jù)可以持久化的保存，這樣就需要做對(duì)應(yīng)的處理2023-01-01
這篇文章主要介紹了Vue之關(guān)于異步更新細(xì)節(jié),具有很好的參考價(jià)值,希望對(duì)大家有所幫助,如有錯(cuò)誤或未考慮完全的地方,望不吝賜教2024-06-06
vue動(dòng)態(tài)修改頁面title的兩種方法
本文主要介紹了vue動(dòng)態(tài)修改頁面title的兩種方法，文中通過示例代碼介紹的非常詳細(xì)，對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值，需要的朋友們下面隨著小編來一起學(xué)習(xí)學(xué)習(xí)吧2023-06-06