MVVM架构 考试重点
经典架构模式
模型-视图-视图模型：通过 ViewModel 与数据绑定减少界面与逻辑的胶水代码。
结构示意
flowchart LR
V[View 界面] <--> VM[ViewModel]
VM --> M[Model / 服务]
知识说明
MVVM 在 MVC 基础上引入 ViewModel：它把 Model 的数据转换成 View 可绑定的状态，并暴露命令（Command）。View 通过绑定框架自动同步，而不是 Controller 里大量 findViewById/手动刷新。
前端 Vue/Angular、桌面 WPF 都是典型 MVVM。与 MVC 相比，更强调「声明式绑定」而不是「控制器命令式更新界面」。
代价是绑定链路调试更难，也需要理解观察者/依赖追踪。
特点
- 数据绑定
- ViewModel 隔离 View
- 命令/事件驱动界面动作
- 利于 UI 测试
优点
- 减少样板刷新代码
- UI 与逻辑分离
- 便于针对 ViewModel 做单元测试
局限
- 绑定错误较难查
- 学习曲线
- 不恰当绑定会造成内存泄漏
适用
WPF Vue / Angular 部分移动 MVVM 框架
例子展示 —— 选课人数：Vue 风格绑定
问题
人数一变就要手动改 DOM 文本；多个控件显示同一数据时容易漏刷新。
做法
ViewModel 持有 selectedCount；View 绑定该字段。Model 更新后只需改 ViewModel 状态，界面自动刷新。
flowchart TB
View[选课页文本绑定 selectedCount]
VM[CourseViewModel]
S[CourseService]
View <--> VM --> S
// WPF/JavaFX 思想示意
public class CourseViewModel {
private int selectedCount;
public int getSelectedCount() { return selectedCount; }
public void setSelectedCount(int n) { this.selectedCount = n; /* notify binding */ }
public void refreshFrom(CourseService svc, String id) {
setSelectedCount(svc.count(id));
}
}class CourseViewModel:
def __init__(self):
self.selected_count = 0
def refresh(self, service, course_id):
self.selected_count = service.count(course_id)
# 模板: {{ selected_count }} 人已选