vueUse/core 基础与高阶应用指南-开发者社区

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

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

引言

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

一、快速上手

安装

# npmnpminstall@vueuse/core# yarnyarnadd@vueuse/core# pnpmpnpmadd@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'// 仅在会话期间保持的状态consttoken=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'/** * 带防抖的本地存储搜索状态 */exportfunctionuseDebouncedSearch(initialValue='',delay=300){// 本地存储的搜索词constrawSearch=useLocalStorage('search-query',initialValue)// 防抖处理后的搜索词constsearch=useDebounce(rawSearch,delay)// 清空搜索constclear=()=>{rawSearch.value=''}// 搜索是否为空constisEmpty=computed(()=>!search.value)// 监听 Enter 键搜索useEventListener(document,'keydown',(e)=>{if(e.key==='Enter'){// 触发搜索事件window.dispatchEvent(newCustomEvent('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.jsimport{createApp}from'vue'import{createVueUse}from'@vueuse/core'importAppfrom'./App.vue'constapp=createApp(App)// 创建 vueUse 实例constvueUse=createVueUse()// 注册全局插件app.use(vueUse)app.mount('#app')

3. 性能优化

useMemoize - 函数结果缓存

import{useMemoize}from'@vueuse/core'// 计算密集型函数constexpensiveCalculation=(a,b)=>{console.log('执行计算...')returna+b}// 缓存计算结果constmemoizedCalculate=useMemoize(expensiveCalculation)// 第一次执行：输出 "执行计算..." 并返回结果console.log(memoizedCalculate(1,2))// 3// 第二次执行：直接返回缓存结果，不输出日志console.log(memoizedCalculate(1,2))// 3

useThrottleFn - 函数节流

import{useThrottleFn}from'@vueuse/core'// 节流处理的函数（1秒内最多执行一次）constthrottledFn=useThrottleFn(()=>{console.log('执行了节流函数')// 执行一些高频操作},1000)// 连续调用只会每隔1秒执行一次throttledFn()throttledFn()throttledFn()

四、最佳实践与注意事项

1. 按需导入

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

// 推荐：按需导入import{useNow,useToggle}from'@vueuse/core'// 不推荐：导入整个库import*asVueUsefrom'@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)// ...}

五、总结

vueUse/core为 Vue 3 开发者提供了一个强大而丰富的组合式函数库，它不仅能够极大地提升开发效率，还能帮助我们编写更加优雅、可维护的代码。从基础的 DOM 操作到复杂的状态管理，从简单的时间处理到高级的性能优化，vueUse几乎覆盖了前端开发的方方面面。

通过本文的学习，相信你已经对vueUse/core有了全面的了解。在实际项目中，建议你根据需求选择合适的组合式函数，并结合本文介绍的高级技巧，充分发挥vueUse的威力！

✨最后，别忘了持续关注vueUse的官方更新，它的生态系统还在不断壮大！

参考资料

vueUse 官方文档
Vue 3 组合式 API 文档
MDN Web API 参考

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