【ArkTS】Watch装饰器_arktswatch装饰器

@Watch装饰器，相当于Vue中的监听器 以及 React中使用useEffect监听变量

使用@Watch装饰器，可以监听一个数据的变化，并进行后续的响应。
使用方法：
@Watch(‘回调函数’)，写在@State装饰器后（其实写在前面也行，但是写到后面更加清晰也符合规范）。

@State @Watch('change') baseNumber: number = 1
change(){
    this.res = Math.pow(this.baseNumber,this.pow)
}
1
2
3
4

注意：回调函数中一定不能直接操作监听的数据，会造成死循环

下面是一个综合案例

@Entry
@Component

struct UseWatch {
  // 将监听器写到@State装饰器后面
  @State @Watch('change') baseNumber: number = 1
  @State pow: number = 2
  @State res: number = 1
  change(){
    this.res = Math.pow(this.baseNumber,this.pow)
  }
  build() {
      Column(){
        Text(`基数：${this.baseNumber}`)
          .fontSize(40)
          .onClick(() => {
            this.baseNumber++
          })
        Divider()
        Text(`次幂：${this.pow}`)
          .fontSize(40)
          .onClick(() => {
            this.pow ++
          })
        Divider()
        Text(`结果：${this.res}`)
          .fontSize(40)
      }
      .width('100%')
      .height('100%')
      .justifyContent(FlexAlign.Center)
  }
}
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33

运行发现，点击 基数 时，即@Watch监听的数据发生变化时，执行了change函数

但是点击 次幂 时，由于@Watch监听的数据未发生改变，所以没执行change函数

再次点击 基数 时，重新执行change函数