Vue3 封装 hook，开发中轻松实现无脑 CV

在Vue3开发中，组合式API的革命性设计彻底改变了代码组织方式。但实际开发中我们常常发现：表单验证、事件监听、数据请求等场景存在大量重复代码。通过封装Hook，开发者可以实现：

逻辑复用：相同业务逻辑只需编写一次
代码整洁：组件代码量减少40%到60%
维护便捷：核心逻辑集中管理，修改只需调整Hook


// useEventListener.js
import { onUnmounted } from 'vue'

export function useEventListener(target, event, callback) {
  target.addEventListener(event, callback)
  
  // 自动销毁监听
  onUnmounted(() => {
    target.removeEventListener(event, callback)
  })
}

使用示例：


// 组件中使用
import { useEventListener } from './hooks/useEventListener'

export default {
  setup() {
    useEventListener(window, 'resize', handleResize)
    
    const handleResize = () => {
      console.log('窗口尺寸变化')
    }
  }
}


// useApiHook.js
import { ref } from 'vue'
import axios from 'axios'

export function useApiHook() {
  const loading = ref(false)
  const error = ref(null)
  
  const fetchData = async (url) => {
    try {
      loading.value = true
      const response = await axios.get(url)
      return response.data
    } catch (err) {
      error.value = err.message
    } finally {
      loading.value = false
    }
  }
  
  return { loading, error, fetchData }
}


vue create customer-service
cd customer-service
npm install axios


// useChatHook.js
import { ref } from 'vue'
import axios from 'axios'

export function useChatHook() {
  const messages = ref([])
  const pending = ref(false)
  
  const sendMessage = async (content) => {
    pending.value = true
    try {
      const response = await axios.post('/api/chat', { content })
      messages.value.push(response.data)
    } finally {
      pending.value = false
    }
  }
  
  return { messages, pending, sendMessage }
}


<template>
  <div class="chat-container">
    <div v-for="msg in messages" :key="msg.id">
      {{ msg.content }}
    </div>
    <button @click="sendMessage('订单查询')" :disabled="pending">
      {{ pending ? '发送中...' : '发送' }}
    </button>
  </div>
</template>

<script>
import { useChatHook } from '../hooks/useChatHook'

export default {
  setup() {
    return { ...useChatHook() }
  }
}
</script>

命名规范：统一使用use前缀（如usePagination）
参数设计：采用options对象参数保证扩展性
状态隔离：每个Hook实例独立维护自身状态
文档注释：使用JSDoc规范编写使用说明

在Hook内部使用ref/reactive创建响应式变量，通过return暴露给组件


// 自动清理定时器示例
import { onUnmounted } from 'vue'

export function useInterval(callback, delay) {
  const timer = setInterval(callback, delay)
  
  onUnmounted(() => {
    clearInterval(timer)
  })
}