網上討論的文章已經很多了，這里舉一個簡單的例子來討論一下 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 內容請搜索好吧啦網以前的文章或繼續瀏覽下面的相關文章希望大家以后多多支持好吧啦網！