【vue3|第14期】深入Vue3自定义Hooks：掌握组件逻辑复用的核心
日期：2024年6月26日
作者：Commas
签名：(ง •_•)ง 积跬步以致千里,积小流以成江海……
注释：如果您觉得有所帮助，帮忙点个赞，也可以关注我，我们一起成长；如果有不对的地方，还望各位大佬不吝赐教，谢谢^ - ^
1.01365 = 37.7834；0.99365 = 0.0255
1.02365 = 1377.4083；0.98365 = 0.0006
说在最前面：本文 vue3 的示例代码，在没有另外声名的情况下，均采用 组合式代码风格，风格统一，避免混乱，请各位新老食客放心食用哈 ^ _ ^
文章目录
- 一、前言
- 二、什么是Hooks？
- 三、Hooks的实现原理
- 四、Hooks的作用与应用场景
- 1、Hooks的作用
- 2、Hooks的应用场景
- 五、vue3 Hooks优缺点
- 1、vue3 Hooks优点：
- 2、vue3 Hooks缺点：
- 六、Hooks书写规范
- 七、如何定义并使用 vue3 Hooks
- 示例一：追踪鼠标位置
- （1-1）定义
- （1-2）调用
- 示例二：计数器
- （2-1） 定义
- （2-2）调用
- 八、总结
一、前言
在 Vue3 的世界中，自定义 Hooks 本质上是一段具有复用性的代码，为我们带来了更强大的功能和更优雅的代码组织方式。它犹如一把锋利的“钩子”，在组件的构建过程中插入所需的逻辑。通过 Composition API 提供的灵活 API 设计，自定义 Hooks 能够将组件中的逻辑代码巧妙地包装起来，实现在多个组件之间共享和复用，极大地提升了开发效率和代码的可维护性。
二、什么是Hooks？
Hook，直译为“钩子”，是一种设计模式，允许我们在不修改组件内部逻辑的情况下，复用组件逻辑。它使得我们可以将组件的某些逻辑提取到单独的函数中，这个函数可以被 其他组件 或 Hooks 调用。
三、Hooks的实现原理
Vue3 的自定义 Hooks 是基于 Composition API 来实现的。这些 Hooks 可以在组件的生命周期的不同阶段被调用，执行特定的任务。本质上，Hooks 是特殊的函数，能够在组件的setup 函数中被使用，通过导入如 ref, reactive, onMounted 等API，来创建和管理响应式数据、处理副作用操作以及绑定生命周期事件。
简单来说，Hooks 是通过一系列的 组合式 API 来实现 状态 和 副作用 的管理，使得函数式组件能够拥有类似类组件的功能。
四、Hooks的作用与应用场景
1、Hooks的作用
- 状态管理：通过定义状态管理的 Hooks，如useCounter，可以封装计数器的状态和行为。
- 数据处理：例如，编写一个 useFetchData 的 Hook 来处理 API 请求，获取数据并更新组件状态。
- 副作用管理：创建一个处理订阅事件的 Hook，确保在组件卸载时清除事件监听器。
- 表单处理：编写处理表单验证和提交逻辑的 Hooks。
2、Hooks的应用场景
- 逻辑复用：在不同组件间共享相同的业务逻辑。
- 逻辑拆分：将大型组件的逻辑拆分成易于管理和复用的小块。
- 副作用管理：确保如定时器、事件监听等在组件卸载时得到正确处理。
五、vue3 Hooks优缺点
1、vue3 Hooks优点：
- 提高代码复用性和可维护性：通过复用组件逻辑，减少代码冗余，提高代码可维护性。
- 解耦组件：降低组件间的耦合，提高代码可维护性。
- 提高开发效率：复用和解耦可以让开发者更快地开发和维护组件。
2、vue3 Hooks缺点：
- 学习成本：初学者可能需要一定时间来理解和掌握 Hooks 的使用。
- 过度使用：如果过度使用 Hooks，可能会导致代码变得复杂，降低开发效率。
- 代码质量：第三方 Hooks 质量和兼容性参差不齐。
六、Hooks书写规范
在编写 Hooks 时，建议遵循以下规范：
- 命名规范：以“use”开头，描述 Hooks 的功能易于理解：命名应清晰明了，让人一眼就能了解 Hooks 的作用，如 useMonsePosition、useCounter 以及 useFetchData 等。
- 参数和返回值：Hooks 的参数和返回值应尽量简单明了，避免复杂的数据结构。
- 单一职责原则：每个 Hooks 应该只实现一个功能，避免逻辑复杂。
- 副作用管理：在自定义 Hooks 中，我们需要确保正确地管理副作用操作，如定时器、事件监听等。
七、如何定义并使用 vue3 Hooks
示例一：追踪鼠标位置
（1-1）定义
路径：xxx/sys/hooks/useMonsePosition.js
// useMousePosition.js import { ref, onMounted, onUnmounted } from 'vue'; // 本质上导出一个函数 export default function() { const x = ref(0); const y = ref(0); // 业务逻辑 function updatePosition(event) { x.value = event.clientX; y.value = event.clientY; } //挂载后处理 onMounted(() => { window.addEventListener('mousemove', updatePosition); }); //卸载前处理 onUnmounted(() => { window.removeEventListener('mousemove', updatePosition); }); // 返回一个对象 return { x, y }; }（1-2）调用
路径：xxx\sys\App.vue
// App.vue
Mouse position(x,y): （{{ x }},{{ y }}）//导入自定义hooks函数 import { useMousePosition } from '@/hooks/useMousePosition'; //调用函数，并解耦接收返回值 const { x, y } = useMousePosition();示例二：计数器
（2-1） 定义
路径：xxx/sys/hooks/useCounter.js
// useCounter.js import { ref, onMounted } from 'vue'; // 创建自定义Hooks export default function(initialValue = 0) { const count = ref(initialValue); function increment() { count.value++; } function decrement() { count.value--; } onMounted(() => { // 执行一些操作，例如设置初始值 }); return { count, increment, decrement }; }（2-2）调用
路径：xxx\sys\App.vue
// App.vue 当前数值是：{{ count }} 加一 减一 import useCounter from '@/hooks/useCounter'; const { count,increment,decrement } = useCounter()八、总结
自定义Hooks在Vue 3中的应用使得我们能够更加高效地组织和重用组件逻辑，是现代Vue开发的一大利器。尽管存在一定的学习成本，但其带来的好处是显而易见的，为我们提供了一种高效、灵活的方式来构建和组织代码，让我们能够更好地应对各种开发需求
参考文章：
- Vue.js
版权声明：本文为博主原创文章，如需转载，请给出：
原文链接：https://blog.csdn.net/qq_35844043/article/details/139986768
- Vue.js
