【vue3|第14期】深入Vue3自定义Hooks：掌握组件逻辑复用的核心

日期：2024年6月26日
作者：Commas
签名：(ง •_•)ง 积跬步以致千里,积小流以成江海……
注释：如果您觉得有所帮助，帮忙点个赞，也可以关注我，我们一起成长；如果有不对的地方，还望各位大佬不吝赐教，谢谢^ - ^
1.01³⁶⁵ = 37.7834；0.99³⁶⁵ = 0.0255
1.02³⁶⁵ = 1377.4083；0.98³⁶⁵ = 0.0006

说在最前面：本文 vue3 的示例代码，在没有另外声名的情况下，均采用 <script setup> 组合式代码风格，风格统一，避免混乱，请各位新老食客放心食用哈 ^ _ ^

文章目录

一、前言
二、什么是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<template>  <div>  Mouse position(x,y): （{{ x }},{{ y }}）</div>  
</template>  <script setup>  
//导入自定义hooks函数
import { useMousePosition } from '@/hooks/useMousePosition';  
//调用函数，并解耦接收返回值
const { x, y } = useMousePosition();  
</script>

示例二：计数器

（2-1）定义

路径：xxx/sys/hooks/useCounter.js

// useCounter.jsimport { 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<template>当前数值是：{{ count }}<button @click="increment">加一</button><button @click="decrement">减一</button>
</template><script setup>
import useCounter from '@/hooks/useCounter';
const { count,increment,decrement } = useCounter()
</script>