MVC 與 MVVM 有什麼不一樣？
記得在學習 Vue 時在文件看到這麼一句話
Although not strictly associated with the MVVM pattern, Vue’s design was partly inspired by it.
當初的反應是，我好像有聽說前端框架如 React.js 或是 Vue.js 都是參考 MVVM pattern 的概念設計的，但我不知道跟過去我聽過的 MVC 有什麼不一樣，所以我查了一些資料並整理一下，希望可以幫到有同樣疑問的人。
MVC 是什麼
Model View Controller 的簡稱
最常見的架構，將畫面與程式邏輯分開寫，使整體程式更有組織性、更易於多人合作。框架如 Angular 和 Express 都是參考此概念設計。這裡要注意的是 MVC 是一個概念，不同的人可能就會有不同見解，進而造成實作方式有所不同。
簡單來說，View & Model 之間不會相互接觸，需要透過 Controller 居中當作溝通橋樑
以下分別說明 Model, View, Controller 分別做的工作：
Model
- 處理資料相關邏輯
- 與資料庫互動（SELECT, INSERT, UPDATE, DELETE）
- 經由 Controller 與外界溝通
- 有時可以直接更新 View（視框架而不一定）
View
- 使用者所見的畫面（UI）
- 通常包含 HTML/CSS
- 與 Controller 溝通
- 經由 Controller 傳遞動態的值至 View
- 可由 Template Engine 渲染出原本 HTML 無法處理的動態資料，像是變數（在 HTML 當中只會變成字串）
例如 Vue 渲染資料的方式：
<ul>
<li>{{ user.id }}</li>
</ul>
Controller
- 取得 input，像是當使用者點擊畫面（透過 View）中連結或是拜訪特定 URL 而發請求（透過 Router）
- 處理請求（GET/POST/DELETE/PUT）
- Model 與 View 之間的溝通橋樑
- 由 Model 取得資料
- 將資料傳至 View
使用情境/範例
- 使用者點擊頁面上的連結，例如
example.com/products/12345 - 經由 Router 向 Controller 請求頁面內容
- Controller 接著向 Model 要求內容
- Model 向後端資料庫（經由 AJAX）拿資料
- Model 取得資料後回傳至 Controller
- Controller 將回傳的資料交由 View 的 Template Engine 渲染
- 渲染完成後畫面經由 Controller 傳至瀏覽器，並呈現使用者所見的畫面
MVVM 是什麼
Model View ViewModel
與 MVC 相比基本上 Model 以及 View 所做的事還是一樣，不同的是 Model 被 ViewModel 所取代
這是我參考多方資料後認為易懂的解釋（至少我自己這麼覺得）：
MVVM 由 Model, View, ViewModel 三部分構成，Model 層代表數據模型，也可以在 Model 中定義數據修改和操作的業務邏輯；View 代表 UI 組件，它負責將數據模型轉化成 UI 展現出來，ViewModel 是一個同步 View 和 Model 的對象。
在 MVVM 架構下，View 和 Model 之間並沒有直接的聯繫，而是通過 ViewModel 進行交互，Model 和 ViewModel 之間的交互是雙向的， 因此 View 數據的變化會同步到 Model 中，而 Model 數據的變化也會立即反應到 View 上。
ViewModel 通過雙向數據綁定把 View 層和 Model 層連接了起來，而 View 和 Model 之間的同步工作完全是自動的，無需人為干涉，因此開發者只需關注業務邏輯（Model），不需要手動操作 DOM（View）、不需要關注數據狀態的同步問題（原本 Controller 做的事），複雜的數據狀態維護完全由 MVVM 來統一管理。
MVC 與 MVVM 的差異
我認為重點在於：MVVM 在 View 及 ViewModel 之間有 binder 做綁定，而 MVP、MVC 沒有
data binding 使得 View 及 ViewModel 之間被綁定的屬性／資料得以自動更新。ViewModel 就像是 Model 中資料的狀態。在 MVC 當中雖然有 Controller 當作橋樑處理 Model & View 之間的交流，但當資料改變畫面要如何做對應的改變？當畫面改變時（例如使用者填寫表單），要如何處理 input？開發者需要自行撰寫 Controller 的對應邏輯。
相較之下 MVVM 的優勢即為 data binding。開發者不需要再煩惱如何處理 Model/View 變化時對應的方式，因為 ViewModel 幫忙做好了，開發者只需專注在如何分別處理資料邏輯＆畫面呈現。
最後用一張圖做總結
這裡 MVP 不是文章重點所以沒有特別提及，想了解的朋友可以參考底下 Reference 連結