ArkTs 语法学习 ---- 装饰器_ark语言的装饰器

数据变量相关装饰器

• @State
• @Link
• @Prop
• @Provide
• @Consume
• @Observed/@ObjectLink
• @Watch
• $$运算符
• @LocalStorageProp
• @LocalStorageLink

@State

@Link

@Prop

@Provide

@Consume

@Provide/@Consume装饰的状态变量有以下特性：

• @Provide装饰的状态变量自动对其所有后代组件可用。
• @Provide和@Consume之间的双向数据同步，可以在多层级的父子组件之间传递。
• @Provide和@Consume可以通过相同的变量名或者相同的变量别名绑定，变量类型必须相同。
• @Provide修饰的变量和@Consume修饰的变量是一对多的关系。不允许在同一个自定义组件内，包括其子组件中声明多个同名或者同别名的@Provide装饰的变量。
  
  

@Observed

@Watch

• @Watch应用于对状态变量的监听。如果开发者需要关注某个状态变量的值是否改变，可以使用@Watch为状态变量设置回调函数。
• @Watch在ArkUI框架内部判断数值有无更新使用的是严格相等（===），遵循严格相等规范。当在严格相等为false的情况下，就会触发@Watch的回调。

@Component
struct TotalView {
  @Prop @Watch('onCountUpdated') count: number;
  @State total: number = 0;
  // @Watch 回调
  onCountUpdated(propName: string): void {
    this.total += this.count;
  }

  build() {
    Text(`Total: ${this.total}`)
  }
}
1
2
3
4
5
6
7
8
9
10
11
12
13

$$运算符

• $$运算符为系统内置组件提供TS变量的引用，使得TS变量和系统内置组件的内部状态保持同步。
• 当前$$支持基础类型变量，以及@State、@Link和@Prop装饰的变量。
• 当前$$仅支持Refresh组件的refreshing参数。
• $$绑定的变量变化时，会触发UI的同步刷新。

// xxx.ets
@Entry
@Component
struct RefreshExample {
  @State isRefreshing: boolean = false
  @State counter: number = 0

  build() {
    Column() {
      Text('Pull Down and isRefreshing: ' + this.isRefreshing)
        .fontSize(30)
        .margin(10)

      Refresh({ refreshing: $$this.isRefreshing, offset: 120, friction: 100 }) {
        Text('Pull Down and refresh: ' + this.counter)
          .fontSize(30)
          .margin(10)
      }
      .onStateChange((refreshStatus: RefreshStatus) => {
        console.info('Refresh onStatueChange state is ' + refreshStatus)
      })
    }
  }
}
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24

@LocalStorageProp

• @LocalStorageProp装饰的变量和与LocalStorage中给定属性建立单向同步关系。

@LocalStorageLink

• @LocalStorageLink装饰的变量和在@Component中创建与LocalStorage中给定属性建立双向同步关系。
• 本地修改发生，该修改会被写回LocalStorage中；
• LocalStorage中的修改发生后，该修改会被同步到所有绑定LocalStorage对应key的属性上，包括单向（@LocalStorageProp和通过prop创建的单向绑定变量）、双向（@LocalStorageLink和通过link创建的双向绑定变量）变量。