# 架構介紹 * MVC * MVP * MVVM * So...React 跟 Vue 到底算是哪個架構 ### MVC ==Model== 負責和資料庫溝通 ==View== 管理畫面的呈現 ==Controller== 控制流程 ```使用者互動邏輯,request 會先被送到 Controller,再由 Controller 通知 Model 調度資料,並且把資料傳遞給 View,並將呈現資料頁面回傳給客戶端``` ![](https://i.imgur.com/ix8LnR6.png) ##### 使用者操作畫面時,View 接收事件交給 Controller,Controller 操作 Model 處理資料,Model 處理完資料後再更新畫面。 ### MVP ==Model== 負責和資料庫溝通 ==View== 管理畫面的呈現 ==Presenter== 擔任 View 與 Model 之間的橋樑,View 和 Model 不直接互動,完全透過 Presenter 來進行溝通,成為兩個獨立的單元 ![](https://i.imgur.com/srxCKbI.png) ##### 使用者操作畫面時,View 接收事件交給 Presenter,Presenter 操作 Model 處理資料,Model 處理完資料後通知 Presenter,再由 Presenter 通知 View 更新畫面。 ### MVVM ==Model== 負責儲存和管理資料 ==View== 管理畫面的呈現 ==View Model== 負責協調模型和視圖之間的交互,由數據來驅動 View 的更新,當資料改變時,UI 自動更新 ![](https://i.imgur.com/9iYbVxL.png) ##### 把資料存在 ViewModel 中,View 觀察 ViewModel 中的資料。當使用者操作畫面時,View 接收事件交給 ViewModel,ViewModel 操作 Model 處理資料,Model 處理完資料後通知 ViewModel 更新資料。由於 View 觀察 ViewModel 中的資料,資料更新後 View 會收到更新,並更新畫面,達成雙向綁定。 ### So… React 跟 Vue 到底算是哪個架構?