Vue3自定义Hooks开发指南与实战技巧

1. Vue3自定义Hooks的本质与价值

在Vue3的Composition API体系中，自定义Hooks已经成为逻辑复用的核心手段。与Vue2时代的mixins相比，Hooks通过函数组合的方式实现了更清晰的代码组织和更灵活的逻辑复用。我最近在重构公司前端项目时，将原本分散在多个组件中的用户权限校验逻辑抽离成了usePermission Hook，使代码量减少了40%，维护效率提升显著。

自定义Hooks的本质是封装响应式状态的逻辑函数，其核心特征包括：

• 以use前缀命名的函数（社区约定）
• 内部使用Composition API（ref、reactive等）
• 返回响应式数据或方法
• 可组合其他Hooks

2. 典型自定义Hooks实现剖析

2.1 基础计数器Hook示例

javascript复制// useCounter.js
import { ref } from 'vue'

export function useCounter(initialValue = 0) {
  const count = ref(initialValue)
  
  const increment = () => count.value++
  const decrement = () => count.value--
  const reset = () => count.value = initialValue

  return { 
    count,
    increment,
    decrement, 
    reset
  }
}

在组件中的使用方式：

javascript复制import { useCounter } from './hooks/useCounter'

export default {
  setup() {
    const { count, increment } = useCounter(10)
    
    return {
      count,
      increment
    }
  }
}

2.2 带参数的高级Hook实现

实际项目中更常见的场景是需要处理异步操作和参数传递的Hook。比如这个数据加载Hook：

ja复制