VueUse

外觀

函式 ​

核心
附加元件
排序方式
篩選器

狀態

createGlobalState-將狀態保存在全域範圍內，以便在 Vue 實例之間重複使用
createInjectionState-建立可以注入到元件中的全域狀態
createSharedComposable-使 composable 函式可與多個 Vue 實例一起使用
injectLocal-擴展了 inject，使其能夠呼叫 provideLocal 在同一元件中提供該值
provideLocal-擴展了 provide，使其能夠呼叫 injectLocal 在同一元件中取得該值
useAsyncState-響應式非同步狀態
useDebouncedRefHistory-useRefHistory 的簡寫，帶有防反跳（debounced）過濾器
useLastChanged-記錄最後一次變更的時間戳記
useManualRefHistory-當使用方調用 commit() 時，手動追蹤 ref 的變更歷史
useRefHistory-追蹤 ref 的變更歷史
useStorage-創建一個響應式的 ref，可用於訪問和修改 LocalStorage 或 SessionStorage
useStorageAsync-具有異步支援的響應式 Storage
useThrottledRefHistory-useRefHistory 的簡寫，帶有節流（throttled）過濾器

元素

useActiveElement-響應式的 document.activeElement
useDraggable-使元素可拖曳
useDropZone-創建一個可以拖放檔案的區域
useElementBounding-HTML 元素的響應式 邊界框
useElementSize-HTML 元素的響應式大小
useElementVisibility-追蹤元素在 viewport 中的可見性
useIntersectionObserver-偵測目標元素的可見性
useMouseInElement-相對於元素的響應式滑鼠位置
useMutationObserver-監看 DOM 樹的變更
useParentElement-獲取給定元素的父元素
useResizeObserver-報告元素內容或邊框盒尺寸的變更
useWindowFocus-使用 window.onfocus 和 window.onblur 事件響應式地追蹤視窗焦點
useWindowScroll-響應式視窗滾動
useWindowSize-響應式視窗大小

瀏覽器

useBreakpoints-響應式 viewport 斷點
useBrowserLocation-響應式瀏覽器位置
useColorMode-響應式色彩模式（深色 / 淺色 / 自定義），具有自動資料持久性
useCssVar-操作 CSS 變數
useDark-響應式深色模式，具有自動資料持久性
useEventListener-輕鬆使用 EventListener
useFavicon-響應式網站圖示
useFileDialog-輕鬆打開檔案對話框
useFileSystemAccess-使用 FileSystemAccessAPI 建立、讀取和寫入本地檔案
useGamepad-為 Gamepad API 提供響應式綁定
useImage-在瀏覽器中響應式地載入圖片
useMediaControls-用於 audio 和 video 元素的響應式媒體控制
useMemory-響應式記憶體資訊
useObjectUrl-表示物件的響應式 URL
usePerformanceObserver-觀察效能指標
usePreferredContrast-響應式的 prefers-contrast 媒體查詢
usePreferredDark-響應式深色主題偏好
useScreenSafeArea-響應式的 env(safe-area-inset-*)
useScriptTag-創建一個 script 標籤
useShare-響應式的 Web Share API
useSSRWidth-用於設定全域視窗寬度，在渲染依賴視窗寬度的 SSR 元件時會使用此寬度，例如 useMediaQuery 或 useBreakpoints。
useStyleTag-在 head 中注入響應式的 style 元素。
useTextareaAutosize-根據內容自動更新 textarea 的高度。
useTextDirection-響應式的元素文字的 dir 屬性。
useTitle-響應式的文檔標題。
useVibrate-響應式的 Vibration API。
useWebWorker-簡化的 Web Workers 註冊與溝通。
useWebWorkerFn-運行耗時的函式，而不會阻塞 UI。

感測器

onClickOutside-監聽元素外部的點擊。
onElementRemoval-當元素或包含該元素的任何元素被移除時觸發。
onKeyStroke-監聽鍵盤按鍵。
onLongPress-監聽元素上的長按事件。
onStartTyping-當使用者開始在不可編輯的元素上輸入時觸發。
useDevicesList-響應式的 enumerateDevices，列出可用的輸入/輸出裝置。
useElementByPoint-響應式地取得指定點的元素。
useElementHover-響應式地追蹤元素的 hover 狀態。
useFocus-響應式地追蹤或設定 DOM 元素的焦點狀態。
useFocusWithin-響應式地追蹤元素或其任何子元素是否具有焦點。
useFps-響應式的 FPS（每秒幀數）。
useIdle-追蹤使用者是否處於非活動狀態。
useInfiniteScroll-元素的無限滾動。
useMagicKeys-響應式地追蹤按鍵的按下狀態。
useMouse-響應式地追蹤滑鼠位置。
useMousePressed-響應式地追蹤滑鼠的按下狀態。
useNetwork-響應式的 Network status。
useOnline-響應式的線上狀態。
usePageLeave-響應式地顯示滑鼠是否離開頁面。
useParallax-輕鬆創建視差效果。
usePointer-響應式的 pointer state。
usePointerSwipe-基於 PointerEvents 的響應式滑動檢測。
useScroll-響應式的滾動位置和狀態。
useScrollLock-鎖定元素的滾動。
useSwipe-基於 TouchEvents 的響應式滑動檢測。
useTextSelection-基於 Window.getSelection 響應式地追蹤使用者文字選取。

