【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> 组合式代码风格，风格统一，避免混乱，请各位新老食客放心食用哈 ^ _ ^

---

---

---

一、前言

在 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.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

<template>
  当前数值是：{{ count }}
  <button @click="increment">加一</button>
  <button @click="decrement">减一</button>
</template>

<script setup>
import useCounter from '@/hooks/useCounter';
const { count,increment,decrement } = useCounter()
</script>

八、总结

自定义Hooks在Vue 3中的应用使得我们能够更加高效地组织和重用组件逻辑，是现代Vue开发的一大利器。尽管存在一定的学习成本，但其带来的好处是显而易见的，为我们提供了一种高效、灵活的方式来构建和组织代码，让我们能够更好地应对各种开发需求

---

参考文章：

• Vue.js

---

版权声明：本文为博主原创文章，如需转载，请给出：
原文链接：https://blog.csdn.net/qq_35844043/article/details/139986768