自定义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中的逻辑更清楚易懂。