开启掘金成长之旅!这是我参与「掘金日新计划 · 12 月更文挑战」的第25天,点击查看活动详情
前言
Hooks 在前端领域并没有明确定义,借用知乎大佬的定义:在 JS 里是 callback,事件驱动,集成定义一些可复用的方法。
Vue3 官方文档并没有对自定义 Hooks 做任何定义,却无处不在在使用这个技巧,很多开源项目也在用这个技巧,所以作为一个合格的 Vuer 学会自定义 Hooks 让 Composition Api 写起来更丰满是十分必要的!
Vue3 自定义 Hook
个人理解: 一些可复用的方法像钩子一样挂着,可以随时被引入和调用以实现高内聚低耦合的目标,应该都能算是 hook。
为什么要用自定义 Hook
结论: 就是为了让 Compoosition Api 更好用更丰满,让写 Vue3 更畅快!像写诗一样写代码! 其实这个问题更深意义是为什么 Vue3 比 Vue2 更好!无外呼性能大幅度提升,其实编码体验也是 Vue3 的优点 Composition Api的引入(解决Option Api在代码量大的情况下的强耦合) 让开发者有更好的开发体验。
个人理解: 但是这些所谓的提高开发体验都是需要开发者不断学习养成编码好习惯,同样是 Vue3 写 Compoosition Api 有的人就能写得和诗一样,有的人却能写得像💩一样(衷心希望每个开发者都有一颗对技术热衷的心,不要为了开发而开发,前人写翔让后人尝!抱歉最近因为维护老项目太多感慨)
请摆脱无脑 this 的思想
写 Vue3 请摆脱 Vue2 无脑 this 的思想
写 Vue2 中很多同学养成了 Option Api 无脑 this 的习惯,来到 Vue3 的 Composition Api 还是习惯性想用 this,更有人为了写 this 不惜引入 getCurrentInstance!这大可不必!
Composition Api 的优点之一就是摆脱无脑 this 导致的强耦合,功能之间互相 this,变量和方法在各个方法混杂,无处不在的 this 是强耦合的,虽然方便,但是碎片化的 option api 后期维护是麻烦的。
我相信写 Vue2 的同学,一定深有感触,一个组件下定义大量变和大量方法,方法嵌套方法,方法之间互相共享变量,维护这样的代码,看似容易理解的 Option Api 写法,我们需要在 methos、data、template 之间来回切,Option Api 这种写法,代码量和功能小巧时是十分简单明了的,但是代码量一多,功能一复杂,我相信 review 代码的时候头都痛。
相对的 Composition Api 在功能复杂、代码量巨大的组件下,我们配合自定义 Hooks,将代码通过功能分块写,响应变量和方法在一起定义和调用,这样后期我们改功能 A 只需要关注功能A块下的代码,不会像 Vue2 在 Option Api 需要同时关注 methos 和 data。