vue3.x頁面功能拆分方式

anchovy 發表於 2022-05-19
Vue

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中處理

更多前端知識,請關注小程式,不定期有驚喜!

image.png

相關文章