Vue3 hooks 函数

1. Vue3 hooks 函数的作用

Vue3 中的 Hooks 函数（在 Vue 生态中也常被称为组合式函数，Composition Functions）是组合式 API（Composition API）的核心实践。它的主要作用是将组件中可复用的逻辑抽取为独立的、有状态的函数，从而解决 Vue2 中 Mixins、高阶组件等复用模式带来的问题。简单的理解，hooks函数就像是根据业务分类封装成一个个的工具类。如求和相关的业务封装成一个工具类，获取用户信息相关的业务封装成一个工具类，在需要使用的组件直接引用即可。这也是vue2 和 vue3一个明显的特征，vue2 在一个组件中不管是什么业务的方法都只能放在methods中，降低了阅读性。

1.1 核心作用

• 逻辑复用与封装：将分散在组件各个生命周期（如data、methods、computed、watch）中的相关代码组织在一起，形成一个独立的函数。这个函数可以在多个组件中导入并使用，实现“一次编写，多处复用”。
• 代码组织：基于逻辑关注点而非选项类型来组织代码。所有与“鼠标跟踪”相关的响应式数据、计算属性和方法都可以封装在一个useMouse函数中，使代码更内聚、更易维护。
• 更好的类型推导：由于 Hooks 是纯 TypeScript/JavaScript 函数，能享受到完整的类型推导，解决了 Mixins 在类型上的模糊性。
• 清晰的依赖关系：在 Hooks 函数内部，响应式状态（ref/reactive）和副作用（watch/onMounted）的依赖关系一目了然，避免了 Mixins 中属性来源不明、命名冲突等问题。
• 更灵活的代码组合：多个 Hooks 函数可以在一个组件中像搭积木一样组合使用，彼此独立，互不干扰。

1.2 与 Vue2 Options API 的对比

在 Options API 中，一个“获取用户列表”的功能，其数据 (data)、方法 (methods)、生命周期钩子 (mounted) 是分散定义的。而在 Composition API 中，我们可以创建一个useUserListHook，将这些逻辑集中在一起。

2. 代码案例：一个自定义计数器 Hook

另外，hooks 函数使用有一个规范，就是以 userXXX.js / useXXX.ts 命名

下面我们通过一个具体的例子——创建一个可复用的计数器逻辑 Hook，来演示其定义与使用。

2.1 文件结构目录

在开始编写 Hook 之前，我们先来看一下典型的 Vue3 项目文件结构，了解 Hook 文件应该放在哪里：

my-vue3-project/ ├── src/ │ ├── components/ # 组件目录 │ │ ├── CounterDemo.vue # 使用 Hook 的组件 │ │ └── ... │ ├── composables/ # 推荐：存放自定义 Hook 的目录 │ │ ├── useCounter.js # 计数器 Hook │ │ ├── useMousePosition.js │ │ └── ... │ ├── App.vue │ └── main.js ├── package.json └── ...

关键点说明：

• composables/目录：这是 Vue 社区推荐的存放自定义组合式函数（Hooks）的目录名称。你也可以使用hooks/或utils/，但composables/更符合 Vue3 的官方命名习惯。
• 命名规范：Hook 文件通常以use开头，例如useCounter.js、useMousePosition.js，以明确其用途。
• 导入路径：在组件中导入 Hook 时，使用相对路径（如import useCounter from '../composables/useCounter.js'）或配置了别名的绝对路径。

接下来，我们将在src/composables/useCounter.js文件中创建我们的计数器 Hook。

2.1 定义 hook：useCounter

首先，我们创建一个独立的文件useCounter.js（或useCounter.ts）。

// useCounter.js import { ref, computed } from 'vue'; export default function useCounter(initialValue = 0, step = 1) { // 1. 响应式状态（相当于 Options API 中的 data） const count = ref(initialValue); // 2. 计算属性（相当于 computed） const isEven = computed(() => count.value % 2 === 0); const isPositive = computed(() => count.value > 0); // 3. 操作方法（相当于 methods） function increment() { count.value += step; } function decrement() { count.value -= step; } function reset() { count.value = initialValue; } // 4. 返回所有需要暴露给组件的内容 return { count, // 响应式计数 isEven, // 计算属性：是否为偶数 isPositive, // 计算属性：是否为正数 increment, // 增加方法 decrement, // 减少方法 reset // 重置方法 }; }

2.2 在组件中使用 Hook

现在，我们可以在任何 Vue3 组件中导入并使用这个 Hook。

<!-- CounterDemo.vue --> <template> <div> <h3>当前计数: {{ count }}</h3> <p>是否为偶数: {{ isEven ? '是' : '否' }}</p> <p>是否为正数: {{ isPositive ? '是' : '否' }}</p> <button @click="increment">增加 (+{{ step }})</button> <button @click="decrement">减少 (-{{ step }})</button> <button @click="reset">重置</button> </div> </template> <script setup> import useCounter from './useCounter.js'; // 使用 Hook，并传入初始值和步长 const { count, isEven, isPositive, increment, decrement, reset } = useCounter(10, 2); // 如果需要，也可以访问步长（但 Hook 未暴露，这里仅为演示，实际可暴露） const step = 2; </script>

2.3 案例解析

• 复用性：另一个组件AnotherComponent.vue可以直接import useCounter from './useCounter.js'来获得一套全新的、独立的计数器状态和逻辑，互不影响。
• 可配置性：通过函数参数 (initialValue,step) 让 Hook 的使用更加灵活。
• 逻辑内聚：所有与“计数”相关的状态、计算和操作都封装在useCounter函数内部，组件只需解构出需要的部分。
• 清晰的依赖：在 Hook 内部，isEven和isPositive通过computed明确声明了它们依赖于count.value。

3. 更复杂的实战 Hook 示例：useMousePosition

为了进一步展示 Hooks 处理副作用的能力，我们看一个监听鼠标位置的例子。

// useMousePosition.js import { ref, onMounted, onUnmounted } from 'vue'; export default function useMousePosition() { const x = ref(0); const y = ref(0); function update(event) { x.value = event.pageX; y.value = event.pageY; } onMounted(() => { window.addEventListener('mousemove', update); }); onUnmounted(() => { window.removeEventListener('mousemove', update); }); return { x, y }; }

在组件中使用：

<script setup> import useMousePosition from './useMousePosition.js'; const { x, y } = useMousePosition(); </script> <template> <p>鼠标位置：X: {{ x }}, Y: {{ y }}</p> </template>

这个 Hook 自动处理了事件监听器的添加与移除（生命周期管理），组件使用起来非常简洁。