vueUse/core 基础与高阶应用指南

原创于 2025-12-15 10:48:17 发布 · 354 阅读

6 ·

CC 4.0 BY-SA版权

文章标签：

#vue.js #前端 #javascript

vue 专栏收录该内容

9 篇文章

订阅专栏

vueUse/core 基础与高阶应用指南

解锁 Vue 3 组合式 API 的超级能力 ✨

引言

在 Vue 3 组合式 API 生态中，vueUse/core 无疑是一颗璀璨的明星。它提供了上百个精心设计的组合式函数，覆盖了从 DOM 操作到状态管理、从网络请求到浏览器 API 等几乎所有前端开发场景。本文将带你从基础到高阶，全面掌握 vueUse/core 的使用技巧，让你的 Vue 开发效率提升到新高度！

一、快速上手

安装

# npm
npm install @vueuse/core

# yarn
yarn add @vueuse/core

# pnpm
pnpm add @vueuse/core

基础使用

<template>
  <div>
    <h1>vueUse 示例</h1>
    <p>当前时间: {{ time }}</p>
    <button @click="toggle">开关: {{ enabled }}</button>
  </div>
</template>

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

// 获取当前时间（自动更新）
const time = useNow()

// 创建一个开关状态
const [enabled, toggle] = useToggle(false)
</script>

二、核心功能分类

1. 状态管理

useLocalStorage - 本地存储状态

<template>
  <div>
    <input v-model="name" placeholder="请输入姓名">
    <p>你好，{{ name }}！</p>
  </div>
</template>

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

// 状态自动持久化到 localStorage
const name = useLocalStorage('user-name', 'Vue 开发者')
</script>

useSessionStorage - 会话存储状态

import { useSessionStorage } from '@vueuse/core'

// 仅在会话期间保持的状态
const token = useSessionStorage('auth-token', '')

2. 生命周期

useMounted & useUnmounted

import { useMounted, useUnmounted } from '@vueuse/core'

useMounted(() => {
  console.log('组件已挂载')
})

useUnmounted(() => {
  console.log('组件已卸载')
})

useDebounceEffect - 防抖副作用

<template>
  <input v-model="searchQuery" placeholder="搜索...">
</template>

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

const searchQuery = ref('')

// 300ms 防抖的搜索效果
useDebounceEffect(
  () => {
    console.log('搜索:', searchQuery.value)
    // 执行搜索请求
  },
  [searchQuery],
  { delay: 300 }
)
</script>

3. DOM 操作

useElementSize - 元素尺寸监听

<template>
  <div ref="el" class="resizable">
    <p>宽度: {{ width }}px</p>
    <p>高度: {{ height }}px</p>
  </div>
</template>

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

const el = ref(null)
const { width, height } = useElementSize(el)
</script>

<style scoped>
.resizable {
  resize: both;
  overflow: auto;
  border: 2px solid #ccc;
  padding: 20px;
  min-width: 200px;
  min-height: 200px;
}
</style>

useClipboard - 剪贴板操作

<template>
  <div>
    <input v-model="text" placeholder="输入要复制的内容">
    <button @click="copy">复制</button>
    <p>{{ copied ? '已复制！' : '' }}</p>
  </div>
</template>

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

const text = ref('Hello, vueUse!')
const { copy, copied } = useClipboard()
</script>

4. 网络请求

useFetch - 现代化的数据获取

<template>
  <div>
    <button @click="refetch">刷新数据</button>
    <div v-if="pending">加载中...</div>
    <div v-else-if="error">错误: {{ error.message }}</div>
    <div v-else>
      <h2>{{ data?.title }}</h2>
      <p>{{ data?.body }}</p>
    </div>
  </div>
</template>

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

const { data, pending, error, refetch } = useFetch(
  'https://jsonplaceholder.typicode.com/posts/1'
)
</script>

5. 时间相关

useCountdown - 倒计时器

<template>
  <div>
    <h2>倒计时: {{ formattedTime }}</h2>
    <button @click="start">开始</button>
    <button @click="pause">暂停</button>
    <button @click="reset">重置</button>
  </div>
</template>

<script setup>
import { computed } from 'vue'
import { useCountdown } from '@vueuse/core'