網路

useEventSource-一個 EventSource 或 Server-Sent-Events 實例會開啟與 HTTP 伺服器的持久連線。
useFetch-響應式的 Fetch API，提供中止請求的功能。
useWebSocket-響應式的 WebSocket 客戶端。

動畫

useInterval-響應式的計數器在每個間隔增加
useIntervalFn-setInterval 的封裝，具有控制功能
useNow-響應式的目前 Date 實例
useRafFn-在每個 requestAnimationFrame 上呼叫函數
useTimeout-在給定時間後更新值，具有控制功能
useTimeoutFn-setTimeout 的封裝，具有控制功能
useTimestamp-響應式的目前時間戳記
useTransition-在值之間轉換

元件

computedInject-組合 computed 和 inject
createReusableTemplate-在元件作用域內定義和重用模板
createTemplatePromise-模板作為 Promise
templateRef-將 ref 綁定到模板元素的簡寫
tryOnBeforeMount-安全的 onBeforeMount
tryOnBeforeUnmount-安全的 onBeforeUnmount
tryOnMounted-安全的 onMounted
tryOnScopeDispose-安全的 onScopeDispose
tryOnUnmounted-安全的 onUnmounted
unrefElement-從 Vue ref 或元件實例檢索底層 DOM 元素
useCurrentElement-將目前元件的 DOM 元素作為 ref 取得
useMounted-ref 中的 mounted 狀態
useTemplateRefsList-將 refs 綁定到 v-for 內部的模板元素和元件的簡寫
useVirtualList-輕鬆建立虛擬列表
useVModel-v-model 綁定的簡寫
useVModels-props v-model 綁定的簡寫

監看

until-承諾式的單次變更監聽
watchArray-監聽帶有新增和移除的陣列
watchAtMost-watch 具有觸發次數
watchDebounced-防抖 watch
watchDeep-使用 {deep: true} 監聽值的簡寫
watchIgnorable-可忽略的 watch
watchImmediate-使用 {immediate: true} 監聽值的簡寫
watchOnce-只觸發一次的 watch
watchPausable-可暫停的 watch
watchThrottled-節流 watch
watchTriggerable-可以手動觸發的 watch
watchWithFilter-具有額外 EventFilter 控制的 watch
whenever-監聽值為真值的簡寫

響應性

computedAsync-用於非同步函數的 computed
computedEager-沒有延遲求值的熱切 computed
computedWithControl-顯式定義 computed 的依賴項
extendRef-向 Ref 添加額外的屬性
reactify-將普通函數轉換為響應式函數
reactifyObject-將 reactify 應用於物件
reactiveComputed-computed 響應式物件
reactiveOmit-從響應式物件中響應式地省略欄位
reactivePick-從響應式物件中響應式地挑選欄位
refAutoReset-一個 ref，會在一段時間後重置為預設值
refDebounced-防抖 ref 值的執行
refDefault-將預設值應用於 ref
refThrottled-節流 ref 值的變更
refWithControl-對 ref 及其響應性的細粒度控制
syncRef-雙向 refs 同步
syncRefs-保持目標 refs 與來源 ref 同步
toReactive-將 ref 轉換為 reactive
toRef-將 value/ref/getter 正規化為 ref 或 computed
toRefs-擴展的 toRefs，也接受物件的 refs
toValue-取得 value/ref/getter 的值

陣列

useArrayDifference-響應式地取得兩個陣列的差異
useArrayEvery-響應式的 Array.every
useArrayFilter-響應式的 Array.filter
useArrayFind-響應式的 Array.find
useArrayFindIndex-響應式的 Array.findIndex
useArrayFindLast-響應式的 Array.findLast
useArrayIncludes-響應式的 Array.includes
useArrayJoin-響應式的 Array.join
useArrayMap-響應式的 Array.map
useArrayReduce-響應式的 Array.reduce
useArraySome-響應式的 Array.some
useArrayUnique-響應式的唯一陣列
useSorted-響應式的排序陣列

時間

useCountdown-useIntervalFn 的封裝，提供倒數計時器
useDateFormat-根據傳入的字符字串取得格式化的日期
useTimeAgo-響應式地顯示多久之前

