> For the complete documentation index, see [llms.txt](https://jack1in.gitbook.io/font-end/llms.txt). Markdown versions of documentation pages are available by appending `.md` to page URLs; this page is available as [Markdown](https://jack1in.gitbook.io/font-end/1.-web/1.8-mvc-vs-flux.md).
# 1.8 MVC VS Flux
### MVC簡介
MVC架構分為三個角色：
* **View**: 用户數據顯示，同時接受用戶輸入
* **Contorller**：響應用戶的輸入，對數據進行操作，
* **Model**：負責管理程序需要的數據，並且定義了操作數據的行為。
一個簡單的MVC架構，其工作流程如下：
MVC中的數據流是**雙向**的，Model通知View數據已更新，View直接查詢Model中的數據
MVC(View、Model、Controller是1:1:1的關係)只是一種理想狀態。現實中往往是 **多View**，**多Model**。更嚴重的是View與Model之間還可以是**多對多**的關係。也就是説，**單個View**的數據可以來自多個**Model**，**單個Model**更新是需要通知多個**View**，用戶在**View**上的操作可以對**多個Model**造成影響。可以想象最致命的後果是，**View**與**Model**之間相互更新的死循环。
### Flux簡介
**Flux 是一種單向資料流的設計模式，幫助你撰寫有條理的前端架構。**
Flux架構分為三個角色：
* **View/Component**: 可以把Component理解為View與Controller的結合，既展現數據，同時也處理用戶的請求，不同於MVC的Comtroller直接調用Model層處理業務，Flux上用戶的操作或請求都會通過Action，交由Action進行下一步的處理
* **Action**: 描述Component觸發得操作，例如: { type: 'delete' , payload: item }
* **Dispatcher**: flux的中央樞紐，所有Action都會交由Dispatcher進行處理，Dispatcher在接收到Action後，調用Store註冊在Action上的函數。與MVC中的Controller不同的是，Dispatcher不包含處理邏輯
* **Store**: 存放數據與處理邏輯，**並且提供gertter API讓人取得資料**，和MVC的Model比較，MVC中的每一個Model及對應一個領域，而Flux中的一個store可能包含多個model，最重要的事，**只有Store自己知道如合修改數據。**
一個簡單的Flux架構，其工作流程如下：
