HarmonyOS-ArkUI V2装饰器: @Computed装饰器：计算属性

时间：2025-04-17 20:57:17

引

@Computed是用来装饰一个自己写的getter方法的装饰器，它可以让您像用平常的状态变量那样去用这个getter方法。那么getter方法里怎么获取的值，必然涉及到您写的逻辑。这个逻辑可以是很复杂的一种计算方式，经过一系列复杂方式计算完您吐出相应的结果即可。

为了便于理解，我们先从既有的所学的这些装饰器，来看看，当我们有个组件的界面依赖于比较复杂的状态变量计算时，会怎么写，您稍微看一下，估计就能察觉出来那些隐性的限制。

示例代码：

Button("XXXXX")
        .backgroundColor(isRight? Color.Green : Color.Brown)
}

我们看出，其实backgroundColor等一些函数中其实是接收一个计算结果的，因为这是表达式哈，所以从语言上也是接受这种写法的。

但是如果有一个场景使得我们这个值非常复杂呢？那么您会怎么计算，用表达式也没有办法很好的来阐述这个问题。此时我们就要用@Computed装饰器来解决这种问题了。平常使用场景中其实缺少不了这种情况的。出现的挺频繁的。

我们先看一下它是怎么用的，用代码浅浅的体会下，它是怎么来解决我们上述提到的尴尬逻辑的。

@Entry
@ComponentV2
struct ComputedTest {
  @Local firstName: string = 'Li'
  @Local lastName: string = 'Hua'
  age: number = 20

  @Computed
  get getFullName(): string{
    console.log("-------------computed---------------")
    return this.lastName + ' ' + this.firstName
  }

  build() {
    Column(){
      Column(){
        Text(this.lastName + ' ' + this.firstName)
        Divider()
        Text(this.getFullName) //这块的入参就可以是一个Computed修饰的get函数。就像用状态变量一样用这个函数
        Divider()
        Button('changed lastName').onClick(() => {
          this.lastName += 'a'; //状态变量的变化，可以重新触发Computed的计算
        })
      }
    }
  }
}

概述

@Computed装饰器是用来装饰getter方法的。getter方法中涉及到相关状态变量的计算。当相关的状态变量发生变化时会自动触发Computed修饰的函数重新计算。对于比较复杂的计算，Computed会有性能收益。

语法：

// 1 必须是get方法。 2 可以返回

相关文章