在使用 vue 組合時(shí)，有時(shí)候想用 ref，有時(shí)候又不想使用。本節(jié)，介紹一種模式，可以讓我即可以使用 ref，又可以不使用，從而讓組件更具有靈活性。
使用ref和unref獲得更靈活的參數(shù)
幾乎所有可組合對(duì)象都需要某種類型的參數(shù)作為輸入。通常，這是一個(gè)響應(yīng)式 ref。它也可以是一個(gè)原始的Javascript類型，比如字符串、數(shù)字或?qū)ο蟆?/p>
但是我們想要編寫更加靈活和可重用的組合，所以我們不僅要接收 ref 類型的參數(shù)也可以接收原始類型參數(shù)，然后我們將參數(shù)轉(zhuǎn)換為我們需要參數(shù)。如下所示：
// 傳遞一個(gè) refconst countRef = ref(2);useCount(countRef);// 或者直接一個(gè)數(shù)字const countRef = useRef(2);
VueUse 中的 useTitle 也是采用這種模式。
當(dāng)我們傳入一個(gè) ref 時(shí)，網(wǎng)頁標(biāo)題就可以通過 .value 的方式來動(dòng)態(tài)更改。
const title = ref(‘This is the title’);useTitle(title);title.value = ‘New title please’;
如果傳入的是一個(gè)字符串，useTitle內(nèi)部會(huì)創(chuàng)建一個(gè) ref，值為我們所傳入的字符，最后返回一個(gè) ref 變量，然后 .value 的方式來動(dòng)態(tài)更改。
const title = useTitle(‘This is the title’);title.value = ‘New title please’;
在組合中實(shí)現(xiàn)一個(gè)靈活的參數(shù)
為了讓靈活的參數(shù)模式能工作，我們需要對(duì)得到的參數(shù)使用ref函數(shù)或unref函數(shù)。
export default useMyComposable(input) { const ref = ref(input);}export default useMyComposable(input) { const rawValue = unref(input);}
ref 函數(shù)將為我們創(chuàng)建一個(gè)新的ref。但如果我們傳給它一個(gè)ref，它只是把這個(gè)ref返回給我們
// 創(chuàng)建一個(gè) refconst myRef = ref(0);// 結(jié)果是相等的assert(myRef === ref(myRef));
unref函數(shù)的工作原理是一樣的，但是它要么解開一個(gè)ref，要么把我們的原始值還給我們。
const value = unref(myRef);// 結(jié)果是相等的assert(value === unref(value));
讓我們看看VueUse中的一些組合是如何實(shí)現(xiàn)這個(gè)模式的。VueUse是Vue 3的一個(gè)開源組合集合，編寫得非常好。它是學(xué)習(xí)如何編寫可組合代碼的一個(gè)很好的資源
useTitle
回到useTitle，這個(gè)我們已經(jīng)很熟悉它。
這種可組合的模式可以讓我們傳入一個(gè)字符串或一個(gè)字符串的 ref。它并不關(guān)心我們提供的是哪一個(gè)。
// Pass in a stringconst titleRef = useTitle(‘Initial title’);// Pass in a ref of a stringconst titleRef = ref(‘Initial title’);useTitle(titleRef);
在源代碼中，可以看到，在我們對(duì)選項(xiàng)對(duì)象進(jìn)行解構(gòu)之后，我們就創(chuàng)建了title ref。這里使用了ref函數(shù)，它允許我們使用一個(gè)ref或一個(gè)字符串來創(chuàng)建 title 的 ref。
// …const title = ref(newTitle ?? document?.title ?? null)// …
這里的意思是先取 newTitle 作為初始化值，如果沒有在取 document?.title，還是沒有就取 null。
對(duì)于TypeScript 使用者來說，這里有一些趣事需要注意。
這里使用的newTitle變量的類型是MaybeRef。下面是這個(gè)類型的定義：
type MaybeRef = T | Ref
這個(gè)類型定義意味著 MaybeRef 類型既可以是一個(gè)字符串，也可以是一個(gè)Ref，也就是一個(gè)里面有一個(gè)字符串值的Ref。
我們接著看下一個(gè)組合也是使用這種類型來實(shí)現(xiàn)這種模式。
useCssVar
useCssVar 組合允許我們抓取一個(gè)CSS變量的值并在我們的應(yīng)用程序中使用它。
const backgroundColor = useCssVar(‘–background-color’);
但與useTitle不同的是，這里我們需要字符串值，這樣我們就可以在DOM中查找CSS變量。使用unref函數(shù)，這個(gè)可組合的函數(shù)可以同時(shí)處理傳入的引用和字符串。
// Using a stringconst backgroundColor = useCssVar(‘–background-color’);// Using a refconst cssVarRef = ref(‘–background-color’);const backgroundColor = useCssVar(cssVarRef);
看一下源代碼，我們可以看到它使用unref函數(shù)來完成這個(gè)任務(wù)。實(shí)際上，它使用了一個(gè)輔助函數(shù)，叫做unrefElement，以確保我們得到的是一個(gè)DOM元素，而不只是一個(gè)Vue實(shí)例。
如果想進(jìn)一步探索它，VueUse中的大多數(shù)組合都實(shí)現(xiàn)了這種模式。所以，選擇一個(gè)感興趣的，然后深入到代碼中去吧。
總結(jié)
我們剛剛花了一些時(shí)間學(xué)習(xí)了這個(gè)系列的第二個(gè)模式，在這個(gè)模式中，我們可以通過在我們的可組合程序中巧妙地使用 ref 和 unref 來更靈活地使用參數(shù)。無論你碰巧有一個(gè)ref還是只有Javascript的原始值，可合成的東西仍然可以工作。它能適應(yīng)你的使用方式!
我們還看了VueUse庫如何在 useTitle 和 useCssVar 組合中實(shí)現(xiàn)這種模式。useTitle 組合使用 ref 函數(shù)，而 useCssVar 使用 unref 函數(shù)，這樣我們就可以看到兩種變化的作用。
在下一篇文章中，我們將介紹另一種模式，通過使返回值動(dòng)態(tài)化來改進(jìn)它們。我們將學(xué)習(xí)如何根據(jù)需要，返回一個(gè)單一的值或一個(gè)對(duì)象。
// Returns a single valueconst isDark = useDark();// Returns an object of valuesconst { counter, pause, resume,} = useInterval(1000, { controls: true });
這種模式可以使你的可組合性在使用上簡單得多，特別是當(dāng)你在大多數(shù)時(shí)候只需要一個(gè)單一的值時(shí)。
作者：Michael Thiessen 譯者：小智 來源：vuemastery 原文：https://www.vuemastery.com/blog/coding-btter-composables-1-of-5
