美文网首页
@vue/compostion-api入门

@vue/compostion-api入门

作者: 桃花兰岛主 | 来源:发表于2021-02-03 15:41 被阅读0次

一、常用语法上的不同

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

相关文章

  • @vue/compostion-api入门

    一、常用语法上的不同 1.data 2.所有的内容包在setup里面,在template使用的数据和方法需要ret...

  • Vue 入门到实战课程

    Vue 入门到实战课程 说明 课程 VueCli3.0-小白入门 Vue2.0 小白入门教程 Vue 项目实战 在...

  • VUE系列教程目录

    VUE系列教程目录 vue入门之路篇系列教程: vue最简单的入门教程+实战+Vue2+VueRouter2+we...

  • VUE系列教程目录

    VUE系列教程目录 vue入门之路篇系列教程:vue最简单的入门教程+实战+Vue2+VueRouter2+web...

  • 01vue-安装vue

    资源 1.Vue.js2.0从入门到放弃---入门实例(一)2.Vue.js入门学习(一)3.Vue官方中文Api...

  • Vue.js状态管理工具Vuex快速上手

    Vue2简单入门 Vue.js再入门 Vue.js使用vue-router构建单页应用 Vue.js状态管理工具V...

  • Vue2简单入门

    Vue2简单入门 Vue.js再入门 Vue.js使用vue-router构建单页应用 Vue.js状态管理工具V...

  • Vue.js再入门

    Vue2简单入门 Vue.js再入门 Vue.js使用vue-router构建单页应用 Vue.js状态管理工具V...

  • Vue.js使用vue-router构建单页应用

    Vue2简单入门 Vue.js再入门 Vue.js使用vue-router构建单页应用 Vue.js状态管理工具V...

  • vue基础入门

    vue基础入门

网友评论

      本文标题:@vue/compostion-api入门

      本文链接:https://www.haomeiwen.com/subject/ynfmtltx.html