当前位置：首页 > news >正文

MVC 与 MVVM 区别 - 鸿蒙

news 2026/3/27 3:56:02

一、MVC 架构

1. 角色定义

Model（数据模型）：管理数据、业务逻辑、网络请求、数据库操作等
View（视图）：负责 UI 展示，接收用户操作并抛出事件，不包含业务逻辑
Controller（控制器）：作为调度中心，处理用户交互、调用 Model、更新 View

2. 目录结构

src/main/ets/
├── model/
│   └── DataModel.ets
├── view/
│   └── MyView.ets
└── pages/└── Index.ets          // 作为 Controller

3. 代码示例

Model

export class DataModel {getInfo(): string {return "鸿蒙 MVC 标准架构";}
}

View

@Component
export struct MyView {@Prop content: string;onButtonClick?: () => void;build() {Column() {Text(this.content).fontSize(28).margin(15)Button("点击获取数据").onClick(() => {this.onButtonClick?.();})}}
}

Controller（主页面）

import { DataModel } from '../model/DataModel';
import { MyView } from '../view/MyView';@Entry
@Component
struct Index {private dataModel: DataModel = new DataModel();@State showText: string = "请点击按钮";build() {Column() {MyView({content: this.showText,onButtonClick: () => {this.showText = this.dataModel.getInfo();}})}.width('100%').height('100%').justifyContent(FlexAlign.Center)}
}

4. 执行流程

用户在 View 上点击
View 将事件抛给 Controller
Controller 调用 Model 获取数据
Controller 更新 @State 状态，View 自动刷新

5. 流程图

┌─────────────┐        ┌─────────────┐        ┌─────────────┐
│    View     │───────▶│ Controller  │───────▶│    Model    │
│ 自定义UI组件  │   事件  │    主页面    │   调用  │  数据模型    │
└─────────────┘        └─────────────┘        └─────────────┘▲                                                  ││               返回数据                            │└──────────────────────────────────────────────────┘

二、MVVM 架构

1. 角色定义

Model（数据模型）：数据、业务逻辑、网络请求、数据库操作
View（页面/组件）：只负责 UI 显示，不包含业务逻辑
ViewModel（视图模型）：核心枢纽，管理状态、处理逻辑、提供数据绑定，自动驱动 UI 更新

2. 目录结构

src/main/ets/
├── model/
│   └── DataModel.ets
├── viewmodel/
│   └── DataViewModel.ets
├── view/
│   └── NewMyView.ets
└── pages/└── Index.ets          // 仅作为入口，不再承担控制器职责

3. 代码示例

Model

export class DataModel {getInfo(): string {return "鸿蒙 MVVM 自动绑定！";}
}

ViewModel

import { DataModel } from '../model/DataModel';export class DataViewModel {private model: DataModel = new DataModel();message: string = "等待点击";fetchData() {this.message = this.model.getInfo();}
}

View

import { DataViewModel } from '../viewmodel/DataViewModel';@Component
export struct NewMyView {@Link vm: DataViewModel;build() {Column() {Text(this.vm.message).fontSize(30).margin(20)Button("获取数据").onClick(() => {this.vm.fetchData();})}.justifyContent(FlexAlign.Center)}
}

主页面（入口）

import { DataViewModel } from '../viewmodel/DataViewModel';
import { NewMyView } from '../view/NewMyView';@Entry
@Component
struct Index {@State vm: DataViewModel = new DataViewModel();build() {Column() {NewMyView({ vm: this.vm })}.width('100%').height('100%')}
}

4. 执行流程

View 触发点击，调用 ViewModel 的方法
ViewModel 调用 Model 获取数据
Model 返回数据，ViewModel 更新内部状态
View 通过数据绑定自动刷新（无需手动操作）

5. 流程图

┌──────────┐      双向绑定      ┌────────────┐      ┌──────────┐
│   View   │◄──────────────────►│ ViewModel  │◄────►│   Model  │
│  页面UI  │   数据自动同步更新   │  状态+逻辑  │      │  数据层   │
└──────────┘                    └────────────┘      └──────────┘

三、MVC vs MVVM 核心区别

对比维度	MVC	MVVM
数据流	单向：View → Controller → Model → 手动更新 View	双向绑定：View ↔ ViewModel，数据变化自动驱动 UI
职责划分	Controller 承担调度、更新 UI、调用 Model，易臃肿	ViewModel 专注状态与逻辑，View 仅负责展示，职责单一
依赖关系	View 依赖 Controller，Controller 依赖 Model	View 依赖 ViewModel，ViewModel 依赖 Model，View 与 Model 完全隔离
可测试性	需要模拟 UI 环境，测试成本较高	ViewModel 无 UI 依赖，可用单元测试直接验证
代码量	随业务增长，Controller 代码膨胀，维护成本上升	通过数据绑定减少模板代码，状态集中管理