網上討論的文章已經很多了，這裡舉一個簡單的例子來討論一下 Composition API 的用法，具體問題才好具體討論嘛。 > 假如我們要做一個論壇的討論列表和分頁，以前是把需要的資料都放在data裡面，事件都放在methods 裡面，程式碼少的話還好分辨，如果程式碼多了，看著就頭疼了。 現在vue3.0可以按照業務關係分成多個管理類來管理這些程式碼。 比如帖子列表+發帖功能，我們先做一個模板： （簡單表示一下，不做美化處理了） ```html ``` 上面的模板部分沒有啥區別，變化部分在js程式碼。 我們可以先寫一個帖子列表的管理類，包含帖子列表的資料，和依據頁號載入資料的方法。 程式碼如下： ```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），程式碼如下 ```js // 分頁管理類 const manageActiclePage = () => { const acticleCurrent = ref(0) return { acticleCurrent } } ``` 最後我們可以在setup裡面把這兩個管理類給結合起來，一起返回給view。 ```js 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) ```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引入 ```js import { manageArticleForm } from './bbs-manageArticleForm.js' ``` 在setup裡面設定如下： ```js setup() { ...... // 表單 const { articleForm, sendArticle } = manageArticleForm() // 返回給view return { ...... articleForm, sendArticle, ...... } } ``` 寫在單獨的js檔案裡面，意味著可以複用。不僅這裡可以用，其他的地方也可以直接拿過來用。好吧，這個表單基本沒啥可以好複用的，這裡只是舉個