鸿蒙中级课程笔记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方法装饰器	说明
支持类型	getter访问器。
从父组件初始化	禁止。
可初始化子组件	@Param。
被执行的时机	@ComponentV2中的@Computed会在自定义组件创建的时候初始化，触发@Computed计算。 @ObservedV2装饰的类中的@Computed，会在@ObservedV2装饰的类实例创建后，异步初始化，触发@Computed计算。在@Computed中计算的状态变量被改变时，计算属性会重新计算。
是否允许赋值	@Computed装饰的属性是只读的，不允许赋值，详情见使用限制。

使用限制

参考@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!! }) } } } }