HarmonyOS第二十七课——Watch（状态变量更改通知）

@Watch应用于对状态变量的监听。如果开发者需要关注某个状态变量的值是否改变，可以使用@Watch为状态变量设置回调函数。

@Watch用于监听状态变量的变化，当状态变量变化时，@Watch的回调方法将被调用。@Watch在ArkUI框架内部判断数值有无更新使用的是严格相等（===），遵循严格相等规范。当在严格相等为false的情况下，就会触发@Watch的回调。

装饰器说明

@Watch补充变量装饰器	说明
装饰器参数	必填。常量字符串，字符串需要有引号。是(string) => void自定义成员函数的方法的引用。
可装饰的自定义组件变量	可监听所有装饰器装饰的状态变量。不允许监听常规变量。
装饰器的顺序	建议@State、@Prop、@Link等装饰器在@Watch装饰器之前。

语法说明

(changedPropertyName? : string) => void	该函数是自定义组件的成员函数，changedPropertyName是被watch的属性名。在多个状态变量绑定同一个@Watch的回调方法的时候，可以通过changedPropertyName进行不同的逻辑处理将属性名作为字符串输入参数，不返回任何内容。

备注:

1. 可监听所有的装饰器的状态变量。不允许监听常规变量。
2. 装饰器的顺序 建议@State、@Prop、@Link等装饰器在@Watch装饰器之前。
3. @Watch方法在自定义组件的属性变更之后同步执行；
4. 在第一次初始化的时候，@Watch装饰的方法不会被调用。
5. 不建议在@Watch函数中调用async await，因为@Watch设计的用途是为了快速的计算，异步行为可能会导致重新渲染速度的性能问题。
6. 避免无限循环

struct WatchPage {
  @State @Watch('tryClick') count: number = 1
  @State showNuber: number = 0
  @State message: string = ""
  // 回调
  tryClick(porName: string){
    
    // porName 为属性名可传可不传
    console.log("porName" + porName)
    this.message = porName
    this.showNuber = this.count *2
  }
  build(){
    Column(){
      Text(`${this.showNuber}`)
        .width('100%')
        .textAlign(TextAlign.Center)
        .height(60)
        .fontSize(22)
        .margin({top:20})
      Button('点击')
        .width('60')
        .height('40')
        .margin({top:20})
        .onClick(() =>{
          this.count ++;
        })
      Text(this.message)
      
    }
    .width('100%')
    .height('100%')
  }

}