前言前面 18 篇31–48我们把 V1 状态管理体系用了个遍——State、Prop、Link、Provide/Consume、ObservedObjectLink、Watch、Reusable、LazyForEach。V1 成熟稳定但有些本质局限浅观察要整体赋值、Observed 类必须 new 实例化、跨组件数据流装饰器多易混、批量更新要靠同调用栈。HarmonyOS 推出了V2 状态管理用更统一的装饰器和深观察机制解决了这些痛点。本篇是 V1 收尾总结对比 V1 与 V2 的核心差异为下篇 V2 迁移做铺垫。把V1 八装饰器复盘、V1 三大局限、V2 六装饰器预览、迁移决策四大要点讲透。提示本系列不讲 ArkTS 基础语法与环境搭建假设你已跟完第 1–48 篇。本篇是阶段二第十九篇V1 收尾。一、V1 八装饰器复盘1.1 V1 状态管理全家福装饰器作用核心篇State响应式状态改变触发重渲染第 31Prop父子单向只读浅拷贝第 40Link父子双向$val 传引用第 41Provide/Consume跨层隐式共享键名匹配第 42ObservedObjectLink类实例深观察改内部属性触发第 43Watch状态变化副作用回调第 39ReusableListItem 复用池离屏入池第 471.2 装饰器关系图State响应式根基 ├─ Prop父子单向只读 ├─ Link父子双向 ├─ Provide/Consume跨层隐式 ├─ ObservedObjectLink类实例深观察 └─ Watch变化副作用 Reusable列表复用独立关键经验V1 以 State 为根基其他装饰器要么配合 StateProp/Link/Watch/Observed要么独立处理列表复用Reusable。二、V1 三大局限2.1 局限一浅观察要整体赋值State combo: ComboInfo { count: 0, multiplier: 1, lastMergeTime: 0 }; State cats: Cat[] []; // ❌ 改内部属性不触发 this.combo.count 5; this.cats[0].y 7; // ✅ 要整体赋值 this.combo { ...this.combo, count: 5 }; this.cats [...this.cats];痛点嵌套对象/数组改内部属性要整体赋值代码冗长且易忘——忘整体赋值就 UI 不刷新是 V1 最经典 bug。升级 Observed 的代价Cat 要从 interface 改成Observed class必须new实例化子组件必须ObjectLink——改动面大。2.2 局限二Observed 类必须 new 实例化Observed export class Cat { constructor(id: string, level: CatLevel, x: number, y: number, falling: boolean) { /* ... */ } } // ✅ 必须 new const cat new Cat(cat_0, CatLevel.SMALL, 0, 0, true); // ❌ 对象字面量不走构造器不被 Observed 标记 const cat { id: cat_0, level: CatLevel.SMALL, x: 0, y: 0, falling: true };痛点从 interface 改成 class 要写 constructor所有实例化点从对象字面量改成 new——迁移成本高。2.3 局限三跨组件数据流装饰器多易混场景装饰器传递语法显示型只读Propthis.score编辑型双向Linkthis.$gameState跨层隐式Provide/Consume键名匹配类深观察ObjectLink普通值传变化副作用Watch字符串方法名痛点五种装饰器语义接近初学者易混——Prop 还是 LinkObjectLink 还是 PropWatch 字符串拼错不报错。三、V2 六装饰器预览3.1 V2 状态管理全家福装饰器作用V1 对应Local本地响应式状态StateParam父子只读接收PropEvent子触发父回调新V1 要手写函数 propOnce单次初始化新ObservedV2Trace类实例深观察字段级ObservedObjectLinkMonitor状态变化监听多字段Watch3.2 V2 的统一简化// V2Local 替代 State Local score: number 0; // V2Param 替代 Prop且深观察自动 Param combo: ComboInfo; // 改 combo.count 也触发 // V2Event 替代手写函数 prop Event onScoreAdd: (delta: number) void; // V2ObservedV2 Trace 替代 Observed ObjectLink ObservedV2 export class Cat { Trace id: string ; Trace x: number 0; Trace y: number 0; // 字段级深观察改 cat.y 触发 } // V2Monitor 替代 Watch可监多字段 Monitor(combo.count, combo.multiplier) onComboChange(monitor: Monitor): void { /* ... */ }关键经验V2 用更少装饰器覆盖更多场景——Param 自动深观察省了 ObjectLinkEvent 替代手写函数 prop 简化跨组件触发。3.3 V2 深观察的字段级革命// V1 Observed整类深观察 Observed export class Cat { id: string; // 所有字段都深观察 y: number; } // V2 ObservedV2Trace字段级深观察 ObservedV2 export class Cat { id: string ; // 不打 Trace不深观察 Trace y: number 0; // 只 y 深观察 }关键经验V2 Trace 字段级深观察——只监听需要响应的字段省无谓依赖追踪开销。四、V1 vs V2 核心差异表4.1 装饰器对照场景V1V2V2 优势本地状态StateLocal语义更清晰本地父子只读Prop浅拷贝Param深观察改内部属性也触发父子双向Link$valParamEvent分离数据与事件跨层共享Provide/ConsumeProvide/Consume保留V2 也支持类深观察ObservedObjectLinkObservedV2Trace字段级深观察变化监听Watch单字段Monitor多字段一次监多字段列表复用ReusableReusable保留4.2 浅观察 vs 深观察维度V1 State/PropV2 Local/Param嵌套对象改属性❌ 要整体赋值✅ 直接触发数组项改属性❌ 要两层赋值✅ 直接触发实例化interface 字面量 OKclass newV2 也代码量多整体赋值少改属性即可4.3 批量更新维度V1V2被动批量✅ 同调用栈✅ 同调用栈主动批量❌ 无要 setTimeout 套路✅batchUpdateAPI4.4 类深观察对比// V1整类深观察 子必须 ObjectLink Observed export class Cat { id: string; y: number; /* 所有字段 */ } Component struct CatItem { ObjectLink cat: Cat; // 必须用 ObjectLink build() { /* ... */ } } // V2字段级深观察 子用 Param自深观察 ObservedV2 export class Cat { id: string ; // 不 Trace不深观察 Trace y: number 0; // 只 y 深观察 } Component struct CatItem { Param cat: Cat; // 用 Param自深观察 build() { /* ... */ } }关键经验V2 用 Param 替代 ObjectLink——Param 自带深观察接 ObservedV2 实例不用单独装饰器。五、迁移决策5.1 何时迁 V2场景推荐新项目✅ 直接上 V2老项目小改⚠️ 混用 V1 V2同组件不可混老项目大改状态管理痛点明显✅ 全迁 V2老项目稳定无痛点❌ 保持 V15.2 混用限制// ⚠️ 同组件内 V1 V2 不能混 Component struct BadMixed { State score: number 0; // V1 Local combo: ComboInfo { /* ... */ }; // V2 // 编译报错或行为未定义 }关键经验V1 V2 不能在同一组件混用——整个组件要么全 V1 要么全 V2但不同组件可以分别用 V1 V2。5.3 迁移工作量评估迁移项工作量收益State → Local低改名语义清晰Prop → Param低改名深观察省整体赋值Link → ParamEvent中拆双向数据/事件分离Observed → ObservedV2Trace中字段标 Trace字段级深观察ObjectLink → Param低改名少一装饰器Watch → Monitor中改签名多字段监听关键经验迁移核心收益是「深观察省整体赋值」和「字段级精细监听」——痛点明显的项目迁 V2 值得。六、猫猫大作战 V1 现状总结6.1 当前 V1 用到的装饰器装饰器用处篇Statescore、cats、combo、gameState 等所有响应式状态31–45WatchgameState 变化触发音效/震动39Provide/ConsumegameState、score 跨层共享给嵌套子组件42ObservedObjectLinkCat 类深观察CatItem 子组件43、44ReusableRecordItem 列表复用未来战绩页476.2 当前 V1 痛点痛点当前解法V2 解法combo 嵌套对象改属性要整体赋值{...this.combo, count: 5}this.combo.count 5直接触发cats 数组项改属性要两层赋值引擎返回新数组整体赋值this.cats[0].y 7直接触发gameState 变化监听单字段Watch(‘onGameStateChange’)Monitor 可监多字段PauseOverlay 改父 gameStateLink $valParam Event 分离关键经验猫猫大作战当前痛点集中在「嵌套对象/数组整体赋值」——迁 V2 能显著简化。6.3 迁移优先级建议优先迁 1. State → Local改名简单收益语义清晰 2. Prop → Param改 combo/cats 等嵌套对象为深观察 3. Observed → ObservedV2TraceCat 字段级深观察 可选迁 4. Link → ParamEventPauseOverlay 等编辑型组件 5. Watch → MonitorgameState 监听 保留 6. Provide/ConsumeV2 也支持不改 7. ReusableV2 也支持不改七、踩坑提示7.1 V1 V2 同组件混用// ❌ 错误同组件混用编译报错 Component struct Bad { State score: number 0; // V1 Local combo: ComboInfo { /* ... */ }; // V2 } // ✅ 正确整个组件统一 V1 或 V2 Component struct GoodV1 { State score: number 0; State combo: ComboInfo { /* ... */ }; } Component struct GoodV2 { Local score: number 0; Local combo: ComboInfo { /* ... */ }; } ### 7.2 以为 V2 全替代 V1 ts // ⚠️ V2 不是全替代有些 V1 装饰器 V2 也支持 Provide/Consume // V1 V2 都有不变 Reusable // V1 V2 都有不变实战经验V2 是 V1 的进化不是替代——Provide/Consume/Reusable 保持State/Prop/Link/Observed/Watch 升级。7.3 迁移忘改实例化// V1 Observed class Observed export class Cat { /* ... */ } const cat new Cat(/* ... */); // V2 ObservedV2 class ObservedV2 export class Cat { Trace y: number 0; } // 还是 new 实例化不变 const cat new Cat(/* ... */); // ⚠️ 但如果 V1 用 interface 对象字面量迁 V2 要改成 class new ## 八、调试技巧 1. **DevEco 版本支持**确认 DevEco Studio 和 SDK 支持 V2API 12。 2. **console.info 对比 V1 V2 行为**迁后改属性看是否触发V2 应触发。 3. **混用排查**编译报「V1 V2 不能混用」检查组件内装饰器。 4. **Trace 忘标**迁 ObservedV2 后忘给字段标 Trace该字段不深观察。 ## 九、性能与最佳实践 1. **新项目直接上 V2**——深观察省整体赋值字段级精细监听。 2. **老项目痛点明显才迁**——稳定无痛点保持 V1迁要全组件迁。 3. **V1 V2 不能同组件混用**——整个组件统一选一版。 4. **Provide/Consume/Reusable V1 V2 都支持**——迁移时这两个保留。 5. **迁移核心收益是深观察**——嵌套对象/数组改属性直接触发省整体赋值。 6. **Monitor 多字段监听**——一次监听多个字段变化比 Watch 灵活。 ## 十、阶段二进度小结31–49 本篇是阶段二「状态管理 交互 动画」第 19 篇V1 收尾 | 篇 | 主题 | 核心要点 | |----|------|----------| | 31 | State | 响应式状态 | | 32 | 多 State | 同帧批量 | | 33 | setInterval 主循环 | 100ms 物理周期 | | 34 | 计时器 | 1000ms 秒级 | | 35 | spawnTimer | 2000ms 自动生成 | | 36 | clearTimers | -1 哨兵三时机清理 | | 37 | onClick 列投放 | 闭包捕获 col | | 38 | 箭头函数 this | 回调统一箭头 | | 39 | Watch | 状态变化副作用 | | 40 | Prop | 父子单向只读 | | 41 | Link | 父子双向 $val | | 42 | Provide/Consume | 跨层隐式共享 | | 43 | ObservedObjectLink | 类实例深观察 | | 44 | 数组项替换 | ForEach 密钥 diff | | 45 | 批量更新 | 被动批量 batchUpdate | | 46 | 嵌套陷阱 | 浅观察整体赋值 | | 47 | Reusable | 列表复用池 | | 48 | LazyForEach | 大列表按需渲染 | | 49本篇 | V1 局限总结 | V1 V2 差异 | 接下来第 50 篇会专讲 V2 迁移——Local/Param/Event/Trace/Monitor 的实战。 ## 总结 本篇我们做 V1 收尾总结掌握了**V1 八装饰器复盘**、**V1 三大局限浅观察、Observed 必须 new、装饰器多易混**、**V2 六装饰器预览**、**迁移决策新项目直接 V2老项目痛点明显才迁**四大要点。核心要点**V1 浅观察要整体赋值是最大痛点V2 Param 自深观察省整体赋值Trace 字段级精细监听V1 V2 不能同组件混用**。 下一篇我们将专讲 V2 迁移实战——Local/Param/Event/ObservedV2Trace/Monitor 的改造。 如果这篇文章对你有帮助欢迎点赞、收藏⭐、关注你的支持是我持续创作的动力 --- **相关资源** - 「猫猫大作战」项目源码本仓库 entry/src/main/ets/pages/Index.ets、entry/src/main/ets/components/ - [ArkUI V2 状态管理官方指南](https://developer.huawei.com/consumer/cn/doc/harmonyos-guides/arkts-state-management-v2) - [ArkUI V1 V2 差异对比官方文档](https://developer.huawei.com/consumer/cn/doc/harmonyos-guides/arkts-state-management-overview) - [ArkUI 状态管理迁移最佳实践](https://developer.huawei.com/consumer/cn/doc/harmonyos-guides/bpta-state-migration) - [开源鸿蒙跨平台社区](https://openharmonycrossplatform.csdn.net) - [HarmonyOS 开发者官方文档首页](https://developer.huawei.com/consumer/cn/doc/) - 系列索引本仓库 articles/INDEX.md