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

今日宝箱：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 =