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 這種原生集合類型的元素被訪問時，不會進行解包。
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)文章
vue如何自動化打包測試環(huán)境和正式環(huán)境的dist/test文件
這篇文章主要介紹了vue如何自動化打包測試環(huán)境和正式環(huán)境的dist/test文件,小編覺得挺不錯的，現(xiàn)在分享給大家，也給大家做個參考。一起跟隨小編過來看看吧2019-06-06
Vue中常用的rules校驗規(guī)則的實現(xiàn)
在vue開發(fā)中,難免遇到各種表單校驗,本文主要介紹了Vue中常用的rules校驗規(guī)則的實現(xiàn),具有一定的參考價值,感興趣的可以了解一下2023-10-10
uniapp定義new plus.nativeObj.View實現(xiàn)APP端全局彈窗功能
文章介紹了在UniApp中使用`newplus.nativeObj.View`實現(xiàn)彈窗的原因和方法,它定義了一個`AppPopupView`彈窗函數(shù),并在`main.js`中掛載到全局頁面,以便在任何地方調(diào)用,感興趣的朋友跟隨小編一起看看吧2024-11-11
這篇文章主要介紹了Vue實現(xiàn)圖片輪播組件思路及實例解析,文中通過示例代碼介紹的非常詳細(xì)，對大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價值,需要的朋友可以參考下2020-05-05
這篇文章主要介紹了vue如何給組件動態(tài)綁定不同的事件，具有很好的參考價值，希望對大家有所幫助。如有錯誤或未考慮完全的地方，望不吝賜教2022-10-10
這篇文章主要介紹了Vue過濾器與內(nèi)置指令和自定義指令及組件使用方法，文中通過示例代碼介紹的非常詳細(xì)，對大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價值，需要的朋友們下面隨著小編來一起學(xué)習(xí)吧2022-12-12
這篇文章主要介紹了使用vuepress搭建靜態(tài)博客的示例代碼，文中通過示例代碼介紹的非常詳細(xì)，對大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價值，需要的朋友們下面隨著小編來一起學(xué)習(xí)學(xué)習(xí)吧2019-02-02
vue.js中使用微信掃一掃解決invalid signature問題(完美解決)
這篇文章主要介紹了vue.js中使用微信掃一掃解決invalid signature問題(推薦),本文通過實例代碼給出解決方法，代碼簡單易懂非常不錯，具有一定的參考借鑒價值，需要的朋友可以參考下2020-04-04
搭建Vue從Vue-cli到router路由護衛(wèi)的實現(xiàn)
這篇文章主要介紹了搭建Vue從Vue-cli到router路由護衛(wèi)的實現(xiàn)，文中通過示例代碼介紹的非常詳細(xì)，對大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價值，需要的朋友們下面隨著小編來一起學(xué)習(xí)學(xué)習(xí)吧2019-11-11
這篇文章主要介紹了vue-cli 3.0 使用全過程，本文通過項目實例相結(jié)合的形式給大家介紹的非常詳細(xì),需要的朋友可以參考下2018-06-06