VueUse 是一个针对 Vue 开发者的实用函数集合，它提供了组合式 API 的实用功能。以下是一些 VueUse 中常用方法的简单示例：
useRefs- 跟踪响应式引用（类似于ref但可以直接展开）
import { useRefs } from '@vueuse/core'
export default {
setup() {
const { count } = useRefs({ count: 0 })
return { count }
}
}useCounter- 增加和减少一个响应式计数器
import { useCounter } from '@vueuse/core'
export default {
setup() {
const { count, increment, decrement } = useCounter()
return { count, increment, decrement }
}
}useMouse- 追踪鼠标位置
import { useMouse } from '@vueuse/core'
export default {
setup() {
const { x, y } = useMouse()
return { x, y }
}
}useFetch- 执行 HTTP 请求并响应数据
import { useFetch } from '@vueuse/core'
export default {
setup() {
const { data, isFetching } = useFetch('https://api.example.com/data')
return { data, isFetching }
}
}useStorage- 管理 local/session 存储
import { useStorage } from '@vueuse/core'
export default {
setup() {
const { storage, removeStorage } = useStorage('my-key', localStorage)
return { storage, removeStorage }
}
}这些例子展示了如何在 Vue 应用中导入和使用 VueUse 提供的函数。每个函数都有其特定的用途，并且可以直接在 Vue 组件中使用。