鸿蒙中级课程笔记2—状态管理V2—@Computed装饰器：计算属性

当开发者使用相同的计算逻辑重复绑定在UI上时，为了防止重复计算，可以使用@Computed计算属性。计算属性中的依赖的状态变量变化时，只会计算一次。这解决了UI多次重用该属性导致的重复计算和性能问题。如下面例子。

@Computed get sum() { return this.count1 + this.count2 + this.count3; } Text(`${this.count1 + this.count2 + this.count3}`) // 计算this.count1 + this.count2 + this.count3 Text(`${this.count1 + this.count2 + this.count3}`) // 重复计算this.count1 + this.count2 + this.count3 Text(`${this.sum}`) // 读取@Computed sum的缓存值，节省上述重复计算 Text(`${this.sum}`) // 读取@Computed sum的缓存值，节省上述重复计算

说明

@Computed装饰器从API version 12开始支持。

从API version 12开始，该装饰器支持在元服务中使用。

概述

@Computed为方法装饰器，装饰getter方法。@Computed会检测被计算的属性变化，当被计算的属性变化时，@Computed只会被求解一次。不建议在@Computed中修改变量，错误的使用会导致数据无法被追踪或appfreeze等问题，详情见使用限制。

但需要注意，对于简单计算，不建议使用计算属性，因为计算属性本身也有开销。对于复杂的计算，@Computed能带来性能收益。

装饰器说明

@Computed语法：

@Computed get varName(): T { return value; }

使用限制

参考@Computed装饰器：计算属性

• @Computed为方法装饰器，仅能装饰getter方法，其他用法编译时报错。

• @Computed装饰的方法只有在初始化，或者其被计算的状态变量改变时，才会发生重新计算。不建议开发者在@Computed装饰的getter方法中做除获取数据外其余的逻辑操作。

• 在@Computed装饰的getter方法中，不能改变参与计算的属性，以防止重复执行计算属性导致的appfreeze。

• @Computed不能和双向绑定!!连用，@Computed装饰的是getter访问器，不会被子组件同步，也不能被赋值。开发者自己实现的计算属性的setter不生效，且产生编译时报错。

  @ComponentV2 struct Child { @Param double: number = 100; @Event $double: (val: number) => void; build() { Button('ChildChange') .onClick(() => { this.$double(200); }) } } @Entry @ComponentV2 struct Index { @Local count: number = 100; @Computed get double() { return this.count * 2; } // @Computed装饰的属性是只读的，开发者自己实现的setter不生效，编译时报错。 set double(newValue : number) { this.count = newValue / 2; } build() { Scroll() { Column({ space: 3 }) { Text(`${this.count}`) // 错误写法，@Computed装饰的属性是只读的，无法与双向绑定连用，编译时报错。 Child({ double: this.double!! }) } } } }

• @Computed为状态管理V2提供的能力，只能在@ComponentV2和@ObservedV2中使用。

• 多个@Computed一起使用时，警惕循环求解，以防止计算过程中的死循环。

使用场景

参考@Computed装饰器：计算属性

当被计算的属性变化时，@Computed装饰的getter访问器只会被求解一次

计算属性本身会带来性能开销，在实际应用开发中需要注意：

• 对于简单的计算逻辑，可以不使用计算属性。
• 如果计算逻辑在视图中仅使用一次，则不使用计算属性，直接求解。

@Computed装饰的属性可以被@Monitor监听变化

@Computed装饰的属性可以初始化@Param