VueCocos 是一款基于 Vue 响应式机制的轻量级框架，它将 Vue 的响应式能力封装并应用到 Cocos 引擎中，为你的游戏界面带来自动更新的便捷体验。 - 自动更新：界面自动响应数据，一旦数据发生变化，界面自动更新，无需手动操作。 - 零门槛上手：内置了必要的 Vue 核心代码，开箱即用；即便没有 Vue 使用经验，也能快速掌握并开始开发。 [在线文档](https://gitee.com/logoss233/vue-cocos-doc/wikis/) [demo预览](https://lovely-sfogliatella-fd160c.netlify.app/) ![111111.gif](https://download.cocos.com/CocosStore/resource/5eaa2d6fe60f482ea2be4e003982ba6d/5eaa2d6fe60f482ea2be4e003982ba6d.gif) ## 基本用法 VueCocos的核心是响应式数据和更新器。更新器会自动侦听响应式数据变化，在数据变化后执行。下面是一个最基本的示例。这个案例中有一个label和一个按钮，点击按钮时，数据count加1，会触发更新器，自动更新label的值。 ```typescript @ccclass("TestUI") export class TestUI extends VCComponent{ //让ui继承VCComponent 来使用响应式功能。 @property(Label) label:Label; data=this.reactive({ count:0; //响应式数据 }) start(){ this.updateLabel(); //激活更新器 } @vcupdater //定义更新器 updateLabel(){ this.label.string=""+this.data.count; //在更新器中更新ui } onBtnClick(){ //按钮点击时改变数据 this.data.count++; } } ``` ## 使用这个框架的优势 - 聚焦数据变更：无需频繁注册或触发监听事件，减轻认知负担，提升开发效率。 - 批量更新渲染：同一帧内多次数据变动仅触发一次界面更新，显著降低性能开销。 - 智能缓存计算：计算属性内置缓存，仅在依赖变化时执行计算，空闲时不触发，避免重复运算。 - 高效红点管理：结合计算属性与响应式视图更新，实现精准且轻量的通知红点刷新。 ## 联系作者 qq 463010136 qq群 917536050 ## 购买须知本产品为付费虚拟商品，一经购买成功概不退款，请支付前谨慎确认购买内容。