1.什么是@vueuse/core

是一個基于 ?Vue Composition API? 開發的實用工具庫，旨在通過封裝高頻功能為可復用的組合式函數（Composables），簡化 Vue 應用的開發流程。

• 提供 ?200+ 開箱即用的函數?，覆蓋狀態管理、瀏覽器交互、傳感器、網絡請求等場景，例如useStorage（狀態持久化）?1、useMouse（鼠標追蹤）?1；
• 支持 ?Vue 2 和 Vue 3?，并通過 @vueuse/components 擴展組件化能力?2；
• 以類似 ?Vue 生態的 lodash? 為定位，強調代碼復用和開發效率?2。

2.安裝

npm安裝

npm install @vueuse/core

使用yarn安裝

yarn add @vueuse/core

3.功能模塊分類

• useState：創建和管理局部狀態。
• useStorage：在 localStorage 或 sessionStorage
  中存儲和同步狀態。
• useMouse：獲取鼠標位置。
• useWindowSize：獲取窗口尺寸。
• useGeolocation：獲取地理位置信息。
• useTitle：動態設置文檔標題。
• useFavicon：動態設置網頁的favicon。
• useFetch：進行 HTTP 請求。
• useWebSocket：使用 WebSocket 進行實時通信。
• useInterval：定時器。
• useTimeout：延時器。
• useTransition：處理過渡效果。
• useSpring：實現彈簧動畫。
• useForm：處理表單狀態和驗證。
• useDebounce：防抖函數。
• useThrottle：節流函數。

4.使用實例

<script lang="ts" setup>
//導入工具庫
import { useWindowSize, useMouse, useTitle, useStorage } from '@vueuse/core'// 獲取窗口尺寸
const { width, height } = useWindowSize()// 獲取鼠標位置
const { x, y } = useMouse()// 動態設置頁面標題
const title = ref('VueUse Example')
useTitle(title)// 使用 localStorage 存儲數據,使用 useStorage 將輸入框的值存儲到 localStorage 中，并在頁面刷新時保持數據。
const storedValue = useStorage('my-storage-key', '')</script >