1. Vue3 hooks 函数的作用Vue3 中的 Hooks 函数在 Vue 生态中也常被称为组合式函数Composition Functions是组合式 APIComposition 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 定义 hookuseCounter首先我们创建一个独立的文件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 clickincrement增加 ({{ step }})/button button clickdecrement减少 (-{{ step }})/button button clickreset重置/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; /script2.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 自动处理了事件监听器的添加与移除生命周期管理组件使用起来非常简洁。
Vue3 hooks 函数
1. Vue3 hooks 函数的作用Vue3 中的 Hooks 函数在 Vue 生态中也常被称为组合式函数Composition Functions是组合式 APIComposition 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 定义 hookuseCounter首先我们创建一个独立的文件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 clickincrement增加 ({{ step }})/button button clickdecrement减少 (-{{ step }})/button button clickreset重置/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; /script2.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 自动处理了事件监听器的添加与移除生命周期管理组件使用起来非常简洁。
