有這兩個(gè)能夠幫我們“打通任督二脈”的Vue3高級技巧，掌握它們，將提高我們對底層原理的理解以及解決復(fù)雜問題的能力。

一、封裝的藝術(shù) —— 隨心所欲地創(chuàng)建 Composable函數(shù) (useXXX)

Composable是一個(gè)利用Vue組合式API來封裝和復(fù)用有狀態(tài)邏輯的函數(shù)。按照慣例，我們通常以use開頭命名，例如useMousePosition、useFetch。它不是一個(gè)特定的API，而是一種代碼組織模式。

• 告別Mixin的混亂：相比Vue2的Mixin，Composable的來源清晰，不存在命名沖突問題，類型推導(dǎo)也更友好。我們知道每一個(gè)響應(yīng)式狀態(tài)和方法都來自于哪個(gè)use函數(shù)。
• 邏輯內(nèi)聚，關(guān)注點(diǎn)分離：我們可以將一個(gè)復(fù)雜組件中的不同邏輯（如數(shù)據(jù)請求、事件監(jiān)聽、動(dòng)畫控制）拆分到不同的Composable中，讓組件的<script setup>部分變得異常清爽，只負(fù)責(zé)“組織”邏輯，而非“實(shí)現(xiàn)”邏輯。

1. 創(chuàng)建一個(gè)useDebouncedRef

假設(shè)我們有一個(gè)搜索框，希望在用戶停止輸入500毫秒后再去請求API，以避免頻繁的請求。這個(gè)“防抖”邏輯在很多地方都會(huì)用到。

(1) 創(chuàng)建 useDebouncedRef.ts：

注意： 這里我們順便用到了下一個(gè)技巧的核心API customRef，稍后會(huì)詳細(xì)講解。

(2) 在組件中使用

二、掌控響應(yīng)式 —— 玩轉(zhuǎn)customRef與shallowRef

在熟練掌握 ref和reactive 之后，隨著復(fù)雜功能或優(yōu)化性能的出現(xiàn)，需要在必要時(shí)“繞過”或“定制”Vue的默認(rèn)深度響應(yīng)式行為。

• customRef: 創(chuàng)建一個(gè)自定義的ref，并對其依賴跟蹤和更新觸發(fā)進(jìn)行顯式控制。我們上面的useDebouncedRef就是最佳范例。
• shallowRef: 創(chuàng)建一個(gè)只對.value的賦值操作是響應(yīng)式的ref。其內(nèi)部的值不會(huì)被深層地轉(zhuǎn)換為響應(yīng)式對象。
• customRef體現(xiàn)了我們對響應(yīng)式原理的理解：我們知道響應(yīng)式系統(tǒng)工作的兩個(gè)核心是track()（依賴收集）和trigger()（更新觸發(fā)）。能夠使用customRef意味著我們已經(jīng)從API使用者變成了API“創(chuàng)造者”。
• shallowRef是性能優(yōu)化的利器：當(dāng)我們有大型的、不可變的數(shù)據(jù)結(jié)構(gòu)時(shí)（例如一個(gè)巨大的JSON對象、一個(gè)第三方庫的實(shí)例），使用ref會(huì)對其進(jìn)行深度遞歸代理，造成不必要的性能開銷。此時(shí)shallowRef就是最佳選擇。

1. 使用shallowRef優(yōu)化大型數(shù)據(jù)

假設(shè)我們需要引入一個(gè)龐大的圖表庫實(shí)例，這個(gè)實(shí)例本身有很多內(nèi)部屬性，但我們只關(guān)心實(shí)例本身是否被替換。

將這兩個(gè)技巧融入我們的日常開發(fā)中，刻意練習(xí)，我們的代碼質(zhì)量和個(gè)人技術(shù)深度，必將邁上一個(gè)新的臺階。