说起来，

前言

代码架构的出现。不仅仅是为了让代码之间结构清晰，便于维护，更是为了软件质量做底层加固。虽然说所有的网络请求、所有的业务逻辑，我们都可以放到 UI 页面里来处理，在使用者视觉的效果里没有什么问题。但是在开发层，长此以往，暴露的问题则是越积越深，比如页面代码臃肿、毫无代码复用可言、维护成本剧增等等问题。

如果你曾经经历过：一行改动导致整个页面崩溃新功能加入后原有功能被破坏多人并行开发导致冲突频发——这正是缺乏架构的项目所面临的痛点。

架构解决了三个根本痛点：

• 应对需求的频繁变化产品经理今天要改 UI 样式，明天要换第三方 SDK。没有分层，改一个按钮颜色可能会牵连到数据逻辑。改一个接口地址可能导致整个页面崩溃。架构提供“隔离带”，让变化只影响局部。
• 降低认知负荷人脑同时能处理的信息有限。没有分层，一个文件里既写网络请求，又写数据处理。还写 UI 布局，几百行代码混在一起，让开发者大脑“过载”。架构通过“关注点分离”，让你看 View 时只关心 UI。看 Model 时只关心数据。说起来，
• 支持团队并行开发在团队协作中。各业务模块相互对立，各司其职。如果没有架构，大家会在同一个文件里“打架”。架构定义清晰契约，让分工成为可能。

目前主流的代码架构就是 MVVM。是很多语言或三方框架的首选：Android、iOS、Vue、小程序等都主推 MVVM，而鸿蒙官方的 ArkUI 也采用了 Model‑View‑ViewModel模式。不过，

什么是 MVVM？

M-V‑M 将应用拆分为 Model、View 和 ViewModel 三个主要部分，实现数据、视图与逻辑的分离。说起来，通过这种模式，UI 可以因为状态变化自动更新。无需手动处理，从而高效管理数据和视图绑定与更新。

Model

负责存储和管理应用数据及业务逻辑，不直接与使用者界面交互。通常从后端接口获取数据，是应用程序的数据基础，确保数据的一致性和完整性。

View

负责使用者界面展示数据并与使用者交互，不包含任何业务逻辑。它通过绑定 ViewModel 层提供的数据来动态更新 UI。

ViewModel

负责管理 UI 状态和交互逻辑。作为连接 Model 与 View 的桥梁，ViewModel 监控 Model 数据变化。通知 View 更新 UI，同时处理使用者交互事件并转换为数据操作。

登录案例 - 用鸿蒙实现 MVVM 架构完整流程

1️⃣ 模型层

M 模块主要负责模拟网络请求，并将返回的数据映射为业务对象。在真实项目中，你会把实际网络调用替换为真正的 HTTP 请求或 SDK 调用。 老实说，

/**
* AUTHOR: AbnerMing
* INTRODUCE: 登录 model
*/
export class LoginModel {
/**
* AUTHOR: AbnerMing
* INTRODUCE: 发起登录
*/
再看login，UserBean {
// 在实际开发中，这里执行网络请求。将服务器返回 JSON 数据转换为 UserBean
// 简单模拟返回
let bean = new UserBean
bean.userName = userName
bean.userPass = userPass
return bean
}
}
/**
* AUTHOR: AbnerMing
* INTRODUCE: 模拟的数据对象
*/
export class UserBean {
userName?: string
userPass?: string
}

2️⃣ 视图模型层

L 层负责把业务逻辑暴露给 View，并保持状态同步。当登录成功后它将更新内部状态，让 View 自动渲染最新信息。

import { UserBean,LoginModel } from "../model/LoginModel";怎么说呢，/**
* AUTHOR: AbnerMing
* INTRODUCE: 处理使用者登录相关逻辑，存储使用者信息数据。判断使用者是否登录等
*/
@ObservedV2export class LoginViewModel {
@Trace
userBean?: UserBean
/**
* AUTHOR: AbnerMing
* INTRODUCE: 执行登录
*/
login {
const model = new LoginModel
this.userBean = model.login
}
}

3️⃣ 视图层

P 层专注于 UI 展示与交互，仅使用 ViewModel 提供的数据和方法就可以完成页面渲染与业务触发。

import { LoginViewModel } from '../viewmodel/LoginViewModel';/**
* AUTHOR: AbnerMing
* INTRODUCE: 登录页面
*/
@Entry@ComponentV2struct LoginPage {
@Local userName?: string
@Local userPass?: string
loginViewModel = new LoginViewModel
build {
Column {
TextInput({
placeholder: "请输入账号",text: $$this.userName,})
TextInput({
placeholder: "请输入密码"。text: $$this.userPass,}).margin
Button
.margin
.onClick => {
if {
this.getUIContext.getPromptAction
.showToast
return;}
this.loginViewModel.login
})
Text(
"测试渲染使用者信息：账号：" + this.loginViewModel.userBean?.userName +
" 密码：" + this.loginViewModel.userBean?.userPass,).margin
}.width
.height
.justifyContent
.padding
}
}

4️⃣ 痛点映射 - 为什么 MVVM 能帮你解决这些问题？

• No Code Duplication: 每个模块职责明确，你不再需要在不同文件之间复制粘贴相同业务逻辑。这样就能避免因重复实现导致的不一致性。
• Simplified Maintenance:- 当后端接口变更时只需要修改 Model；说起来，当设计稿调整时只需改 View；当功能迭代时只需调整 ViewModel。这种“一处改动，一处影响”的原则大幅降低了维护成本。
• Easier Team Collaboration:- 团队成员可以同时在不同层次工作，而不会产生 merge 冲突。因为各自只修改自己负责文件，所以 PR 审核更快、更安全。
• Breeze Through Feature Changes:- 增加功能如“忘记密码”或者第三方登录。只需要在对应层实现，无需担心其他模块被破坏，大大提高迭代速度。

& 接下来行动建议

• 先从小模块开始拆解 MVC → MVVM，以快速验证效果；接下来逐步推广到全局项目结构；.
• 结合鸿蒙官方文档学习 ArkUI 的生命周期管理与属性绑定语法；.
• 继续关注社区常用方法，例如使用 LiveData 或 Flow 来实现响应式更新；.
• 定期回顾团队编码规范。引入单元测试覆盖关键方法，提高代码可靠性；.
• 最终跨层依赖是否合理，以防止 “脆弱耦合” 再度出现；话说回来，.