# 關注點分離 Separation of Concerns (SOC)

大公司通常都會有不同的部門，財務管財務，行銷管行銷，業務管業務，雖然彼此有關聯，有往來，但基本上都是獨立運作，有什麼問題就去相對應的部門中做調整。

程式也是一樣，規模一龐大，就需要採取「關注點分離」的原則，把東西都拆分清楚，讓整體更容易管理和維護。

**關注點分離** (SOC) 是指程式開發時，必須重視的一種「設計原則」。將程式拆成不同功能層或模組，讓每個區塊有各自的關注點，才不會全部混在一起，像一團毛線球剪不斷理還亂。

## 以 Vue 為例

---------------- HTML ----------------------------------------- JS (資料、渲染、生命週期)-------------

按下按鈕，按鈕事件觸發後更動資料內容，資料內容更動再被重新渲染到畫面上。如圖示，每個部份都是獨立的程式碼區塊。(查看 [Vue 常見結構的範例](https://hackmd.io/KvuHLB9SSXWG7obsLWG-Tw))

### 參考資料＋圖片來源
- [六角 2022 Vue 直播班](https://www.hexschool.com/courses/vue-training.html)

###### tags: `Vue` `Vue 直播班 - 2022 冬季班` `六角學院`