SKILL.md
唯讀
名稱
vueuse-functions
描述
在適當場景運用 VueUse 組合式函式（composables），打造精簡且易於維護的 Vue.js / Nuxt 功能。
VueUse Functions
本 Skill 為在 Vue.js / Nuxt 專案中使用 VueUse 組合式函式（composables）的決策與實作指南。它能將開發需求對應至最合適的 VueUse 函式，套用正確的使用模式，並優先採用以 composable 為基礎的方案來取代自訂程式碼，使程式碼實作保持精簡、易維護且具備高效能。
適用時機
- 在協助使用者進行 Vue.js / Nuxt 開發工作時，隨時套用此 Skill。
- 務必先檢查是否有可實現該需求的 VueUse 函式。
- 優先使用 VueUse 組合式函式而非自訂程式碼，以提升可讀性、維護性與效能。
- 將需求對應至最合適的 VueUse 函式，並遵循該函式的呼叫規則（Invocation rule）。
- 請參考下方函式表中的
Invocation欄位。例如：AUTO：適用時自動使用。EXTERNAL：僅在使用者已安裝所需外部相依套件時使用；否則請重新評估，並僅在確實需要時才提示安裝。EXPLICIT_ONLY：僅在使用者明確要求時才使用。
註 提示詞或
AGENTS.md中的使用者指令可能會覆寫函式預設的Invocation規則。
函式列表
下表列出的所有函式均屬於 VueUse 函式庫，各章節依功能對函式進行分類。
重要事項：每個函式項目皆包含簡短的 Description（說明）與詳細的 Reference（參考文件）。使用任何函式時，請務必查閱 ./references 中對應的文件以取得詳細用法與型別宣告（Type Declarations）。
狀態（State）
| Function | Description | Invocation |
|---|---|---|
createGlobalState |
將狀態保留在全域範疇，使其可在多個 Vue 實例間重複使用 | AUTO |
createInjectionState |
建立可注入至元件內的全域狀態 | AUTO |
createSharedComposable |
使組合式函式可在多個 Vue 實例間共用 | AUTO |
injectLocal |
延伸版 inject，支援呼叫 provideLocal 在同一元件內提供數值 |
AUTO |
provideLocal |
延伸版 provide，支援呼叫 injectLocal 在同一元件內取得數值 |
AUTO |
useAsyncState |
響應式非同步狀態 | AUTO |
useDebouncedRefHistory |
結合防抖（debounced）過濾器之 useRefHistory 簡寫 |
AUTO |
useLastChanged |
記錄最後一次變更的時間戳記 | AUTO |
useLocalStorage |
響應式 LocalStorage | AUTO |
useManualRefHistory |
當呼叫 commit() 時，手動追蹤 ref 的變更歷史 |
AUTO |
useRefHistory |
追蹤 ref 的變更歷史 | AUTO |
useSessionStorage |
響應式 SessionStorage | AUTO |
useStorage |
建立響應式 ref 用於存取與修改 LocalStorage 或 SessionStorage | AUTO |
useStorageAsync |
支援非同步的響應式 Storage | AUTO |
useThrottledRefHistory |
結合節流（throttled）過濾器之 useRefHistory 簡寫 |
AUTO |
元素（Elements）
| Function | Description | Invocation |
|---|---|---|
useActiveElement |
響應式 document.activeElement |
AUTO |
useDocumentVisibility |
響應式追蹤 document.visibilityState |
AUTO |
useDraggable |
使元素可拖曳 | AUTO |
useDropZone |
建立可用於拖放檔案的區域 | AUTO |
useElementBounding |
HTML 元素的響應式邊界框 | AUTO |
useElementSize |
HTML 元素的響應式尺寸 | AUTO |
useElementVisibility |
追蹤元素在視埠（viewport）內的可見狀態 | AUTO |
useIntersectionObserver |
偵測目標元素可見狀態的變更 | AUTO |
useMouseInElement |
相對於元素的響應式滑鼠位置 | AUTO |
useMutationObserver |
監聽 DOM 樹的變更 | AUTO |
useParentElement |
取得指定元素的父元素 | AUTO |
useResizeObserver |
回報元素內容區或邊框盒（border-box）尺寸的變更 | AUTO |
useWindowFocus |
透過 window.onfocus 與 window.onblur 事件響應式追蹤視窗焦點 |
AUTO |
useWindowScroll |
響應式視窗捲動 | AUTO |
useWindowSize |
響應式視窗尺寸 | AUTO |
瀏覽器（Browser）
<!-- truncated for translation batch; full body continues in source -->
