文章目录
- 一、引言
- 二、@Computed 装饰器简介
- 核心特点
- 使用限制
- 三、基础使用示例
- 四、进阶场景：复杂计算与列表渲染
- 五、什么时候用 @Computed？
- 六、总结
一、引言
在鸿蒙（HarmonyOS）应用开发中，状态管理是构建响应式 UI 的核心。当 UI 需要展示基于多个状态变量计算得出的派生数据时，如何高效地管理这些计算逻辑，避免不必要的性能开销，是开发者需要关注的重点。
@Computed是鸿蒙状态管理 V2 提供的方法装饰器，专门用于装饰getter访问器。它能自动缓存计算结果，仅在依赖的状态变量发生变化时才重新计算，从而显著提升应用性能。本文将深入介绍@Computed的核心概念、使用限制、实战示例以及最佳实践。
二、@Computed 装饰器简介
@Computed是鸿蒙状态管理 V2 提供的方法装饰器，用于装饰getter访问器，自动缓存计算结果。当依赖的状态变量变化时，只会重新计算一次，后续访问直接返回缓存值，从而避免 UI 中多次使用相同计算逻辑带来的重复性能开销。
核心特点
- 仅在依赖变化时重新计算：只有
@Computed访问器中读取的@Local、@Trace等状态变量变化时，才会触发重新计算。 - 只读属性：
@Computed装饰的属性不可赋值，也不能与!!双向绑定连用。 - 只能在
@ComponentV2或@ObservedV2中使用：这是 V2 状态管理框架的一部分。
使用限制
- 只能装饰
getter方法，不能用于普通方法或属性。 - 计算中不能修改依赖的变量，否则可能导致循环计算引发
appfreeze。 - 多个
@Computed之间需警惕循环求解。
三、基础使用示例
以下示例展示了一个典型的场景：通过firstName和lastName组合生成fullName，UI 中多处使用该计算值时，@Computed只求解一次。
@Entry@ComponentV2struct UserProfile{@LocalfirstName:string='Hua';@LocallastName:string='Li';@ComputedgetfullName():string{console.info('Computed fullName 执行');returnthis.firstName+' '+this.lastName;}build(){Column({space:12}){// UI 中两处使用 fullName，但 @Computed 只会计算一次Text('全名: '+this.fullName).fontSize(20)Text('欢迎, '+this.fullName).fontSize(20)Button('修改姓氏').onClick(()=>{this.lastName+='a';// 触发 fullName 重新计算})Button('修改名字').onClick(()=>{this.firstName+='n';// 触发 fullName 重新计算})}.width("100%")}}运行效果：
运行效果分析：
- 页面初始化时，
fullName会计算一次，输出日志Computed fullName 执行。 - 两个
Text组件绑定了this.fullName，但第二次及后续访问均读取缓存值，不再执行计算逻辑。 - 点击修改姓氏或修改名字按钮改变状态变量时，
fullName重新计算一次，UI 同步更新。
四、进阶场景：复杂计算与列表渲染
当计算逻辑较为复杂，或需要在列表渲染中多次使用派生数据时，@Computed的优势更加明显。
@Entry@ComponentV2struct ShoppingCart{@Localitems:Item[]=[{name:'苹果',price:5,count:3},{name:'香蕉',price:3,count:5},{name:'橘子',price:4,count:2},];@ComputedgettotalPrice():number{console.info('Computed totalPrice 执行');returnthis.items.reduce((sum,item)=>sum+item.price*item.count,0);}build(){Column({space:12}){List(){ForEach(this.items,(item:Item)=>{ListItem(){Row({space:8}){Text(item.name).fontSize(20)Text(`¥${item.price}`).fontSize(20)Text(`x${item.count}`).fontSize(20)Text(`小计: ¥${item.price*item.count}`).fontSize(20)}}})}.height('20%')Divider()Text('总计: ¥'+this.totalPrice).fontSize(20).fontWeight(FontWeight.Bold)Text('含税预估: ¥'+(this.totalPrice*1.13).toFixed(2)).fontSize(20)}.padding(20)}}interfaceItem{name:string;price:number;count:number;}运行效果：
在这个示例中，totalPrice是一个复杂的计算（遍历数组求和）。UI 中两处使用了它（显示总计和含税预估），但@Computed确保只在items数组变化时重新计算一次。
五、什么时候用 @Computed？
| 场景 | 推荐做法 |
|---|---|
简单计算（如a + b），UI 仅用一次 | 直接写表达式，无需@Computed |
| 复杂计算，UI 多处使用 | 使用@Computed，避免重复计算 |
| 需要缓存派生状态 | @Computed自动管理依赖并缓存 |
六、总结
@Computed是鸿蒙 V2 状态管理中提升性能的重要工具，适合在计算逻辑较复杂或 UI 中多次引用同一派生值的场景下使用。在简单场景中直接使用表达式即可，避免过度设计。
通过合理使用@Computed，您可以：
- 减少不必要的计算开销：自动缓存结果，仅在依赖变化时重新计算。
- 提升 UI 渲染性能：避免重复执行相同的计算逻辑。
- 保持代码简洁：将派生逻辑封装在
getter中，使 UI 代码更清晰。
希望本文能帮助您更好地理解和应用@Computed装饰器，构建更高效的鸿蒙应用。
