Vue3 中常用的 Composition(组合)API- 自定义 hook 函数

自定义 hook 函数

hook(钩住)本质上是一个函数，把 setup 函数中使用的 Composition API 进行封装成自定义的公共逻辑，如果其他组件想要使用这个逻辑直接引入 hook 即可，类似 vue2 中的 mixin(混入)

hook 把组合式 API 体现的淋漓尽致，下面通过案例演示一下 hook 的使用，一起感受下 hook 函数的强大以及什么叫组合式 API。

编写案例

现在想编写一个鼠标点击页面，展示对应 x,y 之的功能。

虽然效果实现了，但是完全如果哪天某一个组件也想要这个功能呢，难道要重新写一遍吗，这个时候就体现出来 hook 的作用了，我们完全可以把这些逻辑写在 hook 中，哪些组件想要使用这些逻辑，直接引入这个 hook 文件就行

编写 hook 文件

一般编写 hook 文件，都会在 src 里面定义一个 hooks 文件，里面专门存放 hook 函数，这样文件夹就命名好了

关于文件名，理论来说是可以随便命名，但是为了规范，hook 文件有一个特点：一般会以 usrxxx 开头，像我们这个 hook 逻辑，就是针对坐标点进行操作的，所以就可以命名为 usePoint。

然后就把公共的逻辑放到一个函数里面返回即可，需要什么就在 hook 中引入即可

这样一个简单的 hook 函数自定义逻辑就完成了，我们只需要引入它使用即可！

注意不要忘了把这个 hook 文件进行暴露！！！

引入 hook 文件并使用

直接引入 hook 文件，因为 hook 本质就是一个函数，并且有返回值，所以我们可以直接调用接收返回值

我们只关心 hook 的返回结果，并不关心 hook 里面的逻辑

效果也是一样的

这个时候如果有一个组件也想实现这个功能，那也是一样的引入 hook 即可

自定义 hook 函数总结

• 什么是 hook？—— 本质是一个函数，把 setup 函数中使用的 Composition API 进行了封装。

• 类似于 vue2.x 中的 mixin。

• 自定义 hook 的优势: 复用代码, 让 setup 中的逻辑更清楚易懂。