網(wǎng)上討論的文章已經(jīng)很多了，這里舉一個(gè)簡(jiǎn)單的例子來(lái)討論一下 Composition API 的用法，具體問(wèn)題才好具體討論嘛。

假如我們要做一個(gè)論壇的討論列表和分頁(yè)，以前是把需要的數(shù)據(jù)都放在data里面，事件都放在methods 里面，代碼少的話還好分辨，如果代碼多了，看著就頭疼了。現(xiàn)在vue3.0可以按照業(yè)務(wù)關(guān)系分成多個(gè)管理類來(lái)管理這些代碼。

比如帖子列表+發(fā)帖功能，我們先做一個(gè)模板：（簡(jiǎn)單表示一下，不做美化處理了）

<template> <div> 論壇列表 <div v-for='(item, index) in articleList' :key='’articleList’ + index'> {{index}}:{{item.title}} {{item.viewCount}} </div> <div><!--分頁(yè)--> <a-pagination v-model:current='acticleCurrent' :total='50' show-less-items /> </div> </div> <div style='width:400px'> 發(fā)個(gè)帖子 標(biāo)題：<a-input v-model:value='articleForm.title'/> 內(nèi)容：<a-input v-model:value='articleForm.content'/> <a-button type='dashed' @click='sendArticle' >發(fā)表帖子</a-button> </div></template>

上面的模板部分沒(méi)有啥區(qū)別，變化部分在js代碼。我們可以先寫(xiě)一個(gè)帖子列表的管理類，包含帖子列表的數(shù)據(jù)，和依據(jù)頁(yè)號(hào)加載數(shù)據(jù)的方法。

代碼如下：

// 帖子列表的管理類const manageArticleList = () => { const articleList = ref([ { title: ’這是帖子’, viewCount: 100, sendTime: ’2020-10-20’ } ]) // 依據(jù)頁(yè)號(hào)加載帖子列表 const loagActicleListByPage = (pageIndex) => { // alert(pageIndex) articleList.value = [ { title: ’這是新加載的帖子帖子’, viewCount: 100 + parseInt(pageIndex), sendTime: ’2020-10-20’ } ] } return { articleList, loagActicleListByPage }}

再寫(xiě)一個(gè)分頁(yè)的管理類（使用antdv的a-pagination），代碼如下

// 分頁(yè)管理類const manageActiclePage = () => { const acticleCurrent = ref(0) return { acticleCurrent }}

最后我們可以在setup里面把這兩個(gè)管理類給結(jié)合起來(lái)，一起返回給view。

export default { setup () { // 引入查詢管理 const { articleList, loagActicleListByPage } = manageArticleList() // 引入分頁(yè)管理 const { acticleCurrent } = manageActiclePage() // 監(jiān)聽(tīng)頁(yè)號(hào)變化，加載數(shù)據(jù) watch(acticleCurrent, (newValue, oldValue) => { loagActicleListByPage(newValue) }) // 返回給view return { articleList, acticleCurrent, } }}

在setup里面，監(jiān)聽(tīng) acticleCurrent 頁(yè)號(hào)變化，調(diào)用 manageArticleList 的 loagActicleListByPage 事件，加載數(shù)據(jù)。當(dāng)然也可以有其他的組合方式，這里只是舉個(gè)簡(jiǎn)單的例子。

這樣代碼可以根據(jù)業(yè)務(wù)邏輯分散開(kāi)，便于擴(kuò)展和維護(hù)，比如我們要加一個(gè)查詢功能，那么可以在 manageArticleList 里面加個(gè) loagActicleListByQuery 的事件。

最后的效果就是，代碼依據(jù)業(yè)務(wù)邏輯，完全分散成多個(gè)管理類，setup只需要負(fù)責(zé)加載和整合即可，setup里面也不會(huì)有很多代碼。

管理類應(yīng)該可以寫(xiě)在單獨(dú)的js文件里面，比如我們把表單的js代碼寫(xiě)在單獨(dú)的js文件里面：(bbs-manageArticleForm.js)

import { ref } from ’vue’// 帖子列表的管理類export function manageArticleForm () { const modelForm = ref( { title: ’這是帖子標(biāo)題’, content: ’帖子內(nèi)容’, sendTime: ’2020-10-20’ } ) // 依據(jù)頁(yè)號(hào)加載帖子列表 const sendArticle = () => { // 調(diào)用axios 向后端提交 alert(’假裝發(fā)表成功了。。。’) } return { articleForm: modelForm, sendArticle }}

然后在views里面用import引入

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

在setup里面設(shè)置如下：

setup() { ...... // 表單 const { articleForm, sendArticle } = manageArticleForm() // 返回給view return { ...... articleForm, sendArticle, ...... }}

寫(xiě)在單獨(dú)的js文件里面，意味著可以復(fù)用。不僅這里可以用，其他的地方也可以直接拿過(guò)來(lái)用。好吧，這個(gè)表單基本沒(méi)啥可以好復(fù)用的，這里只是舉個(gè)例子。

以上就是vue3.0 的 Composition API 的使用示例的詳細(xì)內(nèi)容，更多關(guān)于vue3.0 的 Composition API 的資料請(qǐng)關(guān)注好吧啦網(wǎng)其它相關(guān)文章！