为什么我推荐vuers都来写composition-api

一、常用语法上的不同

1.data

为什么我推荐vuers都来写composition-api_第1张图片

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

为什么我推荐vuers都来写composition-api_第2张图片

二、使用组合式api的好处

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

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

为什么我推荐vuers都来写composition-api_第3张图片

Options API

为什么我推荐vuers都来写composition-api_第4张图片

Composition API

为什么我推荐vuers都来写composition-api_第5张图片

项目上的例子

为什么我推荐vuers都来写composition-api_第6张图片

为什么我推荐vuers都来写composition-api_第7张图片

为什么我推荐vuers都来写composition-api_第8张图片

为什么我推荐vuers都来写composition-api_第9张图片

2.逻辑复用

为什么我推荐vuers都来写composition-api_第10张图片

为什么我推荐vuers都来写composition-api_第11张图片

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

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

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

为什么我推荐vuers都来写composition-api_第12张图片为什么我推荐vuers都来写composition-api_第13张图片

getCertificateList

为什么我推荐vuers都来写composition-api_第14张图片

useSearch

为什么我推荐vuers都来写composition-api_第15张图片

为什么我推荐vuers都来写composition-api_第16张图片

useBoolean

为什么我推荐vuers都来写composition-api_第17张图片

为什么我推荐vuers都来写composition-api_第18张图片

为什么我推荐vuers都来写composition-api_第19张图片

为什么我推荐vuers都来写composition-api_第20张图片

useAsync

 title=

为什么我推荐vuers都来写composition-api_第21张图片

库函数

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

你可能感兴趣的:(vue3)