🚽

如何结合composition api写hooks

composition api 是vue3对于组件模块化,结构化的一个新的策略相比于vue2的mixin要好用太多
 

hooks的好处是什么

关于在react上的hooks
关于在react上的hooks
 

对于一个功能是否能被抽离出来,应当满足以下三个特性

 
  1. 代码可抽象 类似utils
  1. 代码可移植
  1. 代码可解耦或者松散耦合
 
 
composition api的好处可以让我们对功能进行内聚,下面这个是我在掘金上看到的一个人制作的动画说明,很形象,地址是:https://juejin.cn/post/6890545920883032071
notion image
 

composition API 的优势

  • 相同逻辑的功能能组合在一起
  • 跟vue2的options api相比性能更好
  • 代码更干净,让代码在逻辑上更加有序,所以更易于阅读和理解。
  • 易于提取和导入功能并复用

使用composition api最大的好处就是让代码更加紧凑,避免过于碎片化

🪂
项目中的碎片化代码示例
♟️
二次封装业务组件
 
 
🏓
小技巧

一些hooks库推荐

AHooks

react的hooks库,里面不仅封装了工具类的还有一些业务组件类的hooks

VueUse

vue官方人马开发一个hooks库,里面封装了很多常见的hooks

ahooks-vue