1. 什么是自定义 Hook 函数？

自定义 Hook 函数是一个封装了逻辑的 JavaScript 函数，它可以使用 Vue 3 的 Composition API 提供的响应式数据和生命周期钩子。通过自定义 Hook，你可以将组件的逻辑拆分成更小、更可复用的单元。

特点：

• 复用性：可以在多个组件中复用相同的逻辑。

• 可维护性：将逻辑抽离到独立的函数中，使组件代码更简洁。

• 组合性：多个 Hook 函数可以组合在一起，形成更复杂的逻辑。

2. 自定义 Hook 的使用场景

• 数据获取：封装异步数据获取逻辑。

• 事件监听：封装事件监听和销毁逻辑。

• 状态管理：封装共享状态逻辑。

• 副作用管理：封装定时器、DOM 操作等副作用逻辑。

3. 如何实现自定义 Hook 函数？

自定义 Hook 函数的实现步骤如下：

1. 创建一个普通的 JavaScript 函数。

2. 在函数中使用 Vue 3 的响应式 API（如 ref、reactive）和生命周期钩子（如 onMounted、onUnmounted）。

3. 返回需要在组件中使用的数据或方法。

4. 示例代码

// useCounter.js
import { ref } from 'vue';export function useCounter(initialValue = 0) {const count = ref(initialValue);function increment() {count.value++;}function decrement() {count.value--;}function reset() {count.value = initialValue;}return {count,increment,decrement,reset,};
}

在组件中使用：

<template><div><p>Count: {{ count }}</p><button @click="increment">Increment</button><button @click="decrement">Decrement</button><button @click="reset">Reset</button></div>
</template><script>
import { useCounter } from './useCounter';export default {setup() {const { count, increment, decrement, reset } = useCounter(10);return {count,increment,decrement,reset,};},
};
</script>

5. 自定义 Hook 的最佳实践

1. 命名规范：自定义 Hook 函数通常以 use 开头，例如 useCounter、useMousePosition。

2. 单一职责：每个 Hook 函数应该只关注一个特定的功能。

3. 组合使用：可以将多个 Hook 函数组合在一起，形成更复杂的逻辑。

4. 清理副作用：如果 Hook 函数中使用了副作用（如事件监听、定时器），记得在 onUnmounted 中清理。

6. 总结

Vue 3 的自定义 Hook 函数是 Composition API 的核心特性之一，它提供了一种灵活且强大的方式来组织和复用逻辑。通过自定义 Hook，可以将组件的逻辑拆分成更小的单元，从而提高代码的可维护性和复用性。无论是简单的状态管理还是复杂的副作用逻辑，自定义 Hook 都能很好地胜任。