---
title: "MVC和MVVM"
date: "2026-03"
category: "设计模式与架构"
tags: ["设计模式与架构"]
description: "这俩最大的区别其实就是后者多了一个响应式的现代前端框架——以前是控制器去控制页面更新，完全要手操，但现在只要数据变更，框架自动接管，这就是响应式更新..."
source: "https://enriquemark.com/zh-hans/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的职能从这里被拆分出去，在不复杂的情况下根本不用单独加，而更复杂的时候则成了统一管理状态的部分。