VueUse核心函数全解析 – Vue3开发者必备实用指南

介绍

@vueuse/core 是一个基于Vue的组合式API的实用函数集合，提供了大量开箱即用的功能。本文档将介绍最常用的函数及其在Vue3中的实践用法。

核心函数

状态管理

useLocalStorage

<script setup>
import { useLocalStorage } from '@vueuse/core'

const count = useLocalStorage('my-count', 0)
</script>
<template>
  <button @click="count++">Count is: {{ count }}</button>
</template>

useSessionStorage

<script setup>
import { useSessionStorage } from '@vueuse/core'

const user = useSessionStorage('user', {
  name: 'John',
  age: 30
})
</script>

元素操作

useMouse

<script setup>
import { useMouse } from '@vueuse/core'

const { x, y } = useMouse()
</script>
<template>
  <div>Mouse position: {{ x }}, {{ y }}</div>
</template>

useElementSize

<script setup>
import { ref } from 'vue'
import { useElementSize } from '@vueuse/core'

const el = ref(null)
const { width, height } = useElementSize(el)
</script>
<template>
  <div ref="el">Element size: {{ width }} x {{ height }}</div>
</template>

网络请求

useFetch

<script setup>
import { useFetch } from '@vueuse/core'

const { data, error } = useFetch('https://api.example.com/data')
</script>

实用工具

useDebounceFn

<script setup>
import { useDebounceFn } from '@vueuse/core'

const log = useDebounceFn((msg) => {
  console.log(msg)
}, 1000)

function handleInput() {
  log('Input changed!')
}
</script>

浏览器API

useClipboard

<script setup>
import { useClipboard } from '@vueuse/core'

const { copy, copied } = useClipboard()

function copyText() {
  copy('Hello!')
}
</script>
<template>
  <button @click="copyText">
    {{ copied ? 'Copied!' : 'Copy' }}
  </button>
</template>

设备特性

usePreferredDark

<script setup>
import { usePreferredDark } from '@vueuse/core'

const isDark = usePreferredDark()
</script>

动画效果

useTransition

<script setup>
import { ref } from 'vue'
import { useTransition } from '@vueuse/core'

const source = ref(0)
const output = useTransition(source, {
  duration: 1000,
  transition: [0.75, 0, 0.25, 1]
})

setInterval(() => {
  source.value = Math.random() * 100
}, 2000)
</script>
<template>
  <div>{{ output.toFixed(2) }}</div>
</template>

实用工具扩展

useStorage (通用存储)

<script setup>
import { useStorage } from '@vueuse/core'

// 自动同步到localStorage
const state = useStorage('store', {
  name: 'VueUse',
  version: 'latest'
})
</script>

useTitle (动态标题)

<script setup>
import { useTitle } from '@vueuse/core'

const title = useTitle('初始标题')
setTimeout(() => {
  title.value = '新标题'
}, 2000)
</script>

useDark (暗黑模式)

<script setup>
import { useDark, useToggle } from '@vueuse/core'

const isDark = useDark()
const toggleDark = useToggle(isDark)
</script>
<template>
  <button @click="toggleDark()">
    {{ isDark ? '浅色模式' : '深色模式' }}
  </button>
</template>

高级用法

组合函数

<script setup>
import { useMouse, useDebounceFn } from '@vueuse/core'

const { x, y } = useMouse()
const logPosition = useDebounceFn((pos) => {
  console.log('Position:', pos)
}, 500)

watch([x, y], ([newX, newY]) => {
  logPosition({ x: newX, y: newY })
})
</script>
### 时间相关

#### useInterval
```vue
<script setup>
import { useInterval } from '@vueuse/core'

const counter = ref(0)
useInterval(() => counter.value++, 1000)
</script>
<template>
  <div>Counter: {{ counter }}</div>
</template>

useTimestamp

<script setup>
import { useTimestamp } from '@vueuse/core'

const timestamp = useTimestamp()
</script>
<template>
  <div>Current timestamp: {{ timestamp }}</div>
</template>

地理位置

useGeolocation

<script setup>
import { useGeolocation } from '@vueuse/core'

const { coords, locatedAt, error } = useGeolocation()
</script>
<template>
  <div v-if="coords">
    Latitude: {{ coords.latitude }}<br>
    Longitude: {{ coords.longitude }}
  </div>
</template>

性能优化

useThrottleFn

<script setup>
import { useThrottleFn } from '@vueuse/core'

const log = useThrottleFn((msg) => {
  console.log(msg)
}, 1000)

function handleScroll() {
  log('Scroll event')
}
</script>

useDebouncedRef

<script setup>
import { useDebouncedRef } from '@vueuse/core'

const text = useDebouncedRef('', 500)
</script>
<template>
  <input v-model="text" />
</template>

最佳实践

按需导入：只导入需要的函数，避免不必要的包体积增加

import { useLocalStorage } from '@vueuse/core'

组合复用：将多个use函数组合成自定义hook

export function useUserSettings() {
  const settings = useLocalStorage('user-settings', { theme: 'light' })
  const isDark = useDark()
  
  return { settings, isDark }
}

错误处理：对可能失败的操作添加错误处理

const { data, error } = useFetch('/api/data')
watch(error, (err) => {
  if (err) showToast('请求失败')
})

性能考虑：对于高频事件使用防抖/节流

const handleResize = useThrottleFn(() => {
  // 处理resize逻辑
}, 200)

总结

@vueuse/core 提供了大量实用的组合式函数，可以显著提高开发效率。本文档涵盖了最常用的函数，更多功能请参考官方文档。