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

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

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

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

1. 創建一個useDebouncedRef

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

(1) 創建 useDebouncedRef.ts：

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

(2) 在組件中使用

二、掌控響應式 —— 玩轉customRef與shallowRef

在熟練掌握 ref和reactive 之后，隨著復雜功能或優化性能的出現，需要在必要時“繞過”或“定制”Vue的默認深度響應式行為。

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

1. 使用shallowRef優化大型數據

假設我們需要引入一個龐大的圖表庫實例，這個實例本身有很多內部屬性，但我們只關心實例本身是否被替換。

將這兩個技巧融入我們的日常開發中，刻意練習，我們的代碼質量和個人技術深度，必將邁上一個新的臺階。