前言
組合式 (Composition) API 的一大特點是“非常靈活”，但也因為非常靈活，每個開發都有自己的想法。加上專案的持續迭代導致我們的程式碼變得愈發混亂，最終到達無法維護的地步。本文是我這幾年使用組合式API的一些經驗總結，希望透過本文讓你也能夠寫出易維護、優雅的組合式API程式碼。
歐陽寫了一本開源電子書vue3編譯原理揭秘，這本書初中級前端能看懂。完全免費，只求一個star。
選項式API
vue2的選項式API因為每個選項都有固定的書寫位置（比如資料就放在data裡面，方法就放在methods裡面），所以我們只需要將程式碼放到對應的選項中就行了。
優點是因為已經固定了每個程式碼的書寫位置，所有人寫出來的程式碼風格都差不多。
缺點是當單個元件的邏輯複雜到一定程度時，程式碼就會顯得特別笨重，非常不靈活。
隨意的寫組合式API
vue3推出了組合式 (Composition) API，他的主要特點就是非常靈活。解決了選項式API不夠靈活的問題。但是靈活也是一把雙刃劍，因為每個開發的編碼水平不同。所以就出現了有的人使用組合式 (Composition) API寫出來的程式碼非常漂亮和易維護，有的人寫的程式碼確實很混亂和難易維護。
比如一個元件開始的時候還是規規矩矩的寫，所有的ref響應式變數放在一塊，所有的方法放在一塊，所有的computed計算屬性放在一塊。
但是隨著專案的不斷迭代 ，或者乾脆是換了一個人來維護。這時的程式碼可能就不是最開始那樣清晰了，比如新加的程式碼不管是ref、computed還是方法都放到一起去了。如下圖：
只有count1和count2時，程式碼看著還挺整齊的。但是隨著count3的程式碼加入後看著就比較凌亂了，後續如果再加count4的程式碼就會更加亂了。
有序的寫組合式API
為了解決上面的問題，所以我們約定了一個程式碼規範。同一種API的程式碼全部寫在一個地方，比如所有的props放在一塊、所有的emits放在一塊、所有的computed放在一塊。並且這些模組的程式碼都按照約定的順序去寫，如下圖：
隨著vue元件的程式碼增加，上面的方案又有新的問題了。
還是前面的那個例子比如有5個count的ref變數，對應的computed和methods也有5個。此時我們的vue元件程式碼量就很多了，比如此時我想看看computed1和increment1的邏輯是怎麼樣的。
因為computed1和increment1函式分別在檔案的computed和methods的程式碼塊處，computed1和increment1之間隔了幾十行程式碼，看完computed1的程式碼再跳轉去看increment1的程式碼就很痛苦。如下圖：
這時有小夥伴會說，抽成hooks唄。這裡有5個count，那麼就抽5個hooks檔案。像這樣的程式碼。如下圖：
一般來說抽取出來的hooks都是用來多個元件進行邏輯共享，但是我們這裡抽取出來的useCount檔案明顯只有這個vue元件會用他。達不到邏輯共享的目的，所以單獨將這些邏輯抽取成名為useCount的hooks檔案又有點不合適。
最終解決方案
我們不如將前面的方案進行融合一下，抽取出多個useCount函式放在當前vue元件內，而不是抽成單個hooks檔案。並且在多個useCount函式中我們還是按照前面約定的規範，按照順序去寫ref變數、computed、函式的程式碼。
最終得出的最佳實踐如下圖：
上面這種寫法有幾個優勢：
-
我們將每個
count的邏輯都抽取成單獨的useCount函式，並且這些函式都在當前vue檔案中，沒有將其抽取成hooks檔案。如果哪天useCount1中的邏輯需要給其他元件使用，我們只需要新建一個useCount檔案，然後直接將useCount1函式的程式碼移到新建的檔案中就可以了。 -
如果我們想檢視
doubleCount1和increment1中的邏輯，只需要找到useCount1函式，關於count1相關的邏輯都在這個函式里面，無需像之前那樣翻山越嶺跨越幾十行程式碼才能從doubleCount1的程式碼跳轉到increment1的程式碼。
總結
本文介紹了使用Composition API的最佳實踐，規則如下：
-
首先約定了一個程式碼規範，
Composition API按照約定的順序進行書寫（書寫順序可以按照公司程式碼規範適當調整）。並且同一種組合式API的程式碼全部寫在一個地方，比如所有的props放在一塊、所有的emits放在一塊、所有的computed放在一塊。 -
如果邏輯能夠多個元件複用就抽取成單獨的
hooks檔案。 -
如果邏輯不能給多個元件複用，就將邏輯抽取成
useXXX函式，將useXXX函式的程式碼還是放到當前元件中。第一個好處是如果某天
useXXX函式中的邏輯需要給其他元件複用，我們只需要將useXXX函式的程式碼移到新建的hooks檔案中即可。第二個好處是我們想檢視某個業務邏輯的程式碼，只需要在對應的
useXXX函式中去找即可。無需在整個vue檔案中翻山越嶺從computed模組的程式碼跳轉到function函式的程式碼。
關注公眾號：【前端歐陽】，給自己一個進階vue的機會
另外歐陽寫了一本開源電子書vue3編譯原理揭秘，這本書初中級前端能看懂。完全免費，只求一個star。