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 相关文章推荐
获取网站跟路径的javascript代码(站点及虚拟目录)
Oct 20 Javascript
javascript使用smipleChart实现简单图表
Jan 02 Javascript
JS对字符串编码的几种方式使用指南
May 14 Javascript
js动态生成Html元素实现Post操作(createElement)
Sep 14 Javascript
BootStrap中Tab页签切换实例代码
May 30 Javascript
jquery表单插件Autotab使用方法详解
Jun 24 Javascript
JQuery和HTML5 Canvas实现弹幕效果
Jan 04 Javascript
微信小程序-getUserInfo回调的实例详解
Oct 27 Javascript
Angular父组件调用子组件的方法
Apr 02 Javascript
Vue使用json-server进行后端数据模拟功能
Apr 17 Javascript
ES6箭头函数和扩展实例分析
May 23 Javascript
小程序实现上传视频功能
Aug 18 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数组函数序列之array_push() 数组尾部添加一个或多个元素(入栈),返回新长度。
2011/11/07 PHP
PHP中if和or运行效率对比
2014/12/12 PHP
使用php+swoole对client数据实时更新(一)
2016/01/07 PHP
PHP反射API示例分享
2016/10/08 PHP
php车辆违章查询数据示例
2016/10/14 PHP
PHP进阶学习之Geo的地图定位算法详解
2019/06/19 PHP
javascript 正则替换 replace(regExp, function)用法
2010/05/22 Javascript
Javascript计算两个marker之间的距离(Google Map V3)
2013/04/26 Javascript
通过隐藏iframe实现文件下载的js方法介绍
2014/02/26 Javascript
jquery+css3打造一款ajax分页插件(自写)
2014/06/18 Javascript
JavaScript实现广告的关闭与显示效果实例
2015/07/02 Javascript
jQuery中cookie插件用法实例分析
2015/12/04 Javascript
JS+JSP通过img标签调用实现静态页面访问次数统计的方法
2015/12/14 Javascript
有关jquery与DOM节点操作方法和属性记录
2016/04/15 Javascript
AngularJS入门教程之更多模板详解
2016/08/19 Javascript
详解AngularJS中ng-src指令的使用
2016/09/07 Javascript
switchery按钮的使用方法
2017/12/18 Javascript
vue.js 实现点击展开收起动画效果
2018/07/07 Javascript
微信小程序实现的图片保存功能示例
2019/04/24 Javascript
Node.js中console.log()输出彩色字体的方法示例
2019/12/01 Javascript
node.js中npm包管理工具用法分析
2020/02/14 Javascript
vue+element实现图片上传及裁剪功能
2020/06/29 Javascript
用Python实现一个简单的多线程TCP服务器的教程
2015/05/05 Python
python文件与目录操作实例详解
2016/02/22 Python
对django中foreignkey的简单使用详解
2019/07/28 Python
TensorFlow基于MNIST数据集实现车牌识别(初步演示版)
2019/08/05 Python
python编写猜数字小游戏
2019/10/06 Python
Python如何将模块打包并发布
2020/08/30 Python
Rockport乐步美国官网:风靡美国的白宫鞋
2016/11/24 全球购物
法国珠宝店:CLEOR
2017/01/29 全球购物
阿根廷在线宠物商店:Puppis
2018/03/23 全球购物
C# .NET面试题
2015/11/28 面试题
教师批评与自我批评材料
2014/10/16 职场文书
2015年度优秀员工推荐信
2015/03/23 职场文书
收入证明范本
2015/06/12 职场文书
Flask使用SQLAlchemy实现持久化数据
2021/07/16 Python