vue3.0 的 Composition API 的使用示例


Posted in Javascript onOctober 26, 2020

网上讨论的文章已经很多了,这里举一个简单的例子来讨论一下 Composition API 的用法,具体问题才好具体讨论嘛。

假如我们要做一个论坛的讨论列表和分页,以前是把需要的数据都放在data里面,事件都放在methods 里面,代码少的话还好分辨,如果代码多了,看着就头疼了。
现在vue3.0可以按照业务关系分成多个管理类来管理这些代码。

比如帖子列表+发帖功能,我们先做一个模板:
(简单表示一下,不做美化处理了)

<template>
 <div>
  论坛列表
  <div v-for="(item, index) in articleList" :key="'articleList' + index">
  {{index}}:{{item.title}}
  {{item.viewCount}}
  </div>
  <div><!--分页-->
  <a-pagination v-model:current="acticleCurrent" :total="50" show-less-items />
  </div>
 </div>
 <div style="width:400px">
  发个帖子
  标题:<a-input v-model:value="articleForm.title"/>
  内容:<a-input v-model:value="articleForm.content"/>
  <a-button type="dashed" @click="sendArticle" >发表帖子</a-button>
 </div>
</template>

上面的模板部分没有啥区别,变化部分在js代码。
我们可以先写一个帖子列表的管理类,包含帖子列表的数据,和依据页号加载数据的方法。

代码如下:

// 帖子列表的管理类
const manageArticleList = () => {
 const articleList = ref([
 {
 title: '这是帖子',
 viewCount: 100,
 sendTime: '2020-10-20'
 }
 ])

 // 依据页号加载帖子列表
 const loagActicleListByPage = (pageIndex) => {
 // alert(pageIndex)
 articleList.value = [
 {
 title: '这是新加载的帖子帖子',
 viewCount: 100 + parseInt(pageIndex),
 sendTime: '2020-10-20'
 }
 ]
 }

 return {
 articleList,
 loagActicleListByPage
 }
}

再写一个分页的管理类(使用antdv的a-pagination),代码如下

// 分页管理类
const manageActiclePage = () => {
 const acticleCurrent = ref(0)

 return {
 acticleCurrent
 }
}

最后我们可以在setup里面把这两个管理类给结合起来,一起返回给view。

export default {
 setup () {
 // 引入查询管理
 const { articleList, loagActicleListByPage } = manageArticleList()
 // 引入分页管理
 const { acticleCurrent } = manageActiclePage()
 
 // 监听页号变化,加载数据
 watch(acticleCurrent, (newValue, oldValue) => {
 loagActicleListByPage(newValue)
 })
 // 返回给view
 return {
 articleList,
 acticleCurrent,
 }
 }
}

在setup里面,监听 acticleCurrent 页号变化,调用 manageArticleList 的 loagActicleListByPage 事件,加载数据。
当然也可以有其他的组合方式,这里只是举个简单的例子。

这样代码可以根据业务逻辑分散开,便于扩展和维护,比如我们要加一个查询功能,那么可以在 manageArticleList 里面加个 loagActicleListByQuery 的事件。

最后的效果就是,代码依据业务逻辑,完全分散成多个管理类,setup只需要负责加载和整合即可,setup里面也不会有很多代码。

管理类应该可以写在单独的js文件里面,比如我们把表单的js代码写在单独的js文件里面:(bbs-manageArticleForm.js)

import { ref } from 'vue'

// 帖子列表的管理类
export function manageArticleForm () {
 const modelForm = ref(
 {
 title: '这是帖子标题',
 content: '帖子内容',
 sendTime: '2020-10-20'
 }
 )
 // 依据页号加载帖子列表
 const sendArticle = () => {
 // 调用axios 向后端提交
 alert('假装发表成功了。。。')
 }
 return {
 articleForm: modelForm,
 sendArticle
 }
}

然后在views里面用import引入

import { manageArticleForm } from './bbs-manageArticleForm.js'

在setup里面设置如下:

setup() {
 ......
 // 表单
 const { articleForm, sendArticle } = manageArticleForm()

 // 返回给view
 return {
 ......
 articleForm,
 sendArticle,
 ......
 }
}

写在单独的js文件里面,意味着可以复用。不仅这里可以用,其他的地方也可以直接拿过来用。好吧,这个表单基本没啥可以好复用的,这里只是举个例子。

