Vue3 自定义Hooks详解

发布时间: 2025-03-22 12:14

↑

# Vue3 自定义Hooks详解

本文将详细介绍Vue3中自定义Hooks的概念、使用方法和最佳实践，帮助你更好地复用组件逻辑。

## 自定义Hooks基础

### 1. 基本概念

自定义Hooks是Vue3中实现逻辑复用的一种方式，它基于组合式API，可以将组件逻辑提取到可重用的函数中。

```javascript
// useCounter.js
import { ref, computed } from 'vue'

export function useCounter(initialValue = 0) {
  const count = ref(initialValue)
  const double = computed(() => count.value * 2)

const increment = () => count.value++
  const decrement = () => count.value--

return {
    count,
    double,
    increment,
    decrement
  }
}
```

### 2. 基本使用

```vue
<template>
  <div>
    <p>Count: {{ count }}</p>
    <p>Double: {{ double }}</p>
    <button @click="increment">+</button>
    <button @click="decrement">-</button>
  </div>
</template>

const { count, double, increment, decrement } = useCounter(0)
</script>
```

## 常用Hook模式

### 1. 异步数据获取

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

export function useFetch() {
  const data = ref(null)
  const error = ref(null)
  const loading = ref(false)

const fetchData = async (url) => {
    loading.value = true
    error.value = null

try {
      const response = await fetch(url)
      data.value = await response.json()
    } catch (e) {
      error.value = e
    } finally {
      loading.value = false
    }
  }

return {
    data,
    error,
    loading,
    fetchData
  }
}
```

使用示例：

```vue
<template>
  <div>
    <div v-if="loading">Loading...</div>
    <div v-else-if="error">{{ error.message }}</div>
    <div v-else>
      <pre>{{ data }}</pre>
    </div>
    <button @click="loadData">Reload</button>
  </div>
</template>

const { data, error, loading, fetchData } = useFetch()

const loadData = () => {
  fetchData('https://api.example.com/data')
}

onMounted(() => {
  loadData()
})
</script>
```

### 2. 表单处理

```javascript
// useForm.js
import { reactive, ref } from 'vue'

export function useForm(initialValues = {}) {
  const values = reactive({ ...initialValues })
  const errors = reactive({})
  const isSubmitting = ref(false)

const validate = () => {
    // 实现验证逻辑
    const newErrors = {}
    for (const [key, value] of Object.entries(values)) {
      if (!value) {
        newErrors[key] = 'This field is required'
      }
    }
    Object.assign(errors, newErrors)
    return Object.keys(newErrors).length === 0
  }

const handleSubmit = async (submitFn) => {
    isSubmitting.value = true
    if (validate()) {
      try {
        await submitFn(values)
      } catch (e) {
        console.error(e)
      }
    }
    isSubmitting.value = false
  }

return {
    values,
    errors,
    isSubmitting,
    handleSubmit
  }
}
```

使用示例：

```vue
<template>
  <form @submit.prevent="onSubmit">
    <div>
      <input v-model="values.email" type="email" />
      <span v-if="errors.email" class="error">{{ errors.email }}</span>
    </div>
    <div>
      <input v-model="values.password" type="password" />
      <span v-if="errors.password" class="error">{{ errors.password }}</span>
    </div>
    <button type="submit" :disabled="isSubmitting">
      {{ isSubmitting ? 'Submitting...' : 'Submit' }}
    </button>
  </form>
</template>

const { values, errors, isSubmitting, handleSubmit } = useForm({
  email: '',
  password: ''
})

const onSubmit = () => {
  handleSubmit(async (formData) => {
    // 处理表单提交
    await submitToServer(formData)
  })
}
</script>
```

### 3. 本地存储

```javascript
// useStorage.js
import { ref, watch } from 'vue'

export function useStorage(key, defaultValue) {
  const storedValue = localStorage.getItem(key)
  const value = ref(storedValue ? JSON.parse(storedValue) : defaultValue)

watch(value, (newValue) => {
    localStorage.setItem(key, JSON.stringify(newValue))
  })

const removeItem = () => {
    localStorage.removeItem(key)
    value.value = defaultValue
  }

return {
    value,
    removeItem
  }
}
```

使用示例：

```vue
<template>
  <div>
    <input v-model="theme.value" />
    <button @click="theme.removeItem">Reset Theme</button>
  </div>
</template>

const theme = useStorage('theme', 'light')
</script>
```

## 最佳实践

### 1. 命名规范

```javascript
// 推荐：使用use前缀
export function useMousePosition() {
  // ...
}

// 推荐：使用动词+名词的组合
export function useFetchUsers() {
  // ...
}

// 不推荐：没有use前缀
export function getMousePosition() {
  // ...
}
```

### 2. 参数处理

```javascript
// useApi.js
export function useApi(options = {}) {
  // 设置默认值
  const {
    baseURL = 'https://api.example.com',
    headers = {},
    timeout = 5000
  } = options

// 实现API调用逻辑
  const get = async (endpoint) => {
    // ...
  }

const post = async (endpoint, data) => {
    // ...
  }

return {
    get,
    post
  }
}
```

### 3. 组合Hooks

```javascript
// useUserProfile.js
export function useUserProfile(userId) {
  const { data: user, loading, error, fetchData } = useFetch()
  const { value: theme } = useStorage('theme', 'light')

const loadUserProfile = () => {
    fetchData(`/api/users/${userId}`)
  }

return {
    user,
    loading,
    error,
    theme,
    loadUserProfile
  }
}
```

### 4. 生命周期处理

```javascript
// useEventListener.js
import { onMounted, onUnmounted } from 'vue'

export function useEventListener(target, event, callback) {
  onMounted(() => {
    target.addEventListener(event, callback)
  })

onUnmounted(() => {
    target.removeEventListener(event, callback)
  })
}
```

使用示例：

```vue
<script setup>
import { useEventListener } from './useEventListener'

useEventListener(window, 'resize', () => {
  console.log('Window resized')
})
</script>
```

## 注意事项

### 1. 避免副作用

```javascript
// 不好的实践
export function useData() {
  const data = ref(null)
  
  // 直接在Hook中进行副作用操作
  fetch('/api/data').then(r => r.json()).then(d => data.value = d)

return { data }
}

// 好的实践
export function useData() {
  const data = ref(null)
  
  // 提供方法让使用者控制副作用
  const fetchData = async () => {
    const response = await fetch('/api/data')
    data.value = await response.json()
  }

return { data, fetchData }
}
```

### 2. 保持独立性

```javascript
// 不好的实践 - Hook之间直接依赖
const globalState = ref(null)

export function useFeatureA() {
  return { globalState } // 直接使用外部状态
}

// 好的实践 - 通过参数传递依赖
export function useFeatureA(state) {
  // 使用传入的状态
  return { state }
}
```

## 总结

本文详细介绍了Vue3中自定义Hooks的使用方法：

1. 基础概念
   - Hook的定义和使用
   - 基本模式和结构

2. 常用Hook模式
   - 异步数据获取
   - 表单处理
   - 本地存储

3. 最佳实践
   - 命名规范
   - 参数处理
   - 组合使用
   - 生命周期处理

4. 注意事项
   - 避免副作用
   - 保持独立性
   - 性能考虑

通过合理使用自定义Hooks，可以有效提高代码复用性和可维护性。建议在实际开发中根据具体需求选择合适的Hook模式，并遵循最佳实践来编写高质量的代码。

元素码农