鸿蒙中级课程笔记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!! })
        }
      }
    }
  }

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

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

使用场景

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

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

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

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

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

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