@vue/compostion-api入门

一、常用语法上的不同

1.data

image.png

2.所有的内容包在setup里面，在template使用的数据和方法需要return

image.png

二、使用组合式api的好处

1.按功能划分，便于维护

按照原来的写法，实现一个功能，我要写在不同的生命周期里面，不聚合~

image

Options API

image.png

Composition API

image.png

项目上的例子

image.png

image.png

image.png

image.png

2.逻辑复用

image.png

image

三、如何封装一个逻辑函数

其实逻辑复用函数简单理解就是 有状态的函数

比函数多了状态，比组件少了视图。

image.png

image.png

getCertificateList

image.png

useSearch

image.png

image.png

useBoolean

image.png

image.png

image.png

image.png

useAsync

image.png

image.png

库函数

1.https://github.com/vueuse/vueuse

2.https://github.com/pikax/vue-composable

3.https://github.com/dewfall123/ahooks-vue

友情链接：

1.react hooks

助力拥抱react hooks：https://zhuanlan.zhihu.com/p/103150605?utm_source=wechat_session

react hooks函数库：https://github.com/alibaba/hooks

2.composition-api

作者分享：https://github.com/Bin-FE/binfe-salon-ppt

github：https://github.com/vuejs/composition-api

官网文档：https://v3.cn.vuejs.org/guide/composition-api-introduction.html

快速上手文档：https://mp.weixin.qq.com/s/GaII_4o69SGpI7IPeIMZSw