以上就是vue3.0 的 Composition API 的使用示例的详细内容,更多关于vue3.0 的 Composition API 的资料请关注三水点靠木其它相关文章!

Javascript 相关文章推荐
JQuery Tab选项卡效果代码改进版
Apr 01 Javascript
JavaScript中也使用$美元符号来代替document.getElementById
Jun 19 Javascript
return false,对阻止事件默认动作的一些测试代码
Nov 17 Javascript
jQuery动态地获取系统时间实现代码
May 24 Javascript
JavaScript实现多维数组的方法
Nov 20 Javascript
JS连连看源码完美注释版(推荐)
Dec 09 Javascript
json实现前后台的相互传值详解
Jan 05 Javascript
jQuery实现带有动画效果的回到顶部和底部代码
Nov 04 Javascript
基于JavaScript操作DOM常用的API小结
Dec 01 Javascript
基于bootstrop常用类总结(推荐)
Sep 11 Javascript
解决Vue 刷新页面导航显示高亮位置不对问题
Dec 25 Javascript
js实现mp3录音通过websocket实时传送+简易波形图效果
Jun 12 Javascript
Vue中用JSON实现刷新界面不影响倒计时
Oct 26 #Javascript
jQuery实现简单评论区功能
Oct 26 #jQuery
vue.js封装switch开关组件的操作
Oct 26 #Javascript
Node.js利用Express实现用户注册登陆功能(推荐)
Oct 26 #Javascript
vue render函数动态加载img的src路径操作
Oct 26 #Javascript
vue实现简单的登录弹出框
Oct 26 #Javascript
让你30分钟快速掌握vue3教程
Oct 26 #Javascript
You might like
探讨:如何使用PHP实现计算两个日期间隔的年、月、周、日数
2013/06/13 PHP
php获取汉字拼音首字母的方法
2015/10/21 PHP
php+mysql查询实现无限下级分类树输出示例
2016/10/03 PHP
探究Laravel使用env函数读取环境变量为null的问题
2016/12/06 PHP
用js实现手把手教你月入万刀(转贴)
2007/11/07 Javascript
Jquery ajax传递复杂参数给WebService的实现代码
2011/08/08 Javascript
js兼容的placeholder属性详解
2013/08/18 Javascript
jquery内置验证(validate)使用方法示例(表单验证)
2013/12/04 Javascript
jQuery实现的一个tab切换效果内部还嵌有切换
2014/08/10 Javascript
jquery实现可自动判断位置的弹出层效果代码
2015/10/12 Javascript
AngularJS表达式讲解及示例代码
2016/08/16 Javascript
jQuery弹出层后禁用底部滚动条(移动端关闭回到原位置)
2016/08/29 Javascript
jQuery图片轮播实现并封装(一)
2016/12/03 Javascript
servlet+jquery实现文件上传进度条示例代码
2017/01/25 Javascript
使用vue官方提供的模板vue-cli搭建一个helloWorld案例分析
2018/01/16 Javascript
vue.js中created方法作用
2018/03/30 Javascript
Vue项目分环境打包的实现步骤
2018/04/02 Javascript
vue多个元素的样式选择器问题
2019/11/29 Javascript
如何使用JS console.log()技巧提高工作效率
2020/10/14 Javascript
python实现线程池的方法
2015/06/30 Python
python3.5使用tkinter制作记事本
2016/06/20 Python
python3 flask实现文件上传功能
2020/03/20 Python
简单了解Python变量作用域正确使用方法
2020/06/12 Python
解决tensorflow/keras时出现数组维度不匹配问题
2020/06/29 Python
CSS3中动画属性transform、transition和animation属性的区别
2016/09/25 HTML / CSS
澳大利亚女性快速时尚零售商:Ally Fashion
2018/04/25 全球购物
幼师专业求职推荐信
2013/11/08 职场文书
毕业生如何写自荐信
2014/03/26 职场文书
党员群众路线承诺书
2014/05/20 职场文书
教师求职信范文
2014/05/24 职场文书
向国旗敬礼活动总结范文2014
2014/09/27 职场文书
领导班子在批评与自我批评座谈会上的发言
2014/09/28 职场文书
大学生简历自我评价2015
2015/03/03 职场文书
2019职场单身人才调研报告:互联网行业单身比例最高
2019/08/07 职场文书
Nginx配置https原理及实现过程详解
2021/03/31 Servers
总结Python使用过程中的bug
2021/06/18 Python