鸿蒙Harmony--状态变量更改通知--@Watch装饰器详解

风雨飘摇中，我心起伏， 万丈雄心，却难以施展。 天高地远，路途迷茫， 理想如星，却遥不可及。

千百次跌倒，千百次爬起， 在命运的手掌中，挣扎前行。 谁知我心中的热血滚烫， 却在冰冷现实中渐渐冷却。

曾以为汗水会浇灌梦想， 却不知荆棘已遍布前路。 不屈的信念，早已染上尘土， 每一步，都如负山重。

可纵然前路漫漫，我仍不屈， 不甘心让平凡束缚我心。 在不得志的岁月里，我继续奔跑， 期待有一天，风会转向。

目录

​编辑

一，定义

二，装饰器说明

三，传递原理

四，注意事项

五，使用

一，定义

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

@Watch应用于对状态变量的监听。如果需要关注某个状态变量的值是否改变，可以使用@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回调方法。

四，注意事项

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

• 开发者应关注性能，属性值更新函数会延迟组件的重新渲染（具体请见上面的行为表现），因此，回调函数应仅执行快速运算；

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

五，使用

当点击helloworld的时候，会回调子view里面的方法，然后会更新子view的ui

@Component
export struct MyView {

  @Prop @Watch('onMessageUpdated') message: string = 'MyView';
  @State content: string = '子view';

  onMessageUpdated(propName: string): void {
      this.content=this.content+"yz"
  }

  build(){
    Text(this.content)
      .fontSize(50)
      .fontWeight(FontWeight.Bold)
  }
}

@Entry
@Component
struct Index {
  @State message: string = 'Hello World';


  build() {
    Row() {
      Column() {
        Text(this.message)
          .fontSize(50)
          .fontWeight(FontWeight.Bold)
          .onClick(()=>{
            this.message =this.message+ 'yz'
          })
        MyView({message:this.message})
      }
      .width('100%')
    }
    .height('100%')
  }
}