详解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队列控制方法详解queue()/dequeue()/clearQueue()
Dec 02 Javascript
自己写了一个展开和收起的多更能型的js效果
Mar 05 Javascript
JSON传递bool类型数据的处理方式介绍
Sep 18 Javascript
一张表格告诉你windows.onload()与$(document).ready()的区别
May 16 Javascript
Javascript基础教程之数据类型 (字符串 String)
Jan 18 Javascript
canvas的神奇用法
Feb 03 Javascript
vue.js实现条件渲染的实例代码
Jun 22 Javascript
jQuery+css last-child实现选择最后一个子元素操作示例
Dec 10 jQuery
vue2.0 如何在hash模式下实现微信分享
Jan 22 Javascript
Vue.extend实现挂载到实例上的方法
May 01 Javascript
vue 内联样式style中的background用法说明
Aug 05 Javascript
Vite + React从零开始搭建一个开源组件库
Jun 25 Javascript
vue3.0 加载json的方法(非ajax)
Oct 26 #Javascript
Vue+Element自定义纵向表格表头教程
Oct 26 #Javascript
vue3.0 的 Composition API 的使用示例
Oct 26 #Javascript
Vue中用JSON实现刷新界面不影响倒计时
Oct 26 #Javascript
jQuery实现简单评论区功能
Oct 26 #jQuery
vue.js封装switch开关组件的操作
Oct 26 #Javascript
Node.js利用Express实现用户注册登陆功能(推荐)
Oct 26 #Javascript
You might like
收音机另类DIY - 纸巾盒做外壳
2021/03/02 无线电
在MongoDB中模拟Auto Increment的php代码
2011/03/06 PHP
PHP IDE PHPStorm配置支持友好Laravel代码提示方法
2015/05/12 PHP
纯php生成随机密码
2015/10/30 PHP
详解PHP数组赋值方法
2015/11/07 PHP
PHP自带方法验证邮箱是否存在
2016/02/01 PHP
smarty学习笔记之常见代码段用法总结
2016/03/19 PHP
TP5框架实现的数据库备份功能示例
2020/04/05 PHP
js计算页面刷新的次数
2009/07/20 Javascript
javascript 用原型继承来实现对象系统
2010/03/22 Javascript
Extjs gridpanel 出现横向滚动条问题的解决方法
2011/07/04 Javascript
jQuery实现切换页面布局使用介绍
2011/10/09 Javascript
jQuery的$.proxy()应用示例介绍
2014/04/03 Javascript
Bootstrap入门书籍之(一)排版
2016/02/17 Javascript
D3.js实现文本的换行详解
2016/10/14 Javascript
利用CSS、JavaScript及Ajax实现图片预加载的方法
2016/11/29 Javascript
如何使用headjs来管理和异步加载js
2016/11/29 Javascript
jquery实现下拉框多选方法介绍
2017/01/03 Javascript
jQuery实现的页面详情展开收起功能示例
2018/06/11 jQuery
node+express框架中连接使用mysql(经验总结)
2018/11/10 Javascript
详解JavaScript作用域、作用域链和闭包的用法
2020/09/03 Javascript
Python编写屏幕截图程序方法
2015/02/18 Python
python常见的格式化输出小结
2016/12/15 Python
Python 机器学习库 NumPy入门教程
2018/04/19 Python
详解利用python+opencv识别图片中的圆形(霍夫变换)
2019/07/01 Python
介绍一款python类型检查工具pyright(推荐)
2019/07/03 Python
Python递归调用实现数字累加的代码
2020/02/25 Python
css3类选择器之结合元素选择器和多类选择器用法
2017/03/09 HTML / CSS
html5使用window.postMessage进行跨域实现数据交互的一次实战
2021/02/24 HTML / CSS
波兰家具和室内装饰品购物网站:Vivre
2018/04/10 全球购物
销售内勤岗位职责
2014/04/15 职场文书
2014政府领导班子对照检查材料思想汇报(3篇)
2014/09/26 职场文书
计划生育诚信协议书
2014/11/02 职场文书
python for循环赋值问题
2021/06/03 Python
Window server中安装Redis的超详细教程
2021/11/17 Redis
如何通过cmd 连接阿里云服务器
2022/04/18 Servers