HarmonyOS Next V2 @Monitor 和 @Computed
@Monitor 介绍
@Monitor 是状态把管理 V2 版本中的用于监听状态变量修改的技术。
它可以直接用在
@ComponentV2装饰的自定义组件中，用于被@Local、@Param、@Provider、@Comsumer、@Computed修饰的状态变量中
对于深层次的数据，如深层次对象、对象数组等，需要搭配@ObservedV2、@Trace一起使用。
可以同时监听多个属性
可以获取到监听属性的修改前后的数据变化
对比状态管理 V1 中的 @Watch
@Monitor 比 @Watch功能要强大不少
@Watch 不能用在@ComponentV2修饰的
@Watch 不具备深度监听的功能
@Watch 无法同时监听多个属性
@Watch 无法检测 属性修改前后的变化
@Monitor 监听单个属性
@Entry@ComponentV2struct Index { @Local num: number = 100
@Monitor("num") changeNum() { console.log("检测到数据的修改啦") }
build() { Column() {
Button(`点击修改 ${this.num}`) .onClick(() => { this.num++ }) } .width("100%") .height("100%") }}
复制代码
@Monitor 同时监听多个属性
@Entry@ComponentV2struct Index { @Local num: number = 100 @Local age: number = 200
// 同时监听多个状态的修改 @Monitor("num","age") changeNum() { console.log("检测到数据的修改啦") }
build() { Column() { Button(`点击修改 num ${this.num}`) .onClick(() => { this.num++ }) Button(`点击修改 age ${this.age}`) .onClick(() => { this.age++ }) } .width("100%") .height("100%") }}
复制代码
@Monitor 的回调函数
@Monitor 的回调函数可以给我们提供这样的能力：
如果监听了多个状态，而只有一个状态发生变化时， 可以给获知到具体哪个状态发生了变化
当状态发生变化时，可以获取到变化前后的两个值
@Monitor 的回调函数的参数是 IMonitor，它是一个对象，拥有两个属性
dirty ，是一个字符串数组，里面存放了修改的状态的名称
value，是一个函数，调用返回会返回一个新的对象，新对象中包含了 path:修改的状态的名称，before：修改前的数据，now：修改后的数据，另外 value() 调用时，如果不传递参数并且你是同时修改多个状态的话，那么它只会返回第一个状态，如果传递了参数-状态变量 那么就会返回该状态变量的相关信息
@Entry@ComponentV2struct Index { @Local num: number = 100 @Local age: number = 200
// 同时监听多个状态的修改 @Monitor("num","age") changeNum(Monitor: IMonitor) { console.log("修改的状态", Monitor.dirty) console.log("Monitor.value()", JSON.stringify(Monitor.value("age")))
}
build() { Column() { Button(`同时修改 num 和 age ${this.num} ${this.age}`) .onClick(() => { this.num++ this.age++ })
} .width("100%") .height("100%") }}
复制代码
@Monitor 深度监听
@Monitor 需要和 @ObservedV2、@Trace一起使用才能实现深度监听的效果，需要注意的是:
@Monitor可以直接写在 @ObserveV2 修饰的class中
@Monitor 也可以写在正常的组件内
@ObservedV2class Person { @Trace son: Son = new Son()}
@ObservedV2class Son { // @Monitor可以直接写在 @ObserveV2 修饰的class中 @Monitor("weight") weightChange() { console.log("1 儿子的体重修改了") }
@Trace weight: number = 200}
@Entry@ComponentV2struct Index { person: Person = new Person() // @Monitor 也可以写在正常的组件内 @Monitor("person.son.weight") weightChange() { console.log("2 儿子的体重呗修改了") }
build() { Column() { Button(`修改儿子的体重${this.person.son.weight}`) .onClick(() => { this.person.son.weight++ }) } .width("100%") .height("100%") }}
复制代码
@Monitor 的限制
在实际开发使用中，@Monitor也存在一些限制，无法监听内置类型（Array、Map、Date、Set）的 API 调用引起的变化，如当你检测整个数组时，你对数组使用 push、splice等常见方法修改数组，是无法检测到的。当然，当整个数组被重新赋值时，可以检测到它的变化
@ObservedV2class Person { @Trace name: string = "小明"}
@Entry@ComponentV2struct Index { @Local personList: Person[] = [new Person()]
@Monitor("personList") weightChange() { console.log(" 检测到数组修改了") }
build() { Column() { Button("增加一个") .onClick(() => { // 1 无效 - 无法检测到数组发生了修改 this.personList.push(new Person())
// 2 有效 检测到了数组发生修改 // const newPerson = [...this.personList, new Person()] // this.personList = newPerson }) ForEach(this.personList, (item: Person) => { Text(item.name) }) } .width("100%") .height("100%") }}
复制代码
另外可以通过.语法或者监听数组长度来变向实现检测数组元素发生变化
.语法
@ObservedV2class Person { @Trace name: string = "小明"}
@Entry@ComponentV2struct Index { @Local personList: Person[] = [new Person()]
@Monitor("personList.0") // 如果要单独监听对象中的某个属性 @Monitor("personList.0.name") weightChange() { console.log(" 检测到数组修改了") }
build() { Column() { Button("增加一个") .onClick(() => { const p = new Person() p.name = "小黑" this.personList[0] = p }) ForEach(this.personList, (item: Person) => { Text(item.name) }) } .width("100%") .height("100%") }}
复制代码
监听数组长度变化
@ObservedV2class Person { @Trace name: string = "小明"}
@Entry@ComponentV2struct Index { @Local personList: Person[] = [new Person()]
@Monitor("personList.length") weightChange() { console.log(" 检测到数组修改了") }
build() { Column() { Button("增加一个") .onClick(() => { const p = new Person() p.name = "小黑" this.personList.push(p) }) ForEach(this.personList, (item: Person) => { Text(item.name) }) } .width("100%") .height("100%") }}
复制代码
@Computed
@Computed为计算属性，可以监听数据变化，从而计算新的值。用法比较简单
@Entry@ComponentV2struct Index { @Local num: number = 100
@Computed get numText() { return this.num * 2 }
build() { Column() { Button("修改") .onClick(() => { this.num++ }) Text(`原数据 ${this.num}`) Text(`计算后 ${this.numText}`) } .width("100%") .height("100%") }}
复制代码
评论