Vue3中怎么自定义Hooks(hooks,vue3,开发技术)

它无不体现Vue3 Composition Api 低耦合高内聚的思想！ 笔者在看了官方文档和开源的admin模板都是大量使用自定义Hooks的！

虽然官方没有明确指明或定义什么是自定义Hooks，但是却无处不在用；

以函数形式抽离一些可复用的方法像钩子一样挂着，随时可以引入和调用，实现高内聚低耦合的目标；

将可复用功能抽离为外部JS文件

函数名/文件名以use开头，形如：useXX

引用时将响应式变量或者方法显式解构暴露出来如：const {nameRef，Fn} = useXX()

（在setup函数解构出自定义hooks的变量和方法）

简单的加减法计算，将加法和减法抽离为2个自定义Hooks，并且相互传递响应式数据

加法功能-Hook

减法功能-Hook

加减法计算组件

Mixin不足

在 Vue 2 中，mixin 是将部分组件逻辑抽象成可重用块的主要工具。但是，他们有几个问题：

1、Mixin 很容易发生冲突：因为每个 mixin 的 property 都被合并到同一个组件中，所以为了避免 property 名冲突，你仍然需要了解其他每个特性。

2、可重用性是有限的：我们不能向 mixin 传递任何参数来改变它的逻辑，这降低了它们在抽象逻辑方面的灵活性。

上面这段是Vue3官方文档的内容，可以概括和补充为：

Vue3自定义Hooks却可以

Vue3自定义Hooks, 引用时将响应式变量或者方法显式暴露出来如：

const {nameRef，Fn} = useXX()

Mixins

Mixin不明的混淆，我们根本无法获知属性来自于哪个Mixin文件，给后期维护带来困难

Vue3自定义Hooks

我们很容易看出每个Hooks显式暴露出来的响应式变量和方法

但是Vue3自定义Hooks却可以：

Vue3自定义Hooks可以灵活传递任何参数来改变它的逻辑，参数不限于其他hook的暴露出来的变量

Mixins

可以通过调用Mixin内部方法来传递参数，却无法直接给Mixin传递参数，因为Mixin不是函数形式暴露的，不发传参

Vue3自定义Hook

在上面实例基础上添加个算平均的Hook

组件内

Vue3自定义Hooks可以灵活传递任何参数来改变它的逻辑，参数不限于其他hook的暴露出来的变量，这提高了Vue3在抽象逻辑方面的灵活性。

Vue3自定义Hook可以在引入的时候对同名变量重命名

Mixins

如果this.add(num1,num2)和 this.sub(num1,num2) 计算的结果返回的同名变量totalNum，由于JS单线程，后面引入的会覆盖前面的，totalNum最终是减法sub的值

Vue3自定义Hooks

在Vue3自定义Hooks中，虽然加法和减法Hooks都返回了totalNum，但是利用ES6对象解构很轻松给变量重命名