001-MVC与MVVM架构对比

MVC 与 MVVM 架构对比

MVC（后端概念）

**M (Model)**：数据库中的数据
**V (View)**：视图层（用户界面）
**C (Controller)**：控制器（处理业务逻辑，协调 Model 和 View）

MVVM（前端概念）

**M (Model)**：数据层（通过 Ajax 等获取的数据，存储在 data 中）
**V (View)**：视图层（HTML 结构）
**VM (ViewModel)**：
- 由 new Vue() 创建的实例对象
- 作为 View 和 Model 的调度者
- 实现数据的双向绑定

MVVM 核心思想

Model-View-ViewModel 是一种设计思想：

Model：数据模型（含数据操作逻辑）
View：UI 组件（将数据渲染为界面）
ViewModel：
- 同步 View 和 Model 的中间层
- 通过双向数据绑定自动连接 View 和 Model

工作特点：

✅ View 和 Model 无直接交互，需通过 ViewModel
✅ 数据变化自动同步：

Model 变化 → 立即反应到 View
View 变化 → 自动同步到 Model
✅ 无需手动操作 DOM，开发者专注业务逻辑

MVC vs MVVM 区别

特性	MVC	MVVM
数据同步	需手动更新 View	自动双向绑定
DOM 操作	频繁操作 DOM	零 DOM 操作
性能影响	易引起性能下降	高效渲染
核心组件	Controller 处理逻辑	ViewModel 管理数据绑定

MVVM vs jQuery 区别

维度	jQuery	MVVM (如 Vue)
开发模式	命令式 DOM 操作	数据驱动视图
数据管理	手动维护状态	自动状态同步
代码组织	易产生冗余代码	组件化+响应式数据流

适用场景

适合 MVVM 的场景：
- 数据操作复杂的应用（如表单、实时仪表盘）
- 需要高效视图更新的 SPA（单页应用）
- 追求开发效率的中大型项目
适合 jQuery 的场景：
- 轻度交互的静态页面
- 需快速实现简单动画/效果
- 遗留系统维护

核心总结：
MVVM 通过数据绑定解决了 MVC 的 DOM 性能瓶颈，适用于数据驱动型应用；
MVC 的 Controller 在 MVVM 中进化为 ViewModel，实现关注点分离。