我要投稿

Vue3组合式API实战：5个高效自定义Hook开发技巧 | Vue3开发指南

文章小助手 vue3

2025-07-16 0 853

Vue3组合式API实战：5个高效自定义Hook开发技巧

核心价值： Vue3的组合式API让逻辑复用变得前所未有的简单。本文将展示如何通过自定义Hook封装复杂业务逻辑，实现”一次编写，处处使用”。

1. 基础Hook：鼠标位置跟踪

封装鼠标位置跟踪逻辑：

// useMousePosition.js
import { ref, onMounted, onUnmounted } from 'vue'

export function useMousePosition() {
    const x = ref(0)
    const y = ref(0)
    
    const updatePosition = (e) => {
        x.value = e.pageX
        y.value = e.pageY
    }
    
    onMounted(() => window.addEventListener('mousemove', updatePosition))
    onUnmounted(() => window.removeEventListener('mousemove', updatePosition))
    
    return { x, y }
}

// 组件中使用
const { x, y } = useMousePosition()

2. 数据获取Hook

封装通用的数据获取逻辑：

// useFetch.js
import { ref } from 'vue'

export function useFetch(url) {
    const data = ref(null)
    const error = ref(null)
    const loading = ref(false)
    
    const fetchData = async () => {
        loading.value = true
        try {
            const response = await fetch(url)
            data.value = await response.json()
        } catch (err) {
            error.value = err
        } finally {
            loading.value = false
        }
    }
    
    fetchData()
    
    return { data, error, loading, retry: fetchData }
}

3. 本地存储Hook

自动同步数据到localStorage：

// useLocalStorage.js
import { ref, watch } from 'vue'

export function useLocalStorage(key, defaultValue) {
    const storedValue = localStorage.getItem(key)
    const value = ref(storedValue ? JSON.parse(storedValue) : defaultValue)
    
    watch(value, (newValue) => {
        localStorage.setItem(key, JSON.stringify(newValue))
    }, { deep: true })
    
    return value
}

// 使用示例
const userSettings = useLocalStorage('settings', { theme: 'light' })

4. 防抖Hook

封装防抖逻辑：

// useDebounce.js
import { ref, watch } from 'vue'

export function useDebounce(value, delay = 300) {
    const debouncedValue = ref(value.value)
    let timeout
    
    watch(value, (newValue) => {
        clearTimeout(timeout)
        timeout = setTimeout(() => {
            debouncedValue.value = newValue
        }, delay)
    })
    
    return debouncedValue
}

// 使用示例
const searchQuery = ref('')
const debouncedQuery = useDebounce(searchQuery, 500)

Hook类型	优点	适用场景
UI交互Hook	复用交互逻辑	鼠标跟踪、滚动监听等
数据Hook	统一数据处理	API调用、状态管理等
工具Hook	封装常用功能	防抖、节流、存储等

5. 组合Hook：表单验证

构建复杂的表单验证逻辑：

// useFormValidation.js
import { ref, computed } from 'vue'

export function useFormValidation() {
    const form = ref({})
    const errors = ref({})
    const isDirty = ref(false)
    
    const validate = (rules) => {
        isDirty.value = true
        errors.value = {}
        
        Object.entries(rules).forEach(([field, validateFn]) => {
            const error = validateFn(form.value[field])
            if (error) errors.value[field] = error
        })
        
        return Object.keys(errors.value).length === 0
    }
    
    const isValid = computed(() => {
        return isDirty.value && Object.keys(errors.value).length === 0
    })
    
    return { form, errors, validate, isValid }
}

通过合理使用自定义Hook，可以将Vue3应用的业务逻辑组织得更加清晰，显著提升代码的可维护性和复用性。