vue3.0 的 Composition API 的使用示例

网上讨论的文章已经很多了，这里举一个简单的例子来讨论一下 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 的资料请关注我们其它相关文章！

赞 (0)

相关推荐

  • 浅谈Vue3.0新版API之composition-api入坑指南

    关于VUE3.0 由于vue3.0语法跟vue2.x的语法几乎是完全兼容的,本文主要介绍了如何使用composition-api,主要分以下几个方面来讲 使用vite体验vue3.0 composition-api解决了什么问题 语法糖介绍 vite的安装使用 vite仓库地址 https://github.com/vuejs/vite 上面有详细的安装使用教程,按照步骤安装即可 composition-api解决了什么问题 使用传统的option配置方法写组件的时候问题,随着业务复杂度越来越高

  • vue项目打包为APP,静态资源正常显示,但API请求不到数据的操作

    Vue项目通过Hbuild打包为APP后,静态文件正常显示,但并没有像开发时那样请求到数据. 这是为什么?因为APP并没有跨域,不存在跨域一说. 我们在开发的时候,js在不同的域之间进行数据传输或通信,所以会给项目设置代理来跨域 config下的index.js 比如这个 proxyTable: { '/api':{ target: 'http://XXX/xxx/v3', changeOrigin: true, pathRewrite: { '^/api': '' } } } 在开发时这样做是

  • 详解Vue3 Composition API中的提取和重用逻辑

    Vue3 Composition API可以在大型项目中更好地组织代码.然儿,随着使用几种不同的选项属性切换到单一的setup 方法,许多开发人员面临的问题是-- 这会不会更混乱,因为一切都在一个方法中 乍一看可能很容易,但是实际上只需要花一点点时间来编写可重用的模块化代码. 让我们来看看如何做到这一点. 问题 Vue.js 2.x 的 Options API 是一种非常直观的分隔代码的方法 export default { data () { return { articles: [], se

  • 浅谈Vue3 Composition API如何替换Vue Mixins

    想在你的Vue组件之间共享代码?如果你熟悉Vue 2 则可能知道使用mixin,但是新的Composition API 提供了更好的解决方案. 在本文中,我们将研究mixins的缺点,并了解Composition API如何克服它们,并使Vue应用程序具有更大的可伸缩性. 回顾Mixins功能 让我们快速回顾一下mixins模式,因为对于下一部分我们将要讲到的内容,请务必将其放在首位. 通常,Vue组件是由一个JavaScript对象定义的,它具有表示我们所需功能的各种属性--诸如 data,m

  • Vue3新特性之在Composition API中使用CSS Modules

    在 Vue 3 Composition API 最近的一次 beta 升级中,无论是 Vue 3 本 3 库 vue-next,还是面向 Vue 2 过渡用的 @vue/composition-api 库中,都同步更新了一个 useCSSModule 函数 -- 用来在使用了 Composition API 的 Vue 实例中,支持 CSS Modules 语法. 首先来看看什么是 CSS Modules: CSS Modules CSS Modules 是一种 CSS 的模块化和组合系统.vu

  • SpringBoot+Vue前后端分离实现请求api跨域问题

    前言 最近过年在家无聊,刚好有大把时间学习Vue,顺便做了一个增删查改+关键字匹配+分页的小dome,可是使用Vue请求后端提供的Api的时候确发现一个大问题,前后端分离了,但是请求的时候也就必定会有跨域这种问题,那如何解决呢? 前端解决方案 思路:由于Vue现在大多数项目但是用脚手架快速搭建的,所以我们可以直接在项目中创建一个vue.config.js的配置文件,然后在里面配置proxy代理来解决,话不多说,直接上代码 module.exports = { devServer: { proxy

  • 使用Vue Composition API写出清晰、可扩展的表单实现

    表单是前端开发中最棘手的部分之一,您可能会在其中发现很多混乱的代码. 基于组件的框架,如 Vue.js,在提高前端代码的可扩展性方面做了很多工作,但是表单的问题仍然存在. 在本教程中,将向您展示新的 Vue Composition API(即将加入 Vue 3 中)如何使表单代码更清晰.更具可扩展性. 为什么表单代码经常很烂 像 Vue 这种基于组件的框架的关键设计模式是组件组合. 这种模式将应用程序的特性抽象为独立的.单一用途的组件,这些组件通信使用 props 和事件的方式. 然而,在此模式

  • vue3.0 的 Composition API 的使用示例

    网上讨论的文章已经很多了,这里举一个简单的例子来讨论一下 Composition API 的用法,具体问题才好具体讨论嘛. 假如我们要做一个论坛的讨论列表和分页,以前是把需要的数据都放在data里面,事件都放在methods 里面,代码少的话还好分辨,如果代码多了,看着就头疼了. 现在vue3.0可以按照业务关系分成多个管理类来管理这些代码. 比如帖子列表+发帖功能,我们先做一个模板: (简单表示一下,不做美化处理了) <template> <div> 论坛列表 <div v

  • 详解vue3.0 的 Composition API 的一种使用方法

    网上讨论的文章已经很多了,这里举一个简单的例子来讨论一下 Composition API 的用法,具体问题才好具体讨论嘛. 假如我们要做一个论坛的讨论列表和分页,以前是把需要的数据都放在data里面,事件都放在methods 里面,代码少的话还好分辨,如果代码多了,看着就头疼了. 现在vue3.0可以按照业务关系分成多个管理类来管理这些代码. 比如帖子列表+发帖功能,我们先做一个模板: (简单表示一下,不做美化处理了) <template> <div> 论坛列表 <div v

  • Vue3进阶主题Composition API使用详解

    目录 什么是Composition API 为什么Vue3推荐使用Composition API 总结 什么是Composition API Composition API 是 Vue3 中引入的一种新的 API 风格,旨在提高代码的可读性.可维护性和可重用性.Composition API 不同于 Vue2 中的 Options API,它采用了一种基于函数的编程方式,将组件内的逻辑分解成更小的可组合函数单元,以实现更加灵活和高效的代码组织方式. 为什么Vue3推荐使用Composition

  • vue3.0生命周期的示例代码

    在组件化的框架中,比如Angular.React或Vue,都为组件定义了生命周期这个概念,每个组件实例在被创建时都要经过一系列的初始化过程,例如:需要设置数据监听.编译模板.将实例挂载到 DOM 并在数据变化时更新 DOM 等.同时,在这个过程中也会运行一些叫做生命周期钩子的函数,它们提供给用户在组件的不同阶段添加自己的代码的机会. 使用过Vue2.x的朋友肯定对它的生命周期钩子很熟悉了,因为在实际的开发过程中我们多多少少会用到他们,比如 created.mounted.destoryed等等.

  • Vue3 Composition API的使用简介

    Vue3 Composition API的使用简介

    vue3.0在7月发布了rc版本,vue-cli4.5后也支持选择vue3作为备选版本可以体验了,vue3的正式版本相必也不远了.学不动了呀!!!! 相比vue2.0版本(Option API),Composition API(组合API)算是3.0的重大变更之一了. 概述 Composition API 主要灵感来源于React Hooks,目的是通过一组低侵入式的.函数式的 API,使得我们能够更灵活地「组合」组件的逻辑. 示例 <template> <div>{{count}

  • Composition Api封装业务hook思路示例分享

    Composition Api封装业务hook思路示例分享

    目录 前序 hook的场景 useGetJobList 共同 思路历程 心得 utils 和 hook 的区别 总结 前序 近期公司的新项目一个小程序,一直想尝试 Vue3 开发项目,苦于自己的驱动力不行,学的零零碎碎的.因此小程序我直接跟项目组长说我要使用 uniapp 的 Vue3 版进行开发.开发中遇到业务场景相同的,就分装了一个hook 来减少代码,易于维护. hook的场景 这种获取列表的需求很常见吧,在我这个小程序中有3处使用到了获取列表的功能.分别是: 我的收藏.已投递岗位.未投递

  • Composition API思想封装NProgress示例详解

    目录 正文 安装和基本使用 自己实现一个 正文 最近在用vue3封装一套后台管理模版,自然会用到NProgress.如果你没有用过,你可以看一下instagram,youtube这些网站,它们都有一个顶部加载条,这也是现在最流行的网页加载条. 于是我发现了@vueuse/integrations中的useNProgress,我们先看一下Anthony Fu大神如何去封装的,然后咱们再去试着自己实现一下. 安装和基本使用 npm i nprogress @vueuse/integrations 基

随机推荐