vue3.x相對比vue2.x主要的應用區別在於setup的使用，這個也是vue3.x的特色，所有的功能都得通過vue鉤子引入使用，因為 setup 語法糖環境是不支援 this 的，這種開發方式有點回到原始的感覺，針對小專案還好，但如果頁面模組功能複雜，如果都放到一個檔案裡堆疊，不僅會造成可讀性差，而且時間長了難以維護，所以這就需要進行按功能拆分了，方式同vue2.x一樣，一個是按照元件拆分，一個是混入處理，還有就是通過vuex或api分離功能
一、 元件
可以把一些新增/編輯、配置、日誌及公共操作等寫到元件裡，然後引入使用，元件拆分是主要的減少頁面程式碼量的解決方式，也是vue推薦的方式
PS：元件拆分的方向，一是公共元件，在專案其他模組也能使用到，二是頁面級私有元件
二、混入
混入的場景主要是針對不需要模組且應用功能點過多，像這種可以通過混入的方式，把一些功能點拆分出來，引入使用，示例：
mixins/instuctLog.ts：
export default function() {
const a = 123
function foo() {
console.log('foo')
}
return {
a,
foo
}
}頁面：
<script lang="ts" setup>
import instructLogMixin from './mixins/instructLog'
const { a, foo } = instructLogMixin()
</script>三、api
把頁面模組中的一些api請求放到api目錄裡引入使用
四、vuex
按頁面模組劃分，把一些頁面配置、列舉資料及資料改變多元件響應更新的邏輯放到vuex中處理
更多前端知識，請關注小程式，不定期有驚喜！
