MVC（模型-视图-控制器）图解——输入、更新、渲染 · 思维导图
MVC（模型-视图-控制器）图解——输入、更新、渲染. 可编辑的思维导图，以彩色分支、子主题和曲线连接呈现想法。 曲线表示联系；只有方向重要时才使用箭头。
MVC 用一条规则把应用分成三部分：控制器处理输入，模型拥有状态与规则，视图渲染模型——而视图和控制器都不直接碰状态。
MVC（模型-视图-控制器）图解——输入、更新、渲染 · 思维导图
The interactive MindMap canvas for this explanation — every lane, row and arrow above is a real QueryChart diagram you can open and edit.
如何阅读这张思维导图
- 从中心主题开始，沿着彩色分支探索相关想法。
- 曲线表示联系；只有方向重要时才使用箭头。
User input
这一分支汇集 “User interacts with the interface”.
Controller
这一分支汇集 “The controller is the traffic cop: it reads the user's action, decides what it means and tells the model what to change. It holds no state itself.”, “Controller updates the model”.
Model
这一分支汇集 “The model is the single source of truth — data and the rules that govern it. Both the controller and the view read from it, which is why they never fight over state.”, “Model notifies observers of the change”.
View
这一分支汇集 “The view is a projection of the model: it never changes data directly, it only asks the model and displays what it returns.”, “User sees the updated interface”.
跨分支联系
控制器处理输入；模型拥有状态；视图负责渲染——三种职责，三条泳道。
视图和控制器都不写数据；所有变更都流经模型。
模型是通知观察者，而不是命令视图，所以一个模型可以驱动多个视图。
这种分离让每一部分都能单独测试——这正是这个模式最初带来的回报。
MVC 是许多现代模式的祖先（MVVM、MVP、Redux 式的状态库），它们保留的都是同一套分离。
Key relationships and takeaways
- 控制器处理输入；模型拥有状态；视图负责渲染——三种职责，三条泳道。
- 视图和控制器都不写数据；所有变更都流经模型。
- 模型是通知观察者，而不是命令视图，所以一个模型可以驱动多个视图。
- 这种分离让每一部分都能单独测试——这正是这个模式最初带来的回报。
- MVC 是许多现代模式的祖先（MVVM、MVP、Redux 式的状态库），它们保留的都是同一套分离。
When to use this visual
- 在开发者去读某个框架的文档之前，先把这个模式讲给他听——这个三角就是每个框架都在实现的那张地图。
- 解释一个代码库为什么难改：状态被放在视图里处理，这违反 MVC，而且在画布上一眼就能看见。
- 把 MVC 与整洁架构那张图解里的分层架构做对比。
运作方式
调整中心主题
根据项目或课程修改中心主题的名称。
扩展分支
编辑想法并添加示例或注释。
连接相关想法
绘制跨分支连接；只有方向重要时才使用箭头。
常见问题
什么是 MVC？
MVC——模型、视图、控制器——是一种把应用分成三部分的软件模式：控制器处理输入，模型拥有数据和业务规则，视图渲染模型。这种分离的好处是每一部分都可以独立开发和测试，同一个模型也可以被多个视图展示。大多数 Web 框架都建立在这个模式之上。
为什么模型是 MVC 的中心？
因为模型是唯一可信来源。如果控制器和视图都能写数据，它们就会各自漂移、为状态打架。把所有变更都放在模型里，意味着数据规则只存在于一个地方，而视图永远只是一个一致模型的投影。图上把模型的两个方框放进它自己的泳道，正是因为这个原因。
如果我把逻辑写进视图会怎样？
你会得到一种有时被称为“胖视图”的反模式：显示代码和业务规则混在一起，不渲染就没法测试，还会和模型渐行渐远。同样的批评也适用于一个持有业务逻辑、而不是把它委派出去的控制器。MVC 的纪律就是各条泳道各守其位——图上那三行分开的方框，就是这条规则被画了出来。
MVC 和现代框架是什么关系？
大多数现代框架都用新名字保留了这个三角：MVVM 加了一层视图模型，MVP 给视图配了一个展示器，而 Redux 这类状态管理库本质上就是加了更严格通知规则的模型。画布上的核心循环——输入改变状态，状态驱动输出——是它们每一个都保住的不变量。
在 QueryChart 中编辑此思维导图
在可编辑画布中打开思维导图。移动想法、添加分支并绘制连接。