企业官网建设流程全解析

Oops Framework MVVM数据绑定：数据一变界面自动刷新，你该怎么实现

【免费下载链接】oops-framework基于 Cocos Creator 3.x 版本开发的游戏框架，此项目为 Oops Framework 教程项目，如果使用框架制作游戏项目可下载 oops-game-kit 游戏项目模板开发。项目地址: https://gitcode.com/gh_mirrors/oo/oops-framework

Oops Framework 是一款基于 Cocos Creator 3.x 开发的游戏框架，本教程项目演示了如何用MVVM 数据绑定让界面自动刷新：只要 Model 层的数据一变，UI 立刻同步更新，全程不用写一行"手动刷界面"的代码。本文以角色属性显示为例，带你 4 步实现完整的数据绑定流程。

为什么游戏界面需要 MVVM 数据绑定

用 Cocos Creator 做界面时，大家最常头疼的是：数据变了，还得手动找到对应的 Label 或进度条去更新数值。界面一多，漏更新、错更新就成了维护噩梦。

MVVM 的思路正好反了过来：界面只负责读数据，不关心数据是谁改的。你只管把数据写进视图模型（ViewModel，简称 VM），界面刷新由框架自动完成。

Oops Framework MVVM 三层结构：各自放在哪里

在 Oops Framework 中，M、VM、V 各有明确的分工：

关键设计在于：每个 Model 数据组件（基于ecs.Comp）内部都持有一个vm对象，界面只从vm读取数据，与 Model 的内部结构完全解耦。

在 Cocos 编辑器中右键即可快速搭建一个标准 MVVM 模块，模板菜单里已经分好 Model、View、VM 文件，填上数据就能用：

四步实现 MVVM 数据绑定

第一步：Model 定义数据，setter 里写入 vm

以角色基础属性组件assets/script/game/role/model/RoleModelBaseComp.ts为例，"力量"属性的写法是：

public set power(value: number) { this._power = value; this.vm[RoleAttributeType.power] = value; // 关键一行：同步写入 VM }

只要想让界面上的字段自动刷新，setter 里必须把值同步写进this.vm[...]。这就是"数据一变，界面自动刷新"的前提。

第二步：VM.add 全局注册数据

数据准备好之后（比如从服务器拉回角色属性），调用VM.add注册这个vm对象：

VM.add(this.vm, "RoleBase"); // 注册，名称供界面查找 VM.remove("RoleBase"); // 用完释放

项目里网络数据模块assets/script/game/account/bll/AccountNetData.ts会在收到服务器数据后，统一调用各 Model 组件的vmAdd()完成注册——数据一到，界面立即可读。

第三步：View 上挂 VM 组件绑定字段

在 UI 预制体中，给持有 Label 的节点挂上 VM 组件并指向对应的 vm 字段。数据一变，文字自动更新，不需要任何手动刷新逻辑。

第四步：界面关闭时释放数据

界面关闭或数据失效时，记得调用VM.remove("RoleBase")，避免下次进入界面时残留旧数据。

界面自动刷新的原理：数据变更链路

界面为什么能"自动"刷新？以角色属性为例，属性集合assets/script/game/role/model/attribute/RoleNumericMap.ts中给每个属性都挂了一个更新回调：

attr.onUpdate = (rn) => { this.vm[rn.type] = rn.value; // 属性一变，自动写入 vm };

完整链路是：属性变更 → 回调触发 → 写入 vm → VM 组件感知变化 → UI 刷新，视图层完全不需要知道是谁改了数据。

当玩家在角色信息界面（assets/script/game/role/view/RoleViewInfoComp.ts）点击"升级"按钮时，业务代码只需写一句role.upgrade()，界面上的属性数值就会自动跳变——这就是数据绑定的价值。

教程项目内置了一个可运行的 RPG 玩家演示，下图即为角色属性显示的界面效果：

新手避坑清单

• ❌setter 忘了写 vm：数据变了界面纹丝不动，新手第一大坑
• ❌忘了 VM.add：VM 组件找不到数据，界面显示空白
• ❌忘了 VM.remove：下次进入界面显示上一次的旧数据
• ✅vm 的键名与枚举定义保持一致（如RoleAttributeType），避免手误拼错导致绑定失效

想直接上手体验，克隆教程项目即可：

git clone https://gitcode.com/gh_mirrors/oo/oops-framework

用 Cocos Creator 3.x 打开即可运行，完整运行效果如下：

框架插件的安装与更新方式见doc/using.md。项目中等级、属性等完整数据组件都在assets/script/game/role/model/目录下，照着上面的模式，就能为你自己的游戏界面实现数据一变、界面自动刷新。

【免费下载链接】oops-framework基于 Cocos Creator 3.x 版本开发的游戏框架，此项目为 Oops Framework 教程项目，如果使用框架制作游戏项目可下载 oops-game-kit 游戏项目模板开发。项目地址: https://gitcode.com/gh_mirrors/oo/oops-framework