当前位置：首页 > news >正文

HarmonyOS-ArkUI V2装饰器： @Monitor装饰器：状态变量修改监听

news 来源：原创 2025/4/29 3:27:12

Monitor作用

Monitor的作用就是来监听状态变量的值变化的。被Monitor修饰的函数，会在其对应监听的变量发生值的变化时，回调此函数，从而可以让您知道是什么值发生变化了，变化前是什么值，变化后是什么值。

V1版本的装饰器，有个叫@Watch的装饰器，其实也有监听变化的能力，但是其重要局限就是，不能知道是什么参数发生了变化，也不知道参数变化之前是什么值。在代码中大致反应如下：

class Info{
  name: string = 'Tom'
  age: number = 25
}

@Entry
@Component
struct MonitorTest {
  @State @Watch('onInfoChange') info: Info = new Info()
  @State @Watch('onNumberArrayChange') numArr: number[] = [1, 2, 3, 4, 5]

  //这个函数没有参数.所以值变成了什么您可以通过查看当前值来获取,但是之前是怎么样就不知道了.
  //而且到底是info name改变引发的, 还是info age改变引发的也没办法知道.
  onInfoChange(){
    hilog.info(LOG_DOMAIN, LOG_TAG, `info after change info.name=${this.info.name}, info.age=${this.info.age}`)
  }

  onNumberArrayChange(){
   hilog.info(LOG_DOMAIN, LOG_TAG, `numArr after change! numArr=${JSON.stringify(this.numArr)}}`)
  }

  build() {
    Row() {
      Column() {
        Button("change info name")
          .onClick(() => {
            this.info.name = "Jack";
          })
        Button("change info age")
          .onClick(() => {
            this.info.age = 30;
          })
        Button("change numArr[2]")
          .onClick(() => {
            this.numArr[2] = 5;
          })
        Button("change numArr[3]")
          .onClick(() => {
            this.numArr[3] = 6;
          })
      }
      .width('100%')
    }
    .height('100%')
  }
}

watch有多不好用，那么在设计V2版本时，是一定要改掉那些缺陷的。Monitor就是对一个Watch的修正。而且它具备以下能力

同时监听很多属性的变化，并且当这些属性如果在同一个逻辑场景下，同时改变值的时候，那么就会回调一次相关的监听方法。类似于把变化当成事务打包处理。
如果被监听的对象是一个类，或者复杂的内嵌类型，且这个对象被@ObservedV2和@Trace修饰，也就是对象已经具备被深度观测的能力了，那么Monitor是可以做到深度监听对象的能力的。

Monitor简单用法

这个Monitor的使用方式有一点点复杂，我们先看一个案例，体会一下，之后再扩开了解吧。

@Entry
@ComponentV2
struct MonitorTest{
  @Local name:string = '王小二'
  @Local age:number = 18

  @Monitor('name', 'age') //修饰函数,代表对什么变量感兴趣.此处容易出bug.就是改变量名一个不小心少改这块就会出问题.
  onStrChange(monitor: IMonitor) { //此函数的协议是要带一个IMonitor参数.
    hilog.info(LOG_DOMAIN, LOG_TAG, "回调onStrChange")
    monitor.dirty.forEach((path: string)=>{
      hilog.info(LOG_DOMAIN, LOG_TAG, "回调onStrChange, 循环当前Path=" + path)
      hilog.info(LOG_DOMAIN, LOG_TAG, `${path} change from ${monitor.value(path)?.before} to ${monitor.value(path)?.now}`)
    })
  }
  build() {
    Column(){
      Button('change string')
        .onClick(()=>{
          this.name = '王小三'
          hilog.info(LOG_DOMAIN, LOG_TAG, "改完name")
          this.age = 15
          hilog.info(LOG_DOMAIN, LOG_TAG, "改完age")   //此逻辑执行完成之后,打包完成后再进行同步数据的.具有一定的事务的特征
        })
    }
  }
}

打印日志：