1. 項(xiàng)目概述最近在Cocos Creator社區(qū)里一個(gè)名為“cocos_creator_mvvm_tools”的開源工具集熱度不低不少開發(fā)者都在討論。作為一個(gè)在游戲前端摸爬滾打多年的老碼農(nóng)我深知UI和數(shù)據(jù)同步的痛。傳統(tǒng)的MVC模式或者更直白點(diǎn)說在Cocos Creator里手動(dòng)用this.node.getComponent(cc.Label).string data.value這種方式來更新UI項(xiàng)目稍微大點(diǎn)邏輯復(fù)雜些維護(hù)起來簡(jiǎn)直就是一場(chǎng)災(zāi)難。數(shù)據(jù)變了要手動(dòng)找節(jié)點(diǎn)節(jié)點(diǎn)狀態(tài)變了又要回寫數(shù)據(jù)代碼里到處都是散落的getComponent和屬性賦值牽一發(fā)而動(dòng)全身。這個(gè)MVVM工具集瞄準(zhǔn)的就是這個(gè)痛點(diǎn)。它不是一個(gè)重量級(jí)的框架而是一套輕量級(jí)的工具集核心目標(biāo)就是讓你能用數(shù)據(jù)驅(qū)動(dòng)的方式去管理UI把開發(fā)者從繁瑣的節(jié)點(diǎn)操作中解放出來更專注于游戲本身的業(yè)務(wù)邏輯。簡(jiǎn)單說它讓你告別“面向節(jié)點(diǎn)編程”擁抱“面向數(shù)據(jù)編程”。無論你是剛接觸Cocos Creator的新手還是被大型項(xiàng)目UI邏輯折磨得焦頭爛額的資深開發(fā)者這套工具都值得你花時(shí)間了解一下。它完全免費(fèi)、開源而且從設(shè)計(jì)理念到使用方式都相當(dāng)貼合Cocos Creator編輯器的工作流。2. 核心設(shè)計(jì)思路與MVVM模式解析2.1 為什么是MVVM而不是MVC在深入這個(gè)工具集之前我們得先搞清楚它背后的MVVM模式到底是什么以及為什么在Cocos Creator的UI開發(fā)中MVVM比傳統(tǒng)的MVC更有優(yōu)勢(shì)。MVCModel-View-Controller模式大家都很熟悉它將應(yīng)用分為數(shù)據(jù)層Model、視圖層View和控制層Controller。在Cocos Creator的典型用法里一個(gè)PlayerInfo.ts腳本可能既是Controller也是View的操控者它從GameManagerModel獲取玩家血量數(shù)據(jù)然后找到場(chǎng)景中的血條Slider、血量Label等節(jié)點(diǎn)View最后調(diào)用getComponent來更新它們的屬性。這種模式的弊端很明顯Controller也就是我們的腳本對(duì)View有強(qiáng)依賴知道太多View的細(xì)節(jié)。一旦UI布局改動(dòng)或者需要新增一個(gè)顯示血量的地方你就要修改這個(gè)Controller腳本。MVVMModel-View-ViewModel模式則引入了ViewModel這一層它充當(dāng)了Model和View之間的橋梁和轉(zhuǎn)換器。ViewUI節(jié)點(diǎn)通過一種聲明式或綁定機(jī)制與ViewModel中的屬性關(guān)聯(lián)。當(dāng)Model的數(shù)據(jù)變化時(shí)ViewModel會(huì)更新ViewModel更新會(huì)自動(dòng)觸發(fā)與之綁定的View更新。反之用戶在View上的操作如點(diǎn)擊按鈕也會(huì)通過命令模式通知ViewModel再由ViewModel去更新Model。關(guān)鍵點(diǎn)在于View不知道Model的存在它只關(guān)心ViewModelViewModel也不知道View具體是哪個(gè)節(jié)點(diǎn)它只暴露數(shù)據(jù)和命令。這種雙向數(shù)據(jù)綁定徹底解耦了視圖和邏輯。對(duì)于Cocos Creator來說MVVM的優(yōu)勢(shì)是壓倒性的開發(fā)效率飛躍你不再需要編寫大量查找節(jié)點(diǎn)、更新屬性的膠水代碼。在編輯器中配置好綁定關(guān)系數(shù)據(jù)一變UI自動(dòng)變?？删S護(hù)性增強(qiáng)UI邏輯集中在ViewModel和綁定配置中業(yè)務(wù)邏輯集中在Model結(jié)構(gòu)清晰。修改UI表現(xiàn)通常只需調(diào)整綁定或ViewModel無需觸及核心游戲邏輯。更適合復(fù)雜UI狀態(tài)比如一個(gè)任務(wù)列表每個(gè)任務(wù)項(xiàng)有完成、進(jìn)行中、未解鎖等多種狀態(tài)對(duì)應(yīng)不同的圖標(biāo)、顏色和文本。用MVVM你可以將任務(wù)狀態(tài)定義為ViewModel中的一個(gè)屬性然后讓不同的UI組件綁定到這個(gè)屬性的不同“轉(zhuǎn)換器”上狀態(tài)切換的代碼會(huì)非常簡(jiǎn)潔。cocos_creator_mvvm_tools這個(gè)項(xiàng)目正是將MVVM的核心思想以一種輕量、非侵入式的方式適配到了Cocos Creator的組件系統(tǒng)和編輯器環(huán)境中。2.2 工具集的核心架構(gòu)拆解這個(gè)工具集的代碼結(jié)構(gòu)非常清晰核心文件都放在assets/Script/modelView目錄下。理解這幾個(gè)核心文件的分工是靈活使用它的關(guān)鍵。JsonOb.ts- 觀察者模式的基石這是整個(gè)工具的數(shù)據(jù)響應(yīng)式基礎(chǔ)。它實(shí)現(xiàn)了一個(gè)簡(jiǎn)易的觀察者模式允許你監(jiān)聽一個(gè)普通JavaScript對(duì)象的屬性變化。當(dāng)你修改了被JsonOb包裝或觀察的對(duì)象的某個(gè)屬性時(shí)所有監(jiān)聽該屬性的回調(diào)函數(shù)都會(huì)被自動(dòng)調(diào)用。你可以把它理解為一個(gè)專為數(shù)據(jù)對(duì)象設(shè)計(jì)的“事件發(fā)射器”。項(xiàng)目作者也說了你可以替換成自己實(shí)現(xiàn)的觀察者這提供了很好的靈活性。ViewModel.ts- 中央調(diào)度中心VM管理器這是整個(gè)MVVM體系的核心調(diào)度模塊。它不直接持有你的業(yè)務(wù)數(shù)據(jù)而是管理著多個(gè)被命名為tag的ViewModel實(shí)例。你可以通過VM.add(data, ‘tag’)將一個(gè)數(shù)據(jù)對(duì)象注冊(cè)為一個(gè)全局可訪問的ViewModel。它的內(nèi)部機(jī)制是利用了Cocos Creator內(nèi)置的cc.director.emit事件系統(tǒng)。當(dāng)任何一個(gè)被管理的ViewModel中的數(shù)據(jù)發(fā)生變化時(shí)ViewModel.ts會(huì)向整個(gè)游戲發(fā)送一個(gè)特定的事件通知所有關(guān)心這個(gè)數(shù)據(jù)的UI組件。VMBase.ts- UI組件的監(jiān)聽基類所有具體的MVVM組件如VMCustom,VMEvent都繼承自VMBase。它的核心職責(zé)是“訂閱”。在組件的onLoad或start生命周期中它會(huì)根據(jù)開發(fā)者配置的watchPath監(jiān)聽路徑向ViewModel.ts訂閱對(duì)應(yīng)的數(shù)據(jù)變化事件。當(dāng)事件觸發(fā)時(shí)VMBase會(huì)接收到新數(shù)據(jù)并調(diào)用相應(yīng)的更新邏輯比如更新Label的string屬性。VMParent.ts- 面向Prefab的局部ViewModel容器這是一個(gè)非常實(shí)用的設(shè)計(jì)專門解決Prefab預(yù)制體復(fù)用時(shí)的數(shù)據(jù)隔離問題。想象一下你有一個(gè)“物品圖標(biāo)”Prefab在背包里用了20次在商店里又用了10次每個(gè)圖標(biāo)都應(yīng)該顯示不同的物品數(shù)據(jù)。如果都用全局ViewModel路徑管理會(huì)很混亂。VMParent允許你為每個(gè)Prefab實(shí)例創(chuàng)建一個(gè)獨(dú)立的、局部的ViewModel作用域。繼承VMParent的組件會(huì)管理自己內(nèi)部的一份數(shù)據(jù)其子節(jié)點(diǎn)上的綁定路徑可以使用*作為前綴如*.itemName在實(shí)例化時(shí)*會(huì)被自動(dòng)替換為當(dāng)前實(shí)例的唯一標(biāo)識(shí)從而實(shí)現(xiàn)了數(shù)據(jù)隔離。VMCustom,VMEvent等 - 具體的綁定組件這些是你在編輯器中實(shí)際拖拽上去使用的組件。VMCustom用于將數(shù)據(jù)綁定到節(jié)點(diǎn)的任意屬性上如cc.Label.string, cc.Sprite.spriteFrame。VMEvent則用于將UI事件如click綁定到ViewModel中定義的方法命令上。它們是VMBase的具體實(shí)現(xiàn)提供了編輯器面板供你配置綁定關(guān)系。這個(gè)架構(gòu)的精妙之處在于它沒有強(qiáng)制你改變整個(gè)項(xiàng)目的架構(gòu)而是作為一個(gè)“工具集”嵌入。你可以從一個(gè)小面板開始試用逐步推廣到整個(gè)項(xiàng)目。3. 從零開始完整實(shí)操指南與核心配置3.1 環(huán)境準(zhǔn)備與項(xiàng)目導(dǎo)入首先你需要一個(gè)Cocos Creator項(xiàng)目。經(jīng)測(cè)試該工具集對(duì)Cocos Creator 2.x版本的兼容性最好這也是目前大多數(shù)存量項(xiàng)目使用的版本。如果你用的是Cocos Creator 3.x需要注意作者提到3.0版本的支持“待定”可能需要一些額外的適配工作社區(qū)里也有開發(fā)者分享了一些移植經(jīng)驗(yàn)但本文主要基于2.4.x穩(wěn)定版進(jìn)行講解。導(dǎo)入工具有兩種方式直接復(fù)制源碼從GitHub倉庫wsssheep/cocos_creator_mvvm_tools下載或克隆項(xiàng)目將其assets/Script/modelView整個(gè)文件夾復(fù)制到你自己的項(xiàng)目assets目錄下的任意位置例如assets/scripts/mvvm。這是最推薦的方式方便你閱讀源碼和調(diào)試。通過npm安裝如果支持有些社區(qū)版本可能提供了npm包但原倉庫主要提供源碼。復(fù)制源碼的方式最直接可靠。導(dǎo)入后確保你的tsconfig.json或項(xiàng)目設(shè)置能正確找到這些TypeScript文件。通常直接復(fù)制進(jìn)去Cocos Creator編輯器就能自動(dòng)識(shí)別。3.2 創(chuàng)建第一個(gè)數(shù)據(jù)模型與全局ViewModelMVVM的起點(diǎn)是數(shù)據(jù)模型Model。我們創(chuàng)建一個(gè)最簡(jiǎn)單的玩家數(shù)據(jù)模型。在assets/scripts/data目錄下新建一個(gè)PlayerModel.ts腳本// PlayerModel.ts export class PlayerModel { public hp: number 100; public mp: number 50; public gold: number 999; public name: string 冒險(xiǎn)者; // 可以包含更復(fù)雜的嵌套對(duì)象 public equipment: { weapon: string; armor: string } { weapon: 木劍, armor: 布衣 }; // 改變數(shù)據(jù)的方法 public takeDamage(damage: number): void { this.hp - damage; if (this.hp 0) this.hp 0; // 注意直接賦值不會(huì)觸發(fā)更新需要配合工具集的方法或使用JsonOb包裝。 } }接下來我們需要在游戲啟動(dòng)時(shí)將這個(gè)模型實(shí)例注冊(cè)為全局ViewModel。通常在游戲入口腳本如GameManager.ts或Main.ts中進(jìn)行// GameManager.ts import { VM } from ‘../mvvm/ViewModel’; // 根據(jù)你的實(shí)際路徑調(diào)整 import { PlayerModel } from ‘./data/PlayerModel’; export class GameManager extends cc.Component { public static playerModel: PlayerModel; onLoad() { // 1. 創(chuàng)建模型實(shí)例 GameManager.playerModel new PlayerModel(); // 2. 關(guān)鍵步驟使用JsonOb包裝使其可觀察 // 工具集內(nèi)部可能已經(jīng)處理但為了明確我們可以這樣操作假設(shè)工具集提供了相應(yīng)方法或類 // 實(shí)際上根據(jù)工具集設(shè)計(jì)更常見的做法是直接將普通對(duì)象傳給VM.add // 這里我們遵循工具集的常規(guī)用法創(chuàng)建一個(gè)純數(shù)據(jù)對(duì)象 const playerData { hp: 100, mp: 50, gold: 999, name: 冒險(xiǎn)者, equipment: { weapon: 木劍, armor: 布衣 } }; // 3. 注冊(cè)為全局ViewModel標(biāo)簽為“player” VM.add(playerData, ‘player’); // 現(xiàn)在游戲任何地方都可以通過‘player’這個(gè)標(biāo)簽來訪問和監(jiān)聽這個(gè)數(shù)據(jù)了。 } }重要提示這里有一個(gè)極易踩坑的點(diǎn)VM.add注冊(cè)的應(yīng)該是數(shù)據(jù)對(duì)象本身而不是一個(gè)類的實(shí)例。如果你傳入一個(gè)類的實(shí)例并且后續(xù)通過instance.property newValue這種方式修改屬性工具集可能無法捕獲到這個(gè)變化。因?yàn)楣ぞ呒蕾嚨氖菍?duì)特定對(duì)象的屬性進(jìn)行攔截。最佳實(shí)踐是將需要響應(yīng)的數(shù)據(jù)設(shè)計(jì)成純數(shù)據(jù)對(duì)象POJO而將方法邏輯放在其他地方。或者你需要確保你的類在屬性設(shè)置時(shí)主動(dòng)觸發(fā)工具集的更新通知。原工具集更傾向于前者。3.3 在編輯器中進(jìn)行UI綁定以VMCustom為例現(xiàn)在我們來創(chuàng)建一個(gè)簡(jiǎn)單的UI顯示玩家血量和名字。在場(chǎng)景中創(chuàng)建一個(gè)Canvas下面創(chuàng)建一個(gè)Label節(jié)點(diǎn)命名為labelHp。選中l(wèi)abelHp節(jié)點(diǎn)在屬性檢查器底部點(diǎn)擊添加組件 - 用戶腳本組件找到VMCustom組件并添加。添加后你會(huì)看到VMCustom組件的屬性面板Watch Path (監(jiān)聽路徑)這是核心配置。它告訴組件“你要監(jiān)聽哪個(gè)數(shù)據(jù)” 路徑是相對(duì)于ViewModel標(biāo)簽的。因?yàn)槲覀冏?cè)的標(biāo)簽是player要監(jiān)聽血量就填寫player.hp。Component (組件)這個(gè)會(huì)自動(dòng)識(shí)別當(dāng)前節(jié)點(diǎn)上的第一個(gè)組件比如cc.Label。通常不用手動(dòng)改。Property (屬性)這個(gè)會(huì)自動(dòng)識(shí)別上一個(gè)選中組件的常用屬性比如cc.Label的string屬性。我們的血量是數(shù)字需要顯示為文本所以綁定到string屬性正合適。Converter (轉(zhuǎn)換器)可選。如果數(shù)據(jù)需要格式化比如血量要顯示為“HP: 100/100”可以在這里填寫一個(gè)函數(shù)名或使用內(nèi)置的轉(zhuǎn)換規(guī)則。我們留空。按照同樣的方法再創(chuàng)建一個(gè)labelName節(jié)點(diǎn)綁定VMCustomWatch Path填寫player.name。運(yùn)行游戲你應(yīng)該能看到Label顯示了初始的“100”和“冒險(xiǎn)者”?，F(xiàn)在在GameManager的某個(gè)地方比如一個(gè)按鈕回調(diào)里嘗試修改數(shù)據(jù)// 假設(shè)在某個(gè)函數(shù)中 changeData() { // 錯(cuò)誤示范直接修改原始對(duì)象UI可能不會(huì)更新 // let data VM.get(player); data.hp 50; // 正確示范使用工具集提供的set方法或直接修改被VM管理的數(shù)據(jù)對(duì)象引用。 // 首先獲取被VM托管的數(shù)據(jù)對(duì)象 const playerVM VM.get(player); if (playerVM) { playerVM.hp 50; // 工具集內(nèi)部應(yīng)該已經(jīng)包裝了setter能觸發(fā)更新 playerVM.name “修改后的名字”; } // 或者如果工具集提供了VM.set方法 // VM.set(player.hp, 50); }如果一切配置正確當(dāng)你調(diào)用changeData時(shí)場(chǎng)景中的兩個(gè)Label文本應(yīng)該會(huì)自動(dòng)更新無需任何getComponent或find操作。3.4 處理復(fù)雜綁定VMEvent與自定義轉(zhuǎn)換VMEvent - 將UI事件綁定到命令按鈕點(diǎn)擊是最常見的UI事件。傳統(tǒng)方式是在按鈕節(jié)點(diǎn)上掛腳本定義onClick方法。用MVVM我們可以將點(diǎn)擊事件直接綁定到ViewModel的一個(gè)函數(shù)命令上。在GameManager注冊(cè)的playerData對(duì)象上增加一個(gè)方法命令const playerData { hp: 100, // ... 其他屬性 // 新增一個(gè)方法 onAttackClicked: function() { console.log(‘攻擊命令被觸發(fā)’); // 這里可以調(diào)用其他模塊造成傷害等 this.hp - 10; // 注意這里的‘this’指向可能有問題實(shí)踐中建議用箭頭函數(shù)或綁定this }.bind(this) // 綁定this確保能訪問到正確的數(shù)據(jù) }; VM.add(playerData, ‘player’);注意在JavaScript/TypeScript中對(duì)象內(nèi)的方法的this指向是個(gè)經(jīng)典問題。為了確保在命令被調(diào)用時(shí)this仍然指向playerData對(duì)象我們使用了.bind(this)。更好的做法是使用箭頭函數(shù)或者在工具集的事件觸發(fā)上下文中處理好this。具體需要參考工具集的文檔或源碼。在場(chǎng)景中創(chuàng)建一個(gè)Button節(jié)點(diǎn)選中它添加VMEvent組件。配置VMEvent組件Watch Path: 填寫player.onAttackClicked。注意這里綁定的是函數(shù)而不是數(shù)據(jù)。Event Type: 選擇click按鈕點(diǎn)擊。Component: 自動(dòng)識(shí)別為cc.Button。運(yùn)行游戲點(diǎn)擊按鈕控制臺(tái)應(yīng)該會(huì)輸出“攻擊命令被觸發(fā)”并且玩家的hp數(shù)據(jù)會(huì)減少如果有一個(gè)綁定player.hp的Label它的值也會(huì)同步更新。這就實(shí)現(xiàn)了視圖到模型的反向綁定。使用Converter進(jìn)行數(shù)據(jù)格式化很多時(shí)候原始數(shù)據(jù)不能直接顯示。比如金幣數(shù)量999我們想顯示為“999G”?；蛘哐?.75百分比想顯示為“75%”。 在VMCustom組件中Converter屬性就是干這個(gè)的。你可以填寫一個(gè)全局注冊(cè)的函數(shù)名。在某個(gè)工具腳本中定義一個(gè)轉(zhuǎn)換函數(shù)window.formatGold function(value) { // 注冊(cè)到全局簡(jiǎn)單演示實(shí)際項(xiàng)目建議用模塊化管理 return value ‘G’; };在綁定金幣數(shù)量的VMCustom組件上Converter屬性填寫formatGold。當(dāng)player.gold數(shù)據(jù)變化時(shí)formatGold函數(shù)會(huì)被調(diào)用傳入gold的值其返回值將設(shè)置給Label的string屬性。對(duì)于更復(fù)雜的轉(zhuǎn)換邏輯比如根據(jù)血量值返回不同的顏色你可能需要結(jié)合多個(gè)綁定或使用條件組件這體現(xiàn)了MVVM工具集在復(fù)雜UI表現(xiàn)上的靈活性。4. 高級(jí)用法、性能優(yōu)化與避坑指南4.1 使用VMParent管理Prefab實(shí)例數(shù)據(jù)這是該工具集設(shè)計(jì)中的一個(gè)亮點(diǎn)能極大提升Prefab的復(fù)用性和數(shù)據(jù)管理清晰度。假設(shè)我們有一個(gè)ItemIcon.prefab用來顯示背包里的物品圖標(biāo)和數(shù)量。創(chuàng)建Prefab和組件創(chuàng)建一個(gè)Sprite圖標(biāo)和一個(gè)Label數(shù)量節(jié)點(diǎn)做成Prefab命名為ItemIcon。為這個(gè)Prefab的根節(jié)點(diǎn)創(chuàng)建一個(gè)腳本ItemIconVM.ts并讓它繼承自VMParent。// ItemIconVM.ts const { ccclass, property } cc._decorator; import VMParent from ‘../mvvm/VMParent’; // 根據(jù)路徑調(diào)整 ccclass export default class ItemIconVM extends VMParent { // 定義Prefab內(nèi)部的數(shù)據(jù)結(jié)構(gòu) // 注意這個(gè)data屬性是VMParent基類期望的用于存儲(chǔ)該實(shí)例的私有數(shù)據(jù) // property 可以讓它在編輯器設(shè)置也可以在代碼中動(dòng)態(tài)賦值 property({ type: cc.Object, visible: true }) private _data: any null; // 實(shí)際使用中可能需要更具體的類型 // 可以在onLoad或start里初始化_data onLoad() { super.onLoad(); // 必須調(diào)用父類onLoad if (!this._data) { this._data { itemId: 0, count: 1, name: ‘未知物品’ }; } // VMParent內(nèi)部會(huì)使用這個(gè)_data來創(chuàng)建獨(dú)立的ViewModel } // 提供一個(gè)方法供外部設(shè)置數(shù)據(jù) public setItemInfo(itemId: number, count: number, name: string) { // 直接修改數(shù)據(jù)對(duì)象變化會(huì)自動(dòng)同步到綁定的UI this.data.itemId itemId; // ‘data’是VMParent的getter/setter訪問的是內(nèi)部ViewModel this.data.count count; this.data.name name; } }在Prefab內(nèi)部進(jìn)行綁定選中ItemIconPrefab根節(jié)點(diǎn)下的Label子節(jié)點(diǎn)。添加VMCustom組件。在Watch Path中填寫*.count。這里的*是一個(gè)通配符VMParent會(huì)在運(yùn)行時(shí)將其替換為該實(shí)例獨(dú)有的ViewModel標(biāo)識(shí)符通常是tag。同樣可以給圖標(biāo)Sprite綁定一個(gè)VMCustomWatch Path填寫*.icon假設(shè)數(shù)據(jù)中有icon字段可能是spriteFrame的路徑或索引Property選擇spriteFrame。在游戲中使用// 在背包UI的腳本中 import ItemIconVM from ‘./ItemIconVM’; // 動(dòng)態(tài)創(chuàng)建ItemIcon Prefab cc.resources.load(‘prefab/ItemIcon’, cc.Prefab, (err, prefab) { const itemNode cc.instantiate(prefab); this.node.addChild(itemNode); const itemVM itemNode.getComponent(ItemIconVM); itemVM.setItemInfo(1001, 5, ‘治療藥水’); // 現(xiàn)在這個(gè)Prefab實(shí)例內(nèi)部顯示的數(shù)量和圖標(biāo)完全由它自己的data驅(qū)動(dòng)與其他實(shí)例互不干擾。 });使用VMParent后每個(gè)ItemIcon實(shí)例都擁有自己獨(dú)立的、封閉的數(shù)據(jù)上下文非常適合列表、背包、技能圖標(biāo)等需要大量復(fù)用的UI元素。4.2 性能考量與優(yōu)化建議任何數(shù)據(jù)綁定系統(tǒng)都會(huì)帶來一定的運(yùn)行時(shí)開銷主要是監(jiān)聽器的管理和事件的通知。對(duì)于大型項(xiàng)目以下幾點(diǎn)需要特別注意減少綁定數(shù)量不是每個(gè)需要更新的UI節(jié)點(diǎn)都必須綁定。對(duì)于更新極其頻繁的數(shù)據(jù)如每幀變化的角色坐標(biāo)用傳統(tǒng)的直接更新可能效率更高。MVVM更適合用于響應(yīng)離散事件的UI更新如血量變化、獲得物品、任務(wù)狀態(tài)更新等。避免深層監(jiān)聽watchPath支持嵌套路徑如player.equipment.weapon.attackPower。監(jiān)聽越深的屬性工具集需要建立的依賴關(guān)系可能越復(fù)雜。盡量將頻繁更新的數(shù)據(jù)放在扁平的結(jié)構(gòu)中或者監(jiān)聽上一級(jí)對(duì)象在轉(zhuǎn)換函數(shù)中取用具體深層次屬性。及時(shí)銷毀監(jiān)聽對(duì)于動(dòng)態(tài)創(chuàng)建和銷毀的UI如彈窗、列表項(xiàng)確保它們對(duì)應(yīng)的VMBase組件在節(jié)點(diǎn)銷毀時(shí)也解除對(duì)ViewModel的監(jiān)聽。通常VMBase及其子類VMCustom,VMParent會(huì)在onDestroy生命周期中自動(dòng)處理但如果你有自定義的綁定邏輯務(wù)必手動(dòng)清理。批量更新在某些情況下你可能需要同時(shí)修改多個(gè)關(guān)聯(lián)數(shù)據(jù)。如果一個(gè)個(gè)地改會(huì)觸發(fā)多次UI更新和可能的重排重繪。理想情況下工具集應(yīng)支持批量更新或者在數(shù)據(jù)模型層面提供一個(gè)batchUpdate方法在一次事務(wù)中修改所有數(shù)據(jù)最后只通知一次。你可以查看工具集是否支持或者自己在修改數(shù)據(jù)前暫停通知修改后再恢復(fù)。使用對(duì)象引用而非路徑對(duì)于極其性能敏感的場(chǎng)合可以考慮將數(shù)據(jù)對(duì)象的引用直接傳遞給UI組件而不是通過字符串路徑來監(jiān)聽。但這會(huì)犧牲一些MVVM的聲明式便利性回到一些手動(dòng)控制的模式。這需要你根據(jù)實(shí)際情況權(quán)衡。4.3 常見問題與排查技巧實(shí)錄在實(shí)際使用中你肯定會(huì)遇到各種問題。下面是我踩過的一些坑和解決辦法問題1數(shù)據(jù)改變了但UI不更新。檢查點(diǎn)1數(shù)據(jù)修改方式。你是否直接修改了一個(gè)局部變量而不是修改被VM管理的數(shù)據(jù)對(duì)象確保你是通過VM.get(‘tag’)獲取到對(duì)象引用然后修改其屬性或者使用工具集提供的VM.set方法。檢查點(diǎn)2路徑是否正確。檢查Watch Path是否拼寫正確大小寫是否匹配標(biāo)簽tag是否注冊(cè)。可以在修改數(shù)據(jù)的代碼后打印一下VM.get(‘yourTag’)看看當(dāng)前值。檢查點(diǎn)3組件生命周期。UI組件VMCustom的onLoad可能在你的數(shù)據(jù)修改之后才執(zhí)行。確保數(shù)據(jù)初始化在場(chǎng)景加載早期完成例如在GameManager的onLoad中并且UI綁定的數(shù)據(jù)有合理的默認(rèn)值。檢查點(diǎn)4數(shù)據(jù)類型。你綁定的組件屬性是否接受你提供的數(shù)據(jù)類型例如將一個(gè)數(shù)字綁定到cc.Label.string是沒問題的會(huì)隱式轉(zhuǎn)換但將一個(gè)字符串綁定到cc.ProgressBar.progress需要0-1的數(shù)字就會(huì)失敗。問題2使用了VMParent但子節(jié)點(diǎn)綁定*.xxx無效。檢查點(diǎn)1是否繼承正確。確保Prefab根節(jié)點(diǎn)的腳本確實(shí)繼承自VMParent而不是cc.Component。檢查點(diǎn)2是否調(diào)用了super.onLoad()。在自定義的onLoad方法中必須調(diào)用super.onLoad()這是VMParent初始化其ViewModel的關(guān)鍵。檢查點(diǎn)3data屬性是否已初始化。在onLoad時(shí)VMParent需要this.data有值即使是空對(duì)象{}。最好在onLoad開頭或?qū)傩詸z查器中給予一個(gè)默認(rèn)值。問題3綁定路徑查錯(cuò)困難尤其是Prefab嵌套時(shí)。這是作者在注意事項(xiàng)里提到的缺點(diǎn)。當(dāng)項(xiàng)目龐大時(shí)一個(gè)Label不顯示你可能需要層層查找它綁定的是什么路徑這個(gè)路徑又對(duì)應(yīng)哪個(gè)數(shù)據(jù)模型。技巧1使用調(diào)試標(biāo)簽?？梢詫懸粋€(gè)簡(jiǎn)單的調(diào)試組件在運(yùn)行時(shí)將節(jié)點(diǎn)的完整綁定路徑以文本形式顯示在節(jié)點(diǎn)上方僅開發(fā)模式方便定位。技巧2善用搜索。Cocos Creator編輯器可以搜索場(chǎng)景和Prefab中所有使用特定組件或包含特定字符串的節(jié)點(diǎn)。搜索watchPath中的關(guān)鍵字可以快速找到所有綁定該數(shù)據(jù)的UI。技巧3規(guī)劃好數(shù)據(jù)路徑命名空間。像global.player.stats.hp、ui.shop.selectedItem.icon這樣有層次、語義清晰的路徑比簡(jiǎn)單的hp、icon要好維護(hù)得多。問題4如何與現(xiàn)有的游戲邏輯如網(wǎng)絡(luò)模塊、戰(zhàn)斗計(jì)算整合MVVM工具集只關(guān)心UI層的數(shù)據(jù)綁定不替代你的游戲邏輯層。整合模式通常是網(wǎng)絡(luò)模塊收到數(shù)據(jù)包 - 解析并更新對(duì)應(yīng)的數(shù)據(jù)模型可能是全局的GameModel。數(shù)據(jù)模型已經(jīng)被注冊(cè)為ViewModelVM.add(gameModel, ‘game’)或者數(shù)據(jù)模型的某個(gè)屬性是響應(yīng)式的。數(shù)據(jù)模型的更新自動(dòng)觸發(fā)UI刷新。用戶操作UI - 觸發(fā)VMEvent綁定的命令 - 命令調(diào)用游戲邏輯模塊如發(fā)起網(wǎng)絡(luò)請(qǐng)求、執(zhí)行技能- 邏輯模塊修改數(shù)據(jù)模型完成閉環(huán)。關(guān)鍵在于游戲的核心邏輯戰(zhàn)斗公式、AI、網(wǎng)絡(luò)通信應(yīng)該與MVVM工具集解耦它們只是數(shù)據(jù)模型的“生產(chǎn)者”和“消費(fèi)者”。數(shù)據(jù)模型是它們之間的橋梁。5. 項(xiàng)目適配、擴(kuò)展與生態(tài)思考5.1 如何將現(xiàn)有項(xiàng)目遷移到MVVM模式對(duì)于已有項(xiàng)目全盤重寫是不現(xiàn)實(shí)的。建議采用漸進(jìn)式遷移策略選擇試點(diǎn)找一個(gè)功能相對(duì)獨(dú)立、UI交互復(fù)雜的模塊開始比如“角色屬性面板”或“背包系統(tǒng)”。創(chuàng)建新的ViewModel為這個(gè)模塊創(chuàng)建獨(dú)立的數(shù)據(jù)模型用VM.add注冊(cè)。暫時(shí)不要?jiǎng)釉械臉I(yè)務(wù)邏輯數(shù)據(jù)。重寫UI面板將試點(diǎn)模塊的UI面板用Prefab重建使用VMCustom和VMEvent進(jìn)行數(shù)據(jù)綁定。新的面板使用新的ViewModel。建立橋梁在原有業(yè)務(wù)邏輯修改數(shù)據(jù)的地方增加同步代碼到新的ViewModel。例如原來修改血量的函數(shù)在最后加一行VM.get(‘player’).hp newHpValue。這樣舊邏輯驅(qū)動(dòng)新UI。逐步替換一個(gè)模塊穩(wěn)定后再遷移下一個(gè)。最終目標(biāo)是讓核心游戲邏輯直接操作ViewModel徹底移除舊的、分散的UI更新代碼。5.2 工具集的不足與可能的擴(kuò)展方向這個(gè)工具集非常輕量但也因此有一些局限性了解這些能幫助你在合適的場(chǎng)景使用它或在其基礎(chǔ)上進(jìn)行擴(kuò)展類型安全watchPath是字符串失去了TypeScript的類型檢查和自動(dòng)補(bǔ)全優(yōu)勢(shì)。可以通過封裝一層用枚舉或常量來定義路徑減少拼寫錯(cuò)誤。復(fù)雜表達(dá)式綁定不支持像{{ hp }}/{{ maxHp }}這樣的模板表達(dá)式。需要顯示“100/1000”這樣的文本只能通過綁定一個(gè)計(jì)算屬性在ViewModel中定義get hpText() { return this.hp ‘/’ this.maxHp; }或使用Converter來實(shí)現(xiàn)。列表渲染沒有內(nèi)置的對(duì)于數(shù)組數(shù)據(jù)的列表渲染支持如v-for。渲染一個(gè)背包列表仍然需要你手動(dòng)創(chuàng)建Prefab實(shí)例并為每個(gè)實(shí)例設(shè)置對(duì)應(yīng)的數(shù)據(jù)索引?？梢曰赩MParent封裝一個(gè)Repeater組件來簡(jiǎn)化這個(gè)過程。調(diào)試工具缺乏可視化的調(diào)試工具來查看當(dāng)前所有活躍的綁定和數(shù)據(jù)流。這是一個(gè)很好的擴(kuò)展方向可以開發(fā)一個(gè)編輯器擴(kuò)展面板實(shí)時(shí)顯示數(shù)據(jù)狀態(tài)和綁定關(guān)系。5.3 與其他Cocos Creator生態(tài)的配合這個(gè)MVVM工具集可以和你項(xiàng)目中的其他插件或模式良好共存狀態(tài)管理庫如Redux模式你可以將Redux的Store整個(gè)或部分作為ViewModel注冊(cè)到VM中。Redux負(fù)責(zé)復(fù)雜的狀態(tài)流轉(zhuǎn)和純函數(shù)更新MVVM工具集負(fù)責(zé)將狀態(tài)變化映射到UI。這是非常強(qiáng)大的組合。動(dòng)畫系統(tǒng)你可以綁定數(shù)據(jù)到節(jié)點(diǎn)的position,scale,opacity等屬性結(jié)合Cocos Creator的cc.tween或動(dòng)作系統(tǒng)實(shí)現(xiàn)數(shù)據(jù)驅(qū)動(dòng)的動(dòng)畫。例如血量減少時(shí)血條不僅寬度變化還可以觸發(fā)一個(gè)紅色的閃爍動(dòng)畫通過監(jiān)聽血量變化的事件在VMCustom的Converter或回調(diào)中觸發(fā)動(dòng)畫。本地化系統(tǒng)可以將當(dāng)前語言包作為一個(gè)ViewModel。所有需要本地化的文本Label都綁定到類似i18n.key這樣的路徑上切換語言時(shí)只需更新語言包ViewModel所有UI文本自動(dòng)刷新。這套cocos_creator_mvvm_tools工具集其價(jià)值在于它提供了一種思路一種更優(yōu)雅的UI開發(fā)范式。它可能不是最功能全面的但它的輕量、易用和對(duì)Cocos Creator編輯器工作流的貼合使得它成為改善中小型項(xiàng)目UI代碼結(jié)構(gòu)的絕佳起點(diǎn)。對(duì)于追求開發(fā)效率和代碼可維護(hù)性的團(tuán)隊(duì)來說引入這樣的工具初期可能會(huì)有學(xué)習(xí)成本但長(zhǎng)期來看在應(yīng)對(duì)UI需求變更和邏輯復(fù)雜化時(shí)它所節(jié)省的心力和時(shí)間將是巨大的。