快捷導(dǎo)航

Vue3組合式函數(shù)Composable實(shí)戰(zhàn)ref和unref使用

更新時(shí)間：2023年06月28日 09:21:56 作者：前端榮耀

這篇文章主要為大家介紹了Vue3組合式函數(shù)Composable實(shí)戰(zhàn)ref和unref使用詳解，有需要的朋友可以借鑒參考下，希望能夠有所幫助，祝大家多多進(jìn)步，早日升職加薪

正文

本文為翻譯文章，部分內(nèi)容難免理解有偏差，如有錯(cuò)誤歡迎大家指正。原文鏈接見文章末尾。

在使用Vue.js中的組合式時(shí)，有時(shí)你已經(jīng)有了一個(gè)想要使用的ref，而有時(shí)你沒有。本文將介紹一種模式，讓你可以以兩種方式使用組合式，從而在編寫應(yīng)用程序時(shí)提供更多的靈活性。

本篇是這個(gè)系列文章的第二篇，全部涵蓋內(nèi)容如下：

1.如何通過選項(xiàng)對象參數(shù)使您的組合更加可配置；
2.使用ref和unref使我們的參數(shù)更加靈活；?? 本篇主題
3.如何使你的返回值更有用；
4.為什么從接口定義開始可以使你的組合式函數(shù)更強(qiáng)大；
5.如何使用異步代碼而無需“等待” - 使您的代碼更易于理解；

使用ref和unref來實(shí)現(xiàn)更靈活的參數(shù)傳遞

通常，組合式API需要某些類型的參數(shù)作為輸入，通常會使用到響應(yīng)式變量參數(shù)。它也可以是原始的Javascript類型，如字符串，數(shù)字或?qū)ο?。但是，為了使組合式更具靈活性和可重用性，我們會希望它可以接受任意類型的參數(shù)，并在運(yùn)行時(shí)將其轉(zhuǎn)換為所需的類型。

// Works if we give it a ref we already have 
const countRef = ref(2); 
useCount(countRef); 
// Also works if we give it just a number 
const countRef = useCount(2);

我們上篇里面提到的useTitle也適用于這種模式。當(dāng)我們傳入一個(gè)ref的時(shí)候，頁面的標(biāo)題將會被設(shè)置成這個(gè)ref的value。

const title = ref('這里是標(biāo)題'); 
useTitle(title); 
title.value = '這是一個(gè)新標(biāo)題';

如果我們傳入一個(gè)字符串變量的話，它將會創(chuàng)建一個(gè)新的ref和標(biāo)題進(jìn)行關(guān)聯(lián)：

const title = useTitle('這里是標(biāo)題'); 
title.value = '這是一個(gè)新標(biāo)題';

上面的例子可能看起來區(qū)別不大，但是，在我們使用到一些方法或者組合式API的時(shí)候，我們可能會有不同的引用來源，從而這個(gè)組合式可以適應(yīng)不同的情況。

下面讓我們來看一下如何在我們的組合式中使用這種模式。

在組合式中實(shí)現(xiàn)靈活的參數(shù)

想實(shí)現(xiàn)靈活的參數(shù)模式，我們需要使用到ref和unref方法在參數(shù)上面。

// When we need to use a ref in the composable 
export default useMyComposable(input) { 
    const ref = ref(input); 
} 
// When we need to use a raw value in the composable 
export default useMyComposable(input) { 
    const rawValue = unref(input); 
}

如果是非響應(yīng)式的參數(shù)變量的話，ref方法會創(chuàng)建一個(gè)新的ref變量給我們；如果是響應(yīng)式的話，它會直接將對應(yīng)的變量返回給我們。

// Create a new ref 
const myRef = ref(0); 
// Get the same ref back 
assert(myRef === ref(myRef));

unref方法類似，只不過它是將變量的真實(shí)值返回給我們

// Unwrap to get the inner value 
const value = unref(myRef); 
// Returns the same primitive value 
assert(value === unref(value));

下面讓我們看看在VueUse中使用這種模式的例子。

舉例-useTitle

讓我們繼續(xù)來看下我們已經(jīng)熟悉的useTitle方法。它允許我們傳入一個(gè)字符串或者是響應(yīng)式字符串變量：

// 傳入字符串變量
const titleRef = useTitle('Initial title'); 
// 傳入響應(yīng)式字符串變量 
const titleRef = ref('Initial title'); 
useTitle(titleRef);

在它的源碼中，我們可以看出，它通過ref方法來處理我們傳入的變量

// ... 
const title = ref(newTitle ?? document?.title ?? null) 
// ...

它使用到了JavaScript中的nullish coalescing(空值合并)運(yùn)算符，其語法為“??”，意思是“如果左側(cè)的值為null或undefined，則使用右側(cè)的值”。在代碼中，如果newTitle未定義，則使用document.title，如果document.title也未定義，則使用null。這個(gè)運(yùn)算符可以用于簡化代碼中的條件判斷。

另外，useTitle的類型定義中還使用到了TypeScript 中的 MaybeRef 類型，它可以是 string 類型或 Ref<string> 類型。其中 Ref<T> 是一個(gè)帶有 T 類型值的 ref。

type MaybeRef<T> = T | Ref<T>

舉例-useCssVar

useCssVar允許我們獲取到CSS變量的值并在應(yīng)用程序中使用它。和useTitle不同的是，我們需要傳入一個(gè)string類型的值，來查詢對應(yīng)DOM上面的CSS變量。通過unref方法，來處理傳入的變量 - string類型或者是一個(gè)ref：

// Using a string 
const backgroundColor = useCssVar('--background-color'); 
// Using a ref 
const cssVarRef = ref('--background-color'); 
const backgroundColor = useCssVar(cssVarRef);

通過查看它的源碼，我們可以看出它使用了unRef方法來處理傳入的參數(shù)。而且，它還使用了一個(gè)輔助函數(shù)unrefElement，用于確保獲取的是 DOM 元素而不是 Vue 實(shí)例。

在VueUse中很多組合式方法都使用了這個(gè)模式，如果你想深入研究的話，選擇一個(gè)感興趣的去看它的源碼吧。