網上討論的文章已經很多了，這里舉一個簡單的例子來討論一下 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 的資料請關注好吧啦網其它相關文章！