状态装饰器

qinsz 7/7/2024 ArkTSHarmony Next

# 1、@State装饰器：组件内状态

被@State修饰的变量成为状态变量
状态变量被修改时，与其直接绑定的UI组件则会刷新
- 变量被整体修改赋值可以触发UI刷新
- 变量的某个属性被复制修改也可以触发UI刷新
- 变量的某个属性对象的属性被修改，不能触发UI刷新
- 即对状态变量的监听，只能到它的第一层属性。同理如果状态变量是List，那么对List元素的push、pop以及数组项的赋值（list[1]=new Model()）可以被监听到，但是对元素的属性赋值则不能被监听到。

# 2、@Observed和@ObjectLink

@Observed用于class的声明上，使得class中的属性能够被监听到。

@Observed
class ClassA {
  public c: number;

  constructor(c: number) {
      this.c = c
  }
}

1
2
3
4
5
6
7
8

# 3、@Prop：父子单项同步

用于修饰子组件的变量，该变量由父组件构造子组件时传入（即传入数据源）

// 子组件
@Component
struct Child {
    @Prop count: number = 1
  
  //...其他代码
}

// 父组件
@Component
struct Parent{
    @State count: number = 1
    build() {
        Child({count: this.count})
  }
  // 其他代码...
}

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17

当Parent组件中的count发生改变，则会同步修改Child组件中的count，并同时刷新Child中count相关的UI。
当直接对Child组件中的count属性进行修改时，可以触发与Child中count属性相关的UI刷新，但不会同步修改Parent组件中的count值

# 4、@Link：父子双向同步

与@Prop功能相似，但子组件中被@Link修饰的变量被直接修改后，可以同步修改父组件中的数据源。