Vue3组合式API：构建可复用Hook库

Vue3组合式API实战：从零构建可复用的自定义Hook库

Vue3的组合式API（Composition API）为我们提供了更灵活、更强大的代码组织方式。通过自定义Hook，我们可以将逻辑复用到组件中，让代码更加简洁、可维护。本文将带你从零开始，一步步构建一个实用的自定义Hook库，让你的开发效率事半功倍。

为什么需要自定义Hook？

在Vue2的选项式API中，我们常常会遇到逻辑分散在不同生命周期钩子中的问题。比如，一个组件可能需要在created中获取数据，在mounted中添加事件监听，在beforeDestroy中清理资源。这种逻辑分散会让代码难以理解和维护。

Vue3的组合式API通过将相关逻辑组织在一起，解决了这个问题。而自定义Hook则是组合式API的精华所在——它允许我们将可复用的逻辑提取出来，在多个组件间共享，就像React中的Hook一样。

构建第一个自定义Hook：useCounter

让我们从最简单的例子开始：一个计数器Hook。这个Hook将提供一个计数器状态，以及增加、减少和重置的方法。

首先，创建一个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
  }
}

在组件中使用这个Hook非常简单：

<script setup>
import { useCounter } from \'./hooks/useCounter\'

const { count, increment, decrement, reset } = useCounter(10)
</script>

<template>
  <div>
    <p>Count: {{ count }}</p>
    <button @click=\"increment\">+</button>
    <button @click=\"decrement\">-</button>
    <button @click=\"reset\">Reset</button>
  </div>
</template>

构建更实用的Hook：useLocalStorage

接下来，让我们构建一个更实用的Hook：useLocalStorage。这个Hook将允许我们在组件中轻松地读写localStorage数据，并自动处理数据序列化。

创建useLocalStorage.js：

import { ref, watch } from \'vue\'

export function useLocalStorage(key, initialValue) {
  const storedValue = ref(localStorage.getItem(key))
  
  if (storedValue.value === null) {
    storedValue.value = initialValue
    localStorage.setItem(key, JSON.stringify(initialValue))
  } else {
    try {
      storedValue.value = JSON.parse(storedValue.value)
    } catch (e) {
      console.error(`Error parsing localStorage key \"${key}\":`, e)
      storedValue.value = initialValue
    }
  }
  
  const setValue = (value) => {
    try {
      storedValue.value = value
      localStorage.setItem(key, JSON.stringify(value))
    } catch (e) {
      console.error(`Error setting localStorage key \"${key}\":`, e)
    }
  }
  
  watch(storedValue, (newVal) => {
    localStorage.setItem(key, JSON.stringify(newVal))
  })
  
  return [storedValue, setValue]
}

在组件中使用：

<script setup>
import { useLocalStorage } from \'./hooks/useLocalStorage\'

const [name, setName] = useLocalStorage(\'username\', \'Guest\')
</script>

<template>
  <div>
    <input v-model=\"name\" placeholder=\"Enter your name\" />
    <p>Hello, {{ name }}!</p>
  </div>
</template>

构建异步数据获取Hook：useFetch

在真实应用中，我们经常需要获取异步数据。下面是一个useFetch Hook的实现，它处理了加载状态、错误状态和数据缓存。

创建useFetch.js：

import { ref, watch } from \'vue\'

export function useFetch(url, options = {}) {
  const data = ref(null)
  const error = ref(null)
  const loading = ref(false)
  
  const fetchData = async () => {
    loading.value = true
    error.value = null
    
    try {
      const response = await fetch(url, options)
      
      if (!response.ok) {
        throw new Error(`HTTP error! status: ${response.status}`)
      }
      
      data.value = await response.json()
    } catch (e) {
      error.value = e
    } finally {
      loading.value = false
    }
  }
  
  // 初始加载数据
  fetchData()
  
  // 可选：监听URL变化自动重新获取
  if (options.watch !== false) {
    watch(() => url, fetchData)
  }
  
  return {
    data,
    error,
    loading,
    refetch: fetchData
  }
}

在组件中使用：

<script setup>
import { useFetch } from \'./hooks/useFetch\'

const { data, error, loading, refetch } = useFetch(\'https://api.example.com/posts\')
</script>

<template>
  <div>
    <button @click=\"refetch\" :disabled=\"loading\">Refresh</button>
    
    <div v-if=\"loading\">Loading...</div>
    
    <div v-else-if=\"error\">
      Error: {{ error.message }}
    </div>
    
    <ul v-else>
      <li v-for=\"post in data\" :key=\"post.id\">{{ post.title }}</li>
    </ul>
  </div>
</template>

构建高级Hook：useDebounce

节流和防抖是前端开发中常见的优化技术。下面是一个useDebounce Hook的实现，它可以延迟执行函数，避免频繁触发。

创建useDebounce.js：

import { ref, watch } from \'vue\'

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

在组件中使用，实现搜索建议：

<script setup>
import { ref } from \'vue\'
import { useDebounce } from \'./hooks/useDebounce\'

const searchQuery = ref(\'\')
const debouncedQuery = useDebounce(searchQuery, 500)

// 这里可以添加一个watch来监听debouncedQuery的变化并触发搜索
</script>

<template>
  <input 
    v-model=\"searchQuery\" 
    placeholder=\"Search...\" 
  />
  <p>Debounced value: {{ debouncedQuery }}</p>
</template>

组织你的Hook库

随着Hook越来越多，我们需要一个良好的组织结构。建议按照以下方式组织你的Hook库：

• 创建一个hooks目录，存放所有自定义Hook
• 按功能分类，如数据操作（useLocalStorage）、网络请求（useFetch）、性能优化（useDebounce）等
• 每个Hook单独一个文件，保持单一职责
• 编写清晰的JSDoc注释，说明参数和返回值

一个推荐的目录结构：

src/
├── hooks/
│   ├── index.js          # 导出所有Hook
│   ├── useCounter.js
│   ├── useLocalStorage.js
│   ├── useFetch.js
│   ├── useDebounce.js
│   └── ...               # 其他Hook
└── components/
    └── ...

最佳实践

在使用自定义Hook时，记住这些最佳实践：

• 保持Hook的单一职责原则，每个Hook只做一件事
• 使用有意义的命名，如useFetch而不是getData
• 提供合理的默认值，让Hook更易用
• 处理边界情况和错误，提供良好的错误处理
• 避免在Hook中直接操作DOM，保持逻辑的纯粹性
• 考虑组合多个Hook，创建更复杂的逻辑

总结

自定义Hook是Vue3组合式API的强大特性，它让我们能够以更灵活、更可维护的方式组织代码。通过从简单的计数器Hook到复杂的防抖Hook，我们一步步构建了一个实用的Hook库。记住，好的Hook应该简单、可复用、易于理解，并且遵循单一职责原则。

随着项目的发展，你会积累越来越多的自定义Hook，这将大大提高开发效率，减少重复代码。开始构建你自己的Hook库吧，让Vue3的开发变得更加高效和愉快！