vue3的自定义hooks

---

前言

• Vue3 的 hook函数的出现，可以让我们更好抽离重复逻辑，聚合相同的功能。
• 它与vue2 中的mixins 有点类似，但是相对 mixins 而言， hooks 函数 更清楚复用功能代码的来源,
  更清晰易懂。
• 使用 Vue3 的组合 API 封装的可复用，高内聚低耦合。

---

一、vue3 中的hooks 如何理解

Vue 3 中的自定义 hooks 是一种用于封装可重用逻辑的机制。它的本质和原理是基于 Vue 3 的组合式 API，利用了函数式编程的特性。

在 Vue 3 中，自定义 hooks 实际上是一个普通的 JavaScript 函数，可以在组件的 setup 函数中调用。这个函数可以包含任意的逻辑，例如处理数据、副作用等。自定义 hooks 可以返回任何你想要的值，例如响应式数据、方法或其他工具函数。

自定义 hooks 的关键在于利用了 Vue 3 的 ref、reactive、computed 等函数，以及生命周期钩子函数。通过在 setup 函数中调用这些函数，我们可以创建响应式数据、计算属性，并在适当的生命周期钩子函数中执行相应的操作。

当一个组件使用自定义 hooks 时，它实际上是在执行自定义 hooks 函数，并将返回的值解构到组件的选项中。这样，组件就可以访问自定义 hooks 中定义的响应式数据和方法，并将其用于组件的渲染、交互和其他逻辑中。

自定义 hooks 的原理是基于闭包和函数作用域。每个组件实例都有自己的作用域，当调用自定义 hooks 函数时，它会在组件的作用域中创建一个独立的闭包，以保持自定义 hooks 中的状态和逻辑与组件实例的其他部分隔离。

总结起来，自定义 hooks 是一种利用函数式编程和组合式 API 的机制，用于封装可重用的逻辑，并通过在组件中调用自定义 hooks 函数来获取其返回的值。这样可以实现逻辑的复用和组件的解耦，提高代码的可维护性和可读性。

二、vue3自定义 hook 需要满足的规范

1、具备可复用功能，才需要抽离为 hooks 独立文件

2、函数名/文件名以 use 开头，形如: useXX

3、引用时将响应式变量或者方法显式解构暴露出来；

三、hooks与utils的区别

相同点： 通过 hooks 和 utils 函数封装， 可以实现组件间共享和复用，提高代码的可重用性和可维护性。

异同点：

1.表现形式不同： hooks 是在 utils 的基础上再包一层组件级别的东西(钩子函数等)；utils 一般用于封装相应的逻辑函数，没有组件的东西；

2.数据是否具有响应式： hooks 中如果涉及到 ref，reactive，computed 这些 api 的数据，是具有响应式的；而 utils 只是单纯提取公共方法就不具备响应式；

3.作用范围不同： hooks 封装，可以将组件的状态和生命周期方法提取出来，并在多个组件之间共享和重用；utils 通常是指一些辅助函数或工具方法，用于实现一些常见的操作或提供特定功能。

总结：
utils 是通用的工具函数，而 hooks 是对 utils 的一种封装，用于在组件中共享状态逻辑和副作用。

---

总结

vue3 hooks 现在使用比较广泛，介绍基本概念与原理。还与utils比较，使用注意规范。