在现代前端和后端开发中，如何有效地组织代码、分离关注点、提高可维护性一直是开发者关注的核心问题。MVVM（Model-View-ViewModel）架构模式应运而生，它通过清晰的三层分离和双向数据绑定机制，极大地简化了用户界面的开发复杂度。从微软的WPF到Web前端的Knockout、Vue.js，再到移动端的SwiftUI、Jetpack Compose，MVVM已经成为构建响应式用户界面的事实标准。本文将系统全面地梳理MVVM框架的核心知识点，从基础概念到高级实践，帮助开发者建立完整的知识体系。
一、MVVM概述
1.1 什么是MVVM
MVVM（Model-View-ViewModel） 是一种软件架构模式，它将用户界面（UI）从业务逻辑和行为中清晰地分离出来。MVVM通过声明式数据绑定将View层与其他层连接起来，促进了UI和开发工作在同一代码库中的高效协同。
核心特性：
关注点分离：将界面、业务逻辑和数据模型严格分离
双向数据绑定：View和ViewModel自动同步，无需手动操作DOM
可测试性：ViewModel独立于UI，可进行单元测试
可维护性：代码结构清晰，职责明确
1.2 MVVM的历史
MVVM最初由微软在2005年定义，用于Windows Presentation Foundation（WPF）和Silverlight。John Grossman在关于Avalon（WPF的代号）的博文中正式推出了这一概念。
在微软推出MVVM之前，社区中已有类似的架构模式——MVP（Model-View-Presenter）和Martin Fowler在2004年提出的“展现模型”（Presentation Model）理念。展现模型的思想为MVVM的诞生奠定了理论基础。
近年来，MVVM已在JavaScript领域得到广泛实现，代表性框架包括KnockoutJS、Vue.js、Angular等，获得了整个开发社区的积极响应。
1.3 MVVM vs MVC vs MVP
1.4 架构分层
MVVM严格划分为三层结构，每层职责单一，通过标准化接口交互：
┌─────────────────────────────────────────────────────────────┐
│ View 视图层 │
│ - 展示UI界面 │
│ - 通过数据绑定关联ViewModel的状态与命令 │
│ - 不包含业务逻辑 │
├─────────────────────────────────────────────────────────────┤
│ ViewModel 视图模型层 │
│ - 作为View与Model的中间层 │
│ - 处理业务逻辑和用户交互响应 │
│ - 暴露可绑定的状态与命令 │
├─────────────────────────────────────────────────────────────┤
│ Model 数据模型层 │
│ - 管理原始数据 │
│ - 定义数据结构与数据处理逻辑 │
│ - 不依赖UI或ViewModel │
└─────────────────────────────────────────────────────────────┘
二、Model（模型层）
2.1 Model的职责
Model层代表应用所用的领域相关数据或信息。一个典型例子是用户账号（姓名、头像、电子邮件）或音乐唱片（专辑名、年代、曲目）。
Model层的核心职责包括：
数据实体：用类或接口定义数据结构
数据源：封装数据获取与存储逻辑（网络请求、本地数据库）
数据验证：实现数据合法性校验
2.2 Model的规则
Model持有信息，但通常不包含操作行为。它不会格式化信息或影响数据的展现方式，因为这些是View和ViewModel的责任。
唯一的例外是验证——由Model进行数据验证是被认为可以接受的，例如检查电子邮件格式是否符合正则表达式要求。
2.3 Model实现示例
typescript
// 数据实体（Model）：用户信息
export class User {
id: string;
name: string;
age: number;
email: string;
constructor(id: string, name: string, age: number, email: string) {
this.id = id;
this.name = name;
this.age = age;
this.email = email;
}
// 数据验证：年龄必须为正数
validateAge(): boolean {
return this.age > 0;
}
// 数据验证：邮箱格式
validateEmail(): boolean {
const emailRegex = /^[^\s@]+@([^\s@]+\.)+[^\s@]+$/;
return emailRegex.test(this.email);
}
}
// 数据源（Model层）：获取用户数据
export class UserDataSource {
async fetchUser(id: string): Promise<User> {
const response = await fetch(`/api/user/${id}`);
const data = await response.json();
return new User(data.id, data.name, data.age, data.email);
}
saveUser(user: User): void {
localStorage.setItem(`user_${user.id}`, JSON.stringify(user));
}
}
三、ViewModel（视图模型层）
3.1 ViewModel的职责
ViewModel是MVVM架构的核心，它作为View和Model之间的“中间层”，负责业务逻辑处理和数据转换。ViewModel对外暴露可被View绑定的“状态”与“命令”，不直接操作UI。
核心职责：
从Model获取数据，转换为View可用的格式
响应用户交互，执行相应业务逻辑
维护View所需的状态
通过数据绑定自动同步View
3.2 ViewModel的核心特性
3.2.1 可观察状态
ViewModel通过可观察属性暴露状态，当状态变化时，View自动更新。这是MVVM“数据驱动UI”的核心机制。
typescript
// ViewModel中的可观察状态
class UserViewModel {
// 可观察状态：用户信息（供View绑定）
userInfo: User = new User('', '', 0, '');
// 可观察状态：加载状态
isLoading: boolean = false;
// 可观察状态：错误信息
errorMessage: string = '';
}
3.2.2 计算属性
计算属性是根据其他状态派生而来的值，在ViewModel中定义计算属性可以简化View的展示逻辑。
typescript
class UserViewModel {
userInfo: User;
// 计算属性：用户年龄描述
get ageDesc(): string {
return this.userInfo.age >= 18 ? '成年' : '未成年';
}
// 计算属性：用户显示名称
get displayName(): string {
return this.userInfo.name || '匿名用户';
}
}
3.2.3 命令（Commands）
命令封装了用户交互对应的业务逻辑，供View的事件（如点击、提交）直接绑定。
typescript
class UserViewModel {
// 命令：加载用户信息
async loadUser(id: string): Promise<void> {
this.isLoading = true;
try {
const rawUser = await this.dataSource.fetchUser(id);
if (rawUser.validateAge()) {
this.userInfo = rawUser;
}
} catch (error) {
this.errorMessage = '加载用户失败';
} finally {
this.isLoading = false;
}
}
// 命令：提交表单
submitForm(): void {
if (this.validateForm()) {
this.dataSource.saveUser(this.userInfo);
}
}
}
3.3 ViewModel的独立性
ViewModel不应依赖任何特定平台的UI组件（如Button、TextBox），这是确保其可测试性和跨平台复用的关键。因此，应避免在ViewModel中直接使用平台相关的API。
3.4 数据转换与格式化
ViewModel的一个重要职责是数据转换——将Model层的原始数据转换为View所需的格式。例如，将Unix时间戳转换为可读日期格式。
typescript
class OrderViewModel {
private rawOrder: Order;
// 转换：Unix时间戳 → 格式化日期
get formattedDate(): string {
const date = new Date(this.rawOrder.timestamp * 1000);
return date.toLocaleDateString('zh-CN');
}
// 转换：原始价格 → 货币格式
get formattedPrice(): string {
return `¥${this.rawOrder.price.toFixed(2)}`;
}
}
