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 中，我们可以创建一个 useUserList Hook，将这些逻辑集中在一起。

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

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

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

2.1 文件结构目录

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

plaintext 复制代码

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）。

javascript 复制代码

// 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。

html 复制代码

<!-- 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 处理副作用的能力，我们看一个监听鼠标位置的例子。