当前位置：首页 > news >正文

前端小食堂 | Day15 - VueUse 魔法道具库

news 来源：原创 2025/5/25 14:03:47

🧰 今日宝箱：30+ 效率神器一键获取

1. 响应式操控の六脉神剑

// 🎮 鼠标跟踪  
const { x, y } = useMouse()  

// 🌐 网络状态感知  
const { isOnline, offlineAt } = useNetwork()  

// 📱 设备检测  
const { isMobile, isTablet } = useDevice()  

// 📏 元素尺寸监听  
const target = ref(null)  
const { width, height } = useElementSize(target)  

// 🕹️ 键盘事件  
const keyPressed = useKeyPress(['ArrowUp', 'ArrowDown'])  

// ⏱️ 计时器  
const { counter, pause, resume } = useInterval(1000)

2. 状态管理の乾坤袋

// 🌈 本地存储同步  
const state = useStorage('vueuse-demo', { theme: 'light' })  

// 📋 剪贴板操控  
const { copy, copied } = useClipboard()  

// 🧩 状态共享  
const sharedCount = useSharedState('global-counter', 0)  

// 🎚️ 切换器  
const [isDark, toggleDark] = useToggle(false)  

// 🔄 历史记录  
const { undo, redo, history } = useHistory(state)  

// 🔐 加密存储  
const secureData = useEncryptedStorage('secret', 'initialData', 'myPassword')

3. 组件辅助の万花筒

// 🕶️ 组件可见性检测  
const isVisible = useElementVisibility(target)  

// 🎯 点击外部关闭  
const modalRef = ref(null)  
useClickOutside(modalRef, () => closeModal())  

// 📜 滚动控制  
const { y: scrollY } = useWindowScroll()  
useScrollLock(true) // 锁定滚动  

// 🖼️ 图片懒加载  
const imgRef = ref(null)  
useImageLazyLoad(imgRef, { placeholder: '/loading.gif' })  

// 🔍 元素悬停检测  
const isHovered = useElementHover(target)  

// 📌 动态标题  
useTitle('新消息 (3) - VueUse魔法屋')

4. 动画与交互の幻影术

// 🚀 请求加载动画  
const { isLoading, start, stop } = useLoadingBar()  

// 🎞️ 过渡动画  
const currentValue = useTransition(0, { duration: 1000 })  

// 🎮 游戏手柄支持  
const { isConnected, buttonState } = useGamepad()  

// 🎧 音频控制  
const { play, pause } = useAudio('/notification.mp3')  

// ⌨️ 输入防抖  
const debouncedSearch = useDebounce(searchText, 500)  

// 🧪 Web Worker 集成  
const { data, run } = useWebWorker('/heavy-task.js')

❄️ 冷知识：魔法道具组合技

// 🌟 智能搜索组件  
const search = ref('')  
const results = ref([])  

// 组合：防抖 + 网络请求 + 加载状态  
const { debounced: debouncedSearch } = useDebounce(search, 300)  
const { data, isFetching } = useFetch(  
  () => `/api/search?q=${debouncedSearch.value}`,  
  { immediate: false }  
)  

watch(debouncedSearch, val => {  
  if (val) execute()  
})  

// 自动同步结果  
watchEffect(() => results.value = data.value?.items || [])

🌟 实验室魔法工坊

实现拖拽排序功能

<template>  
  <div  
    v-for="item in list"  
    :key="item.id"  
    ref="items"  
    class="draggable-item"  
  >  
    {{ item.text }}  
  </div>  
</template>  

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

const items = ref([])  
const list = ref([...]) // 初始列表  

useDraggable(items, {  
  onMove({ target, newIndex }) {  
    // 交换数组元素  
    const oldIndex = list.value.findIndex(i => i.id === target.dataset.id)  
    const newList = [...list.value]  
    newList.splice(newIndex, 0, newList.splice(oldIndex, 1)[0])  
    list.value = newList  
  },  
  animation: 200  
})  
</script>

明日秘境：《前端监控の天眼通——错误追踪与性能分析》 👁️
（留言告诉我你最想实现的炫酷功能，本魔法工匠为你打造专属代码！⚡）

🛎️ 本日避坑指南：

按需引入减少体积

// ❌ 错误引入方式  
import { useMouse } from '@vueuse/core'  

// ✅ 正确姿势（自动Tree Shaking）  
import { useMouse } from '@vueuse/core'  
// 或使用独立包  
import { useMouse } from '@vueuse/core/useMouse'

SSR兼容性问题

// 服务端渲染时需条件引入  
if (process.client) {  
  const { x, y } = useMouse()  
}

内存泄漏预防

// 自动清理的智能事件  
const cleanup = useEventListener('resize', callback)  
onUnmounted(() => cleanup())

TypeScript支持

// 自定义类型推断  
interface User { name: string }  
const user = useStorage<User>('user', { name: '小明' })

🔮 30+ 神器速查表

分类	神器列表（精选30）
响应式	`useMouse` `useStorage` `useDebounce` `useThrottle` `useInterval`
DOM	`useElementSize` `useClickOutside` `useScroll` `useDraggable` `useResizeObserver`
设备	`useDevice` `useNetwork` `useGeolocation` `useBattery` `useWakeLock`
状态	`useToggle` `useLocalStorage` `useSharedState` `useHistory` `useCounter`
动画	`useTransition` `useRafFn` `useInterval` `useTimeout` `useTimestamp`
高级	`useWebWorker` `useFetch` `useImage` `useWebSocket` `useEventSource`