---

引言

在現代前端開發中，Vue.js 因其簡潔的API和響應式系統而廣受歡迎。然而，在日常開發中，我們經常會遇到一些重復性的需求，如表單處理、事件監聽、狀態管理等。這時候，一個高質量的實用工具庫可以顯著提升我們的開發效率。VueUse/Core 正是這樣一個為 Vue 開發者量身定制的工具集合。

什么是VueUse/Core？

VueUse/Core 是一個基于 Composition API 的Vue實用函數集合，它提供了一系列可復用的組合式函數，涵蓋了常見的開發需求。這個庫由 Anthony Fu 創建并維護，已經成為 Vue生態 中最受歡迎的工具庫之一。

官方地址：https://vueuse.nodejs.cn/

為什么選擇VueUse/Core？

• 開箱即用的實用功能：無需重復造輪子，直接使用經過社區驗證的解決方案
• 完美的Composition API集成：專為Vue 3設計，同時也支持Vue 2.7+
• 極小的體積：Tree-shakable 設計，只打包你使用的函數
• 優秀的TypeScript支持：完整的類型定義，提升開發體驗
• 活躍的社區：持續更新，不斷添加新功能

核心功能詳解

1. 狀態管理

VueUse 提供了多種狀態管理方案，比 Vuex 或 Pinia 更輕量，適合簡單場景。

import { useStorage } from '@vueuse/core'// 自動持久化到localStorage
const count = useStorage('my-count', 0)

useStorage 會自動將狀態同步到 localStorage 或 sessionStorage ，實現持久化狀態。

2. 元素操作

import { useMouse, useElementVisibility } from '@vueuse/core'const { x, y } = useMouse() // 跟蹤鼠標位置const isVisible = useElementVisibility(refElement) // 元素是否可見

3. 實用工具函數

import { useDebounceFn, useThrottleFn } from '@vueuse/core'const debouncedFn = useDebounceFn(() => {// 防抖邏輯
}, 500)const throttledFn = useThrottleFn(() => {// 節流邏輯
}, 500)

4. 瀏覽器API封裝

import { useClipboard, usePreferredDark } from '@vueuse/core'const { copy, isSupported } = useClipboard()const isDark = usePreferredDark() // 檢測用戶是否偏好暗色主題

5. 傳感器相關

import { useDeviceMotion, useBattery } from '@vueuse/core'const motion = useDeviceMotion() // 設備運動傳感器
const battery = useBattery() // 電池狀態

實戰示例：構建一個拖拽上傳組件

讓我們通過一個實際例子來展示 VueUse 的強大功能。

<template><div ref="dropZoneRef":class="{ 'active': isOverDropZone }"@click="openFileDialog"><input type="file" ref="inputRef"style="display: none" @change="handleFileChange"/><p>拖拽文件到這里或點擊上傳</p><div v-if="files.length"><div v-for="file in files" :key="file.name">{{ file.name }} ({{ formatFileSize(file.size) }})</div></div></div>
</template><script setup>
import { ref } from 'vue'
import { useDropZone,useFileDialog,useFileSystemAccess,useObjectUrl
} from '@vueuse/core'const dropZoneRef = ref(null)
const inputRef = ref(null)
const files = ref([])const { isOverDropZone } = useDropZone(dropZoneRef, (files) => {handleFiles(files)
})const { open, onChange } = useFileDialog({accept: 'image/*',multiple: true
})onChange((files) => {handleFiles(files)
})function handleFiles(newFiles) {files.value = [...files.value, ...newFiles]
}function formatFileSize(bytes) {if (bytes === 0) return '0 Bytes'const k = 1024const sizes = ['Bytes', 'KB', 'MB', 'GB']const i = Math.floor(Math.log(bytes) / Math.log(k))return parseFloat((bytes / Math.pow(k, i)).toFixed(2)) + ' ' + sizes[i]
}function openFileDialog() {open()
}
</script><style scoped>
.active {border: 2px dashed #42b983;background-color: rgba(66, 185, 131, 0.1);
}
</style>

這個示例展示了如何使用多個 VueUse 函數快速構建一個功能豐富的拖拽上傳組件。

性能優化技巧

1. 按需導入：VueUse支持 Tree-shaking ，只導入你需要的函數

import { useDebounceFn } from '@vueuse/core' // 正確
import VueUse from '@vueuse/core' // 避免這樣導入

2. 合理使用防抖和節流：對于頻繁觸發的事件，使用 useDebounceFn 或useThrottleFn

3. 及時清理副作用：VueUse 會自動清理大部分副作用，但對于自定義監聽器，記得在 onUnmounted 中清理

4. 利用共享狀態：對于全局狀態，考慮使用 createSharedComposable 創建共享實例

與原生實現對比

讓我們比較一下原生實現和使用 VueUse 的實現差異：

原生實現鼠標跟蹤：

import { ref, onMounted, onUnmounted } from 'vue'const x = ref(0)
const y = ref(0)function update(e) {x.value = e.pageXy.value = e.pageY
}onMounted(() => {window.addEventListener('mousemove', update)
})onUnmounted(() => {window.removeEventListener('mousemove', update)
})

使用 VueUse：

import { useMouse } from '@vueuse/core'const { x, y } = useMouse()

顯然，VueUse 版本更簡潔，且不需要手動管理事件監聽器的生命周期。

常見問題解答

Q: VueUse適合生產環境嗎？
A: 是的，VueUse 已經在許多生產環境中使用，并且有良好的測試覆蓋率。

Q: VueUse會增加多少打包體積？
A: 由于 Tree-shaking 支持，你只打包你使用的函數。單個函數通常只有幾KB。

Q: 如何貢獻自己的函數？
A: VueUse是開源項目，歡迎通過 GitHub 提交PR。確保你的函數有良好的TypeScript支持和測試用例。

總結

VueUse/Core 是一個強大而靈活的 Vue 工具庫，它通過提供一系列精心設計的組合式函數，極大地提升了 Vue 開發的效率和體驗。無論你是需要處理常見的UI交互，還是需要訪問瀏覽器API，VueUse 都能提供簡潔優雅的解決方案。

通過本文的介紹，你應該已經了解了 VueUse 的核心功能和優勢。建議從官方文檔開始，逐步嘗試將 VueUse 集成到你的項目中，體驗它帶來的開發效率提升。

---

希望這篇文章能幫助你更好地理解和使用 VueUse/Core 。如果你有任何問題或建議，歡迎在評論區留言討論！