工具

createEventHook-用於建立事件鉤子的實用工具
createUnrefFn-建立一個接受 ref 和原始值作為參數的普通函數
get-存取 ref.value 的簡寫
isDefined-用於 Ref 的非空檢查類型保護
makeDestructurable-同時為物件和陣列建立同構解構
set-ref.value = x 的簡寫
useAsyncQueue-依序執行每個非同步任務，並將目前任務的結果傳遞給下一個任務
useBase64-響應式的 base64 轉換
useCached-使用自定義比較器快取 ref
useCloned-ref 的響應式複製
useConfirmDialog-建立事件鉤子，以支持模態視窗和確認對話框鏈
useCounter-具有實用函數的基本計數器
useCycleList-在項目列表中循環切換
useDebounceFn-對函數的執行進行防抖 (debounce)
useEventBus-一個基本的事件總線
useMemoize-根據參數快取函數結果，並保持響應式
useOffsetPagination-響應式偏移分頁
usePrevious-保存 ref 的先前值
useStepper-提供用於構建多步驟嚮導介面的輔助函數
useSupported-sSR 兼容性 isSupported
useThrottleFn-對函數的執行進行節流 (throttle)
useTimeoutPoll-使用 timeout 定時輪詢 (poll) 某事物
useToggle-具有實用函數的布林值切換器
useToNumber-響應式地將字串 ref 轉換為數字
useToString-響應式地將 ref 轉換為字串

@Electron

useIpcRenderer-提供 ipcRenderer 及其所有 API
useIpcRendererOn-輕鬆使用 ipcRenderer.on，並在卸載時自動 ipcRenderer.removeListener
useZoomFactor-響應式 WebFrame 縮放比例
useZoomLevel-響應式 WebFrame 縮放級別

@Firebase

useAuth-響應式 Firebase Auth 綁定
useFirestore-響應式 Firestore 綁定

@Head

createHead-建立 head 管理器實例。
useHead-響應式地更新 head meta 標籤。

@Integrations

useAxios-axios 的包裝器
useChangeCase-change-case 的響應式包裝器
useDrauu-drauu 的響應式實例
useFocusTrap-focus-trap 的響應式包裝器
useFuse-使用 composable 和 Fuse.js 輕鬆實現模糊搜尋
useJwt-jwt-decode 的包裝器
useNProgress-nprogress 的響應式包裝器
useQRCode-qrcode 的包裝器
useSortable-sortable 的包裝器

@Math

createGenericProjection-createProjection 的通用版本
createProjection-從一個域到另一個域的響應式數字投影
logicAnd-refs 的 AND 條件
logicNot-ref 的 NOT 條件
logicOr-refs 的 OR 條件
useAbs-響應式 Math.abs
useAverage-響應式地取得陣列的平均值
useCeil-響應式 Math.ceil
useClamp-響應式地將一個值限制在兩個其他值之間
useFloor-響應式 Math.floor
useMath-響應式 Math 方法
useMax-響應式 Math.max
useMin-響應式 Math.min
usePrecision-響應式地設定數字的精度
useProjection-從一個域到另一個域的響應式數字投影
useRound-響應式 Math.round
useSum-響應式地取得陣列的總和
useTrunc-響應式 Math.trunc

@Motion

useElementStyle-將響應式物件同步到目標元素的 CSS 樣式
useElementTransform-將響應式物件同步到目標元素的 CSS 轉換。
useMotion-讓您的元件動起來。
useMotionProperties-存取目標元素的 Motion Properties。
useMotionVariants-處理 Variants 狀態和選擇。
useSpring-Spring 動畫。

@Router

useRouteHash-反應式 route.hash 的簡寫。
useRouteParams-反應式 route.params 的簡寫。
useRouteQuery-反應式 route.query 的簡寫。

@RxJS

from-對 RxJS 的 from() 和 fromEvent() 進行封裝，使其能夠接受 ref。
toObserver-將 ref 轉換為 RxJS Observer 的語法糖函式。
useExtractedObservable-使用從一個或多個 composable 中提取的 RxJS Observable。
useObservable-使用 RxJS Observable。
useSubject-將 RxJS Subject 綁定到 ref，並雙向傳播值更改。
useSubscription-使用 RxJS Subscription，無需擔心取消訂閱或產生記憶體洩漏。
watchExtractedObservable-監看從一個或多個 composable 中提取的 RxJS Observable 的值。

@SchemaOrg

createSchemaOrg-建立 schema.org 管理器實例。
useSchemaOrg-反應式更新 schema.org。

@Sound

useSound-反應式播放音效。

Released under the MIT License.

Copyright © 2020-PRESENT Anthony Fu and VueUse contributors