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