九、@Watch装饰器：状态变量更改通知-526互联

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

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

装饰器说明

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

语法说明

类型

说明

（changedPropertyName?:string）=>void

该函数是自定义组件的成员函数，changedPropertyName是被watch的属性名，

在多个状态变量绑定同一个@Watch的的回调方法的时候，可以通过changedPropertyName

进行不同的逻辑处理，将属性名作为字符串输入参数，不返回任何内容。

观察变化和行为表现

1.当观察到状态变量的变化（包括双向绑定的AppStorage和LocalStorage中对应的key发生的变化）的时候，对应的@Watch的回调方法将被触发。

2.@Watch方法在自定义组件的属性变更之后同步执行。

3.如果在@Watch的方法里面改变了其他的状态变量，也会赢球状态变更和@Watch的执行。

4.在第一次初始化的时候，@Watch装饰的方法不会被调用，即认为初始化不是状态变量的改变。只有在后续状态改变时，才会调用@Watch回调方法。

限制条件

1.建议开发者避免无限循环。循环可能是因为在@Watch的回调方法中直接或间接地修改了同一个状态变量引起的，为了必满循环的产生，建议不要在@Watch的回调函数里修改当前装饰的状态变量；

2.开发者应关注性能，属性值更新函数会延迟组件的重新渲染，因此，回调函数应该仅执行快速运算；

3.不建议在@Watch函数中调用async await,因为@Watch设计的用途是为了快速的计算，异步行为可能会导致重新渲染速度的性能问题；

案例代码

/**
 * author:创客未来
 * copyright:com.ckFuture.hrb
 * @Watch 装饰器  状态数据
 * @Watch的回调（监视）函数中（此处指change函数）中，不要不要不要修改被监视的状态变量。
 *          我们要操作的是其他的业务逻辑。
 */
@Entry
@Component
struct WatchDet {
  @State @Watch('change') count: number = 1
  @State pow:number  = 2
  @State res:number  = 1

  //回调函数（监视函数）
  change(){
    //出现死循环。。。。
    //this.count = this.count + 2
    //计算次幂的结果 Math.pow(基数,次幂数)
    this.res = Math.pow(this.count,this.pow)
  }

  build() {
    Row() {
      Column() {
        Text('基数：' + this.count)
          .fontSize(50)
          .onClick(() => {
            this.count++
          })
        Divider()
        Text(`次幂：${this.pow}`)
          .fontSize(50)
        Divider()
        Text("结果：" + this.res)
          .fontSize(50)
      }
      .width('100%')
    }
    .height('100%')
  }
}