// 设置倒计时30秒
const targetDate = new Date(Date.now() + 30000)
const { days, hours, minutes, seconds, isActive, start, pause, reset } = useCountdown(
  targetDate,
  { interval: 1000 }
)

// 格式化显示
const formattedTime = computed(() => 
  `${minutes.value.toString().padStart(2, '0')}:${seconds.value.toString().padStart(2, '0')}`
)
</script>

三、高级应用技巧

1. 自定义组合式函数

基于 vueUse 的工具函数，我们可以构建自己的组合式函数：

import { useLocalStorage, useDebounce, useEventListener } from '@vueuse/core'
import { ref, computed } from 'vue'

/**
 * 带防抖的本地存储搜索状态
 */
export function useDebouncedSearch(initialValue = '', delay = 300) {
  // 本地存储的搜索词
  const rawSearch = useLocalStorage('search-query', initialValue)
  
  // 防抖处理后的搜索词
  const search = useDebounce(rawSearch, delay)
  
  // 清空搜索
  const clear = () => {
    rawSearch.value = ''
  }
  
  // 搜索是否为空
  const isEmpty = computed(() => !search.value)
  
  // 监听 Enter 键搜索
  useEventListener(document, 'keydown', (e) => {
    if (e.key === 'Enter') {
      // 触发搜索事件
      window.dispatchEvent(new CustomEvent('search', { detail: search.value }))
    }
  })
  
  return {
    search,
    rawSearch,
    clear,
    isEmpty
  }
}

使用自定义的组合式函数：

<template>
  <input v-model="rawSearch" placeholder="搜索...">
  <button @click="clear">清空</button>
  <div v-if="!isEmpty">搜索结果: {{ search }}</div>
</template>

<script setup>
import { useDebouncedSearch } from './composables/useDebouncedSearch'

const { search, rawSearch, clear, isEmpty } = useDebouncedSearch()
</script>

2. 插件扩展

vueUse 支持通过插件系统进行扩展：

// main.js
import { createApp } from 'vue'
import { createVueUse } from '@vueuse/core'
import App from './App.vue'

const app = createApp(App)

// 创建 vueUse 实例
const vueUse = createVueUse()

// 注册全局插件
app.use(vueUse)

app.mount('#app')

3. 性能优化

useMemoize - 函数结果缓存

import { useMemoize } from '@vueuse/core'

// 计算密集型函数
const expensiveCalculation = (a, b) => {
  console.log('执行计算...')
  return a + b
}

// 缓存计算结果
const memoizedCalculate = useMemoize(expensiveCalculation)

// 第一次执行：输出 "执行计算..." 并返回结果
console.log(memoizedCalculate(1, 2)) // 3

// 第二次执行：直接返回缓存结果，不输出日志
console.log(memoizedCalculate(1, 2)) // 3

useThrottleFn - 函数节流

import { useThrottleFn } from '@vueuse/core'

// 节流处理的函数（1秒内最多执行一次）
const throttledFn = useThrottleFn(() => {
  console.log('执行了节流函数')
  // 执行一些高频操作
}, 1000)

// 连续调用只会每隔1秒执行一次
throttledFn()
throttledFn()
throttledFn()

四、最佳实践与注意事项

1. 按需导入

vueUse 支持 tree-shaking，建议按需导入以减小打包体积：

// 推荐：按需导入
import { useNow, useToggle } from '@vueuse/core'

// 不推荐：导入整个库
import * as VueUse from '@vueuse/core'
const { useNow } = VueUse

2. 合理使用缓存

对于网络请求和计算密集型操作，使用 useFetch 的缓存功能或 useMemoize 可以显著提升性能：

const { data, refetch } = useFetch(
  'https://api.example.com/data',
  {
    cache: true, // 启用缓存
    cacheTTL: 60000 // 缓存有效期1分钟
  }
)

3. 注意生命周期管理

使用 DOM 相关的组合式函数时，确保在组件挂载后使用：

// 推荐：在组件挂载后使用 DOM 相关函数
useMounted(() => {
  const { width, height } = useElementSize(el)
  // ...
})

// 或者：使用条件判断
if (el.value) {
  const { width, height } = useElementSize(el)
  // ...
}