ArkTS中的MVC、MVP、MVVM

在 ArkTS 和 ArkUI 开发中一个页面通常包含三部分内容页面展示用户交互数据请求和业务处理。如果所有代码都写在一个Component中随着功能增加组件会变得越来越臃肿。MVC、MVP 和 MVVM 的作用就是将页面、业务和数据进行合理拆分。本文使用同一个“登录页面”来理解这三种架构。一、三种架构共同解决的问题假设登录页面需要完成以下功能获取用户输入的账号和密码校验账号和密码调用登录接口显示加载状态显示登录成功或失败登录成功后跳转页面。如果这些逻辑全部写在页面组件中EntryComponentstruct LoginPage{Stateaccount:stringStatepassword:stringStateloading:booleanfalseStatemessage:stringprivateasynclogin():Promisevoid{// 参数校验// 网络请求// 错误处理// 页面状态修改// 页面跳转}build(){// 页面布局}}随着功能增加LoginPage会同时负责UI 布局状态管理输入校验网络请求数据转换错误处理页面跳转。这类组件通常被称为“胖组件”。MVC、MVP、MVVM 的核心目标就是让不同对象承担不同职责。二、公共的 Model 层无论采用哪种架构Model 的职责基本一致。Model 负责数据实体网络请求数据库存储业务数据处理底层服务能力。例如classUser{id:numbername:stringconstructor(id:number,name:string){this.ididthis.namename}}classLoginService{asynclogin(account:string,password:string):PromiseUser{if(accountadminpassword123456){returnnewUser(1,管理员)}thrownewError(账号或密码错误)}}LoginService只负责完成登录业务不关心页面中使用的是Text Button TextInput LoadingProgressModel 不应该依赖具体 UI。三、MVCController 直接协调 Model 和 ViewMVC 分为Model View Controller其中Model负责数据和业务能力View负责界面展示Controller接收用户事件调用 Model并更新 View。在 ArkUI 中Component经常同时承担 View 和 Controller 的职责build() → View 事件处理方法 → ControllerMVC 示例EntryComponentstruct LoginMvcPage{Stateaccount:stringStatepassword:stringStateloading:booleanfalseStatemessage:stringprivateloginService:LoginServicenewLoginService()privateasynconLoginClick():Promisevoid{if(this.account.length0){this.message请输入账号return}if(this.password.length6){this.message密码不能少于 6 位return}this.loadingtruethis.messagetry{constuserawaitthis.loginService.login(this.account,this.password)this.message欢迎你${user.name}}catch(error){this.message账号或密码错误}finally{this.loadingfalse}}build(){Column({space:16}){TextInput({placeholder:请输入账号,text:this.account}).onChange((value:string){this.accountvalue})TextInput({placeholder:请输入密码,text:this.password}).onChange((value:string){this.passwordvalue})Button(this.loading?登录中...:登录).enabled(!this.loading).onClick((){this.onLoginClick()})if(this.loading){LoadingProgress()}Text(this.message)}.padding(20)}}MVC 的数据流用户点击 ↓ View 触发事件 ↓ Controller 处理逻辑 ↓ Controller 调用 Model ↓ Model 返回结果 ↓ Controller 修改页面状态 ↓ View 重新渲染可以概括为View → Controller → Model View ← Controller ← ModelMVC 的特点MVC 最大的特点是Controller 直接读取 View 的数据也直接修改 View 的状态。例如this.loadingtruethis.message登录失败这种方式简单直接适合业务较少的页面。但页面复杂后Controller 逻辑容易全部堆积在组件中最终形成“胖组件”。四、MVPPresenter 通过接口命令 ViewMVP 分为Model View PresenterPresenter 可以理解为从 Controller 中抽离出来的业务协调者。它负责获取用户输入校验数据调用 Model处理业务结果命令 View 更新页面。MVP 的核心是Presenter 不直接操作具体 UI而是通过 View 接口控制页面。定义 View 接口interfaceLoginViewContract{getAccount():stringgetPassword():stringshowLoading():voidhideLoading():voidshowMessage(message:string):voidshowLoginSuccess(user:User):void}这个接口规定登录页面必须具备哪些能力。Presenter 只认识这个接口并不知道页面具体使用的是Text、Toast 还是 Dialog。Presenter 实现classLoginPresenter{privateview:LoginViewContractprivateloginService:LoginServiceconstructor(view:LoginViewContract,loginService:LoginService){this.viewviewthis.loginServiceloginService}asynclogin():Promisevoid{constaccountthis.view.getAccount()constpasswordthis.view.getPassword()if(account.length0){this.view.showMessage(请输入账号)return}if(password.length6){this.view.showMessage(密码不能少于 6 位)return}this.view.showLoading()try{constuserawaitthis.loginService.login(account,password)this.view.showLoginSuccess(user)}catch(error){this.view.showMessage(账号或密码错误)}finally{this.view.hideLoading()}}}Presenter 中没有出现任何 ArkUI 控件Component State TextInput Button Text因此 Presenter 可以脱离页面独立测试。MVP 页面EntryComponentstruct LoginMvpPage{Stateaccount:stringStatepassword:stringStateloading:booleanfalseStatemessage:stringprivatepresenter:LoginPresenter|nullnullaboutToAppear():void{constview:LoginViewContract{getAccount:():string{returnthis.account},getPassword:():string{returnthis.password},showLoading:():void{this.loadingtrue},hideLoading:():void{this.loadingfalse},showMessage:(message:string):void{this.messagemessage},showLoginSuccess:(user:User):void{this.message欢迎你${user.name}}}this.presenternewLoginPresenter(view,newLoginService())}build(){Column({space:16}){TextInput({placeholder:请输入账号,text:this.account}).onChange((value:string){this.accountvalue})TextInput({placeholder:请输入密码,text:this.password}).onChange((value:string){this.passwordvalue})Button(this.loading?登录中...:登录).enabled(!this.loading).onClick((){this.presenter?.login()})if(this.loading){LoadingProgress()}Text(this.message)}.padding(20)}}MVP 的数据流用户点击 ↓ View 将事件交给 Presenter ↓ Presenter 获取 View 输入 ↓ Presenter 调用 Model ↓ Model 返回结果 ↓ Presenter 调用 View 接口 ↓ View 修改页面状态 ↓ 页面重新渲染可以概括为View ↔ Presenter ↔ ModelMVP 的核心特征Presenter 会调用this.view.showLoading()this.view.showMessage(登录失败)this.view.showLoginSuccess(user)这些代码表达的是View请显示加载状态 View请显示错误信息 View请显示登录成功所以 MVP 的本质是Presenter 输出的是行为和命令。Presenter 虽然不认识具体控件但它知道 View 可以执行哪些操作。五、MVVMViewModel 提供页面状态MVVM 分为Model View ViewModelViewModel 负责保存页面状态接收页面输入处理输入校验调用 Model转换页面数据提供页面可以直接使用的状态。MVVM 的核心是ViewModel 不命令 View 做什么只修改自身状态View 根据状态重新渲染。ViewModel 实现ObservedclassLoginViewModel{account:stringpassword:stringloading:booleanfalsemessage:stringprivateloginService:LoginServiceconstructor(loginService:LoginService){this.loginServiceloginService}getloginEnabled():boolean{returnthis.account.length0this.password.length6!this.loading}setAccount(account:string):void{this.accountaccount}setPassword(password:string):void{this.passwordpassword}asynclogin():Promisevoid{if(this.account.length0){this.message请输入账号return}if(this.password.length6){this.message密码不能少于 6 位return}this.loadingtruethis.messagetry{constuserawaitthis.loginService.login(this.account,this.password)this.message欢迎你${user.name}}catch(error){this.message账号或密码错误}finally{this.loadingfalse}}}ViewModel 中没有Text Button TextInput LoadingProgress它只维护页面状态。MVVM 页面EntryComponentstruct LoginMvvmPage{StateviewModel:LoginViewModelnewLoginViewModel(newLoginService())build(){Column({space:16}){TextInput({placeholder:请输入账号,text:this.viewModel.account}).onChange((value:string){this.viewModel.setAccount(value)})TextInput({placeholder:请输入密码,text:this.viewModel.password}).onChange((value:string){this.viewModel.setPassword(value)})Button(this.viewModel.loading?登录中...:登录).enabled(this.viewModel.loginEnabled).onClick((){this.viewModel.login()})if(this.viewModel.loading){LoadingProgress()}Text(this.viewModel.message)}.padding(20)}}MVVM 的数据流用户输入或点击 ↓ View 调用 ViewModel ↓ ViewModel 调用 Model ↓ Model 返回结果 ↓ ViewModel 修改自身状态 ↓ View 读取新状态 ↓ 页面重新渲染可以概括为View ↔ ViewModel ↔ ModelMVVM 的核心特征ViewModel 只会修改this.loadingtruethis.message登录失败它不会调用this.view.showLoading()this.view.showMessage()View 根据状态决定页面如何显示if(this.viewModel.loading){LoadingProgress()}Text(this.viewModel.message)因此 MVVM 的本质是ViewModel 输出的是状态和数据。六、MVP 和 MVVM 的核心区别MVP 和 MVVM 都把业务逻辑从页面组件中抽离但它们与 View 的通信方式不同。MVPPresenter 命令 Viewthis.view.showLoading()this.view.showMessage(登录失败)Presenter 的意思是View你现在显示加载。 View你现在显示错误。Presenter 输出的是行为。MVVMViewModel 修改状态this.loadingtruethis.message登录失败ViewModel 的意思是我现在处于加载状态。 我现在有一条错误信息。View 根据这些状态决定如何渲染。ViewModel 输出的是状态。因此可以记住Presenter 输出行为 ViewModel 输出状态七、Model 和 ViewModel 的区别Model 表示真实业务数据。例如classUser{firstName:stringlastName:stringage:number0vip:booleanfalse}这些是服务器或数据库中的原始数据。但页面可能需要显示张三 18岁 VIP会员ViewModel 可以将 Model 转换成适合页面直接展示的数据classUserViewModel{displayName:stringageText:stringvipText:stringupdate(user:User):void{this.displayName${user.firstName}${user.lastName}this.ageText${user.age}岁this.vipTextuser.vip?VIP会员:普通用户}}所以Model真实业务数据 ViewModel页面需要的数据和状态八、三种架构的核心对比架构中间层业务逻辑位置UI 更新方式MVCControllerComponent 或 ControllerController 直接修改状态MVPPresenterPresenterPresenter 通过接口命令 ViewMVVMViewModelViewModelView 根据 ViewModel 状态渲染进一步理解问题MVCMVPMVVM谁处理点击事件ControllerPresenterViewModel谁执行输入校验ControllerPresenterViewModel谁调用 ModelControllerPresenterViewModel谁修改 UIControllerViewView中间层输出什么直接操作行为、命令状态、数据是否依赖状态绑定不强制不强制通常依赖测试难度相对较高较低较低九、ArkTS 项目应该如何选择简单页面使用 MVC例如关于页面静态详情页简单设置页只有少量状态和交互的页面。这类页面直接在 Component 中处理逻辑即可没必要创建大量额外对象。流程型页面适合 MVP例如多步骤注册实名认证权限申请复杂表单提交分步骤业务流程。这类页面经常需要明确控制 View显示下一步 隐藏当前区域 弹出错误提示 进入成功页面Presenter 输出行为会比较直观。状态复杂的页面适合 MVVM例如下载页面播放器页面聊天页面购物车页面股票行情页面多状态列表页面。这些页面通常有大量状态加载中 加载成功 加载失败 空数据 刷新中 是否可点击 下载进度 播放进度 未读数量MVVM 可以把这些状态集中放在 ViewModel 中由 View 声明式渲染。十、为什么 MVVM 与 ArkUI 很契合ArkUI 是声明式 UI。开发者不是一步一步命令页面创建 Loading 添加 Loading 隐藏按钮 修改文字 移除 Loading而是描述页面在某种状态下应该是什么样子if(this.viewModel.loading){LoadingProgress()}Button(登录).enabled(this.viewModel.loginEnabled)Text(this.viewModel.message)当状态变化时ArkUI 会重新计算和渲染相关 UI。这与 MVVM 的状态驱动思想天然一致ViewModel 管理状态 View 描述状态对应的界面十一、任何架构都可能变得臃肿MVC 可能出现Massive ComponentMVP 可能出现Massive PresenterMVVM 可能出现Massive ViewModel如果 ViewModel 同时负责网络请求数据库存储JSON 解析页面跳转权限申请埋点文件下载缓存处理页面状态那么它同样会非常臃肿。更合理的结构可以继续拆分为View ↓ ViewModel / Presenter ↓ UseCase / Service ↓ Repository ↓ 网络和数据库架构的重点不是类名而是职责是否清晰。十二、最终总结MVC、MVP 和 MVVM 都是在解决页面代码职责混乱的问题。MVCView 触发事件 → Controller 调用 Model → Controller 直接修改 View一句话总结Controller 直接协调 Model 和 View。MVPView 把事件交给 Presenter → Presenter 调用 Model → Presenter 通过接口命令 View一句话总结Presenter 不直接操作控件但会命令 View 做什么。MVVMView 把输入交给 ViewModel → ViewModel 调用 Model → ViewModel 修改状态 → View 根据状态重新渲染一句话总结ViewModel 不命令 View只提供 View 需要的状态。最终可以压缩为三句话MVCController 直接修改 View。 MVPPresenter 通过接口命令 View。 MVVMViewModel 修改状态View 根据状态自己更新。再进一步压缩MVC 直接协调 MVP 行为驱动 MVVM 状态驱动