關於vue組件拆分
一個vue專案通常可以把組件分成以下三類：
- 頁面組件：對應一個實際的頁面，通常在
pages/目錄下，每個頁面有自己的資料夾與login/index.vue。 - 頁面零件組件（容器元件）：開發時常常會把一個頁面拆成多個組件，然後又把這些組件掛載到頁面組件 如：
login/dialog.vue。 - 共用組件：通常在
components/，多個頁面多處都會用到 如：app-btn.vue。
問題就在於頁面零件組件
- 這些頁面零件組件基本上不會複用，還需要拆分嗎？其實不拆也很好，如果只是想說這個檔案行數太多了！不要超過500行！把一些東西拆去另一個組件！這樣拆就只會增加不必要的抽象，降低可讀性。
- 如果要拆就要將邏輯集中在頁面組件，頁面零件組件不應該有任何的後端api調用、路由控制、業務邏輯相關的資料處理，全部透過拋出事件的方式讓index組件來處理，實現真正的UI和業務邏輯的關注點分離，這樣的好處：
- 日後維護高機率只會改動到頁面組件
- 頁面零件組件易於測試
- 可讀性極高，只需關注頁面組件就可理解業務邏輯