---
title: "MVC和MVVM"
date: "2026-03"
category: "設計模式與架構"
tags: ["設計模式與架構"]
description: "這倆最大的區別其實就是後者多了一個響應式的現代前端框架——以前是控制器去控制頁面更新，完全要手操，但現在只要資料變更，框架自動接管，這就是響應式更新..."
source: "https://enriquemark.com/zh-hant/posts/MVC%E5%92%8CMVVM"
---

這倆最大的區別其實就是後者多了一個響應式的現代前端框架——以前是控制器去控制頁面更新，完全要手操，但現在只要資料變更，框架自動接管，這就是響應式更新。兩個V裡面，一個仍然是View，而另一個則是ViewModel——這就是一個專門響應式更新頁面的分層設計。C不再手動管理頁面的更新，完全委託給框架去管理。

而這裡的MVVM其實嚴格來說指的是帶有檢視和資料繫結的框架，一般的實現都是雙向的。但React比較特殊，它的資料流是單向的，而Angular就不太一樣。雙向繫結確實很爽，但一旦規模膨脹，就會變得非常混亂，有時候我不希望資料被雙向更新——而React從一開始的設計裡面就要求你手動實現，也算是一種強制你去管理，但犧牲了便捷性。

Angular的新特性Signals其實挺值得一說的。乍看之下它這個跟React 的狀態機制很像，都是根據資料變動只更新特定的和該資料有關的介面，但兩者的原理很不同。R那裡是依賴一個vDOM，每次更新其實都要diff比對一邊，規模大了下來是有效能開銷的。但A這裡的訊號就是直接定位到DOM去更新，根本不用比對。訊號在這裡本質上是一個繫結到DOM的訂閱，就好像我跟你之間的約定，資料變了我就直接通知你，而不需要每次所有人都問一遍去比對。

---

後端的MVC則是指的是當前的標準結構：Models、Controller、Service。分別負責定義資料結構，HTTP預處理和分流，以及實際的業務處置。這個跟前端其實差不多，最大區別其實是V由C來控制，把東西在後端搞好之後，拋到前端去。所以最開始兩者是一體的。到後面Web應用越來越複雜，這一套才被直接搬到前端去，V在這裡從整個html變成了直接操作的DOM物件。但就因為資料層和渲染層的互動特別麻煩，後續才有了各種框架誕生，將單純的M和VM區分開來，因此才延展出了兩個V（其中一個是對V的對映，即ViewModel）的MVVM，而資料變動導致的渲染更新則交給架構中的狀態來專門管理，不再由C直接操作。C的職能從這裡被拆分出去，在不複雜的情況下根本不用單獨加，而更複雜的時候則成了統一管理狀態的部分。