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

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

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

正文

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

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

本篇是這個系列文章的第二篇，全部涵蓋內容如下：

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

使用ref和unref來實現更靈活的參數傳遞

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

// 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也適用于這種模式。當我們傳入一個ref的時候，頁面的標題將會被設置成這個ref的value。

const title = ref('這里是標題'); 
useTitle(title); 
title.value = '這是一個新標題';

如果我們傳入一個字符串變量的話，它將會創(chuàng)建一個新的ref和標題進行關聯：

const title = useTitle('這里是標題'); 
title.value = '這是一個新標題';

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

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

在組合式中實現靈活的參數

想實現靈活的參數模式，我們需要使用到ref和unref方法在參數上面。

// 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); 
}

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

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

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

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

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

舉例-useTitle

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

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

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

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

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

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

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

舉例-useCssVar

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

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

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

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