详细讲一下VueUse(11-20)中我认为好用且常用的方法

asecretman!

已于 2025-01-01 16:13:56 修改

阅读量746

点赞数 15

分类专栏： VueUse 文章标签： javascript 前端 vue.js

于 2025-01-01 12:39:42 首次发布

本文链接：https://blog.youkuaiyun.com/m0_73574455/article/details/144865781

版权

VueUse 专栏收录该内容

2 篇文章

订阅专栏

继续上一个专栏的内容，这次是11-20我认为较好用的方法，希望能帮助到大家

11.useEventListener - 更安全的事件监听器

import { useEventListener } from '@vueuse/core'

// 自动在组件卸载时移除事件监听
useEventListener(window, 'keydown', (e) => {
    if (e.key === 'Escape') {
        closeModal()
    }
})

// 监听 DOM 元素
const element = ref(null)
useEventListener(element, 'click', (e) => {
    console.log('元素被点击', e)
})

// 支持多个事件
useEventListener(element, ['mousedown', 'mouseup'], (e) => {
    console.log('鼠标事件触发', e.type)
})

12.useTimeoutFn - 更好的 setTimeout 管理

import { useTimeoutFn } from '@vueuse/core'

const {
    isPending, // 是否正在计时
    start,     // 开始计时
    stop       // 停止计时
} = useTimeoutFn(() => {
    console.log('3秒后执行')
}, 3000)

// 手动控制
const handleClick = () => {
    if (isPending.value) {
        stop()
    } else {
        start()
    }
}

// 组件卸载时自动清理
onUnmounted(() => stop())

13.useDebounce - 响应式防抖

import { useDebounce } from '@vueuse/core'

const input = ref('')
// 延迟 500ms 后更新
const debouncedInput = useDebounce(input, 500)

// 用于搜索场景
watch(debouncedInput, (value) => {
    // 只有用户停止输入 500ms 后才会触发搜索
    searchAPI(value)
})

14.useDark - 深色模式管理

import { useDark, useToggle } from '@vueuse/core'

// 自动同步系统主题
const isDark = useDark({
    selector: 'body',          // 应用主题的元素
    attribute: 'class',        // 主题切换的属性
    valueDark: 'dark',         // 深色主题值
    valueLight: 'light',       // 浅色主题值
    storageKey: 'theme-mode'   // localStorage 存储键名
})

// 切换主题
const toggleDark = useToggle(isDark)

// 在模板中使用
const theme = computed(() => isDark.value ? '深色' : '浅色')

15.usePreferredLanguages - 获取用户首选语言

import { usePreferredLanguages } from '@vueuse/core'

const languages = usePreferredLanguages()

// 监听语言变化
watch(languages, (newLangs) => {
    console.log('用户语言偏好:', newLangs)
    // ['zh-CN', 'zh', 'en-US', 'en']
})

// 设置应用语言
const appLocale = computed(() => {
    // 找到第一个支持的语言
    return languages.value.find(lang => 
        ['zh-CN', 'en-US'].includes(lang)
    ) || 'en-US'
})

16.useNetwork - 网络状态监测

import { useNetwork } from '@vueuse/core'

const {
    isOnline,    // 是否在线
    offlineAt,   // 离线时间
    onlineAt,    // 上线时间
    downlink,    // 下行速度
    effectiveType, // 网络类型 (4g/3g/2g)
    saveData     // 是否启用省流量模式
} = useNetwork()

// 网络状态变化提示
watch(isOnline, (online) => {
    if (online) {
        showToast('网络已恢复')
    } else {
        showToast('网络已断开')
    }
})

// 根据网络状态加载不同质量的资源
const imageUrl = computed(() => {
    if (downlink.value > 2 && !saveData.value) {
        return 'high-quality.jpg'
    }
    return 'low-quality.jpg'
})

17.usePermission - Web API 权限管理

import { usePermission } from '@vueuse/core'

// 检查摄像头权限
const cameraPermission = usePermission('camera')

// 检查地理位置权限
const locationPermission = usePermission('geolocation')

// 根据权限状态显示不同内容
const permissionStatus = computed(() => {
    switch (cameraPermission.value) {
        case 'granted':
            return '已授权'
        case 'denied':
            return '已拒绝'
        case 'prompt':
            return '需要授权'
        default:
            return '未知状态'
    }
})

18.useClipboard - 增强的剪贴板操作

import { useClipboard } from '@vueuse/core'

const { 
    text,       // 剪贴板内容
    copied,     // 是否已复制
    copy,       // 复制方法
    isSupported // 是否支持剪贴板API
} = useClipboard({ copiedDuring: 1500 }) // 复制成功提示持续1.5秒

// 复制文本
const copyText = async (content) => {
    await copy(content)
    if (copied.value) {
        showToast('复制成功')
    }
}

// 监听剪贴板变化
watch(text, (newText) => {
    console.log('剪贴板内容:', newText)
})

19.useInfiniteScroll - 无限滚动

import { useInfiniteScroll } from '@vueuse/core'

const el = ref(null)
const data = ref([])
const loading = ref(false)

useInfiniteScroll(
    el,
    async () => {
        if (loading.value) return
        
        loading.value = true
        try {
            const newItems = await loadMoreData()
            data.value.push(...newItems)
        } finally {
            loading.value = false
        }
    },
    {
        distance: 10,    // 触发加载的距离
        throttle: 500    // 节流时间
    }
)

20. useStorage - 响应式的存储系统

import { useStorage } from '@vueuse/core'

// localStorage
const state = useStorage(
    'app-state',    // 键名
    {               // 默认值
        theme: 'light',
        fontSize: 16,
        settings: {}
    },
    localStorage,   // 存储方式
    {
        mergeDefaults: true,  // 合并默认值
        serializer: {         // 自定义序列化
            read: (v) => JSON.parse(v),
            write: (v) => JSON.stringify(v)
        }
    }
)

// 自动同步到存储
state.value.theme = 'dark'    // 自动保存
state.value.fontSize = 18     // 自动保存

// 监听变化
watch(state, (newState) => {
    console.log('状态已更新并保存:', newState)
}, { deep: true })

这些方法都非常实用，能大大提高开发效率：