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

合肥做网站的公司网站制作

wzjs 2025/7/20 16:05:38

合肥做网站的公司,网站制作,手机客户端app开发,wordpress切换至就编辑器Monitor作用 Monitor的作用就是来监听状态变量的值变化的。被Monitor修饰的函数，会在其对应监听的变量发生值的变化时，回调此函数，从而可以让您知道是什么值发生变化了，变化前是什么值，变化后是什么值。 V1版本的装饰器，有个叫@Watch的装饰器，其实也有监听变化的能力，…

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 = 15hilog.info(LOG_DOMAIN, LOG_TAG, "改完age")   //此逻辑执行完成之后,打包完成后再进行同步数据的.具有一定的事务的特征})}}
}

打印日志：