ObservedV2装饰器和Trace装饰器

最新推荐文章于 2025-06-17 20:25:08 发布

原创最新推荐文章于 2025-06-17 20:25:08 发布 · 764 阅读

13 ·

CC 4.0 BY-SA版权

文章标签：

#ObservedV2 #Trace #HarmonyOS状态管理 #嵌套类对象状态管理

HarmonyOS Next 专栏收录该内容

2 篇文章

订阅专栏

为了对嵌套类对象属性变化直接观测，华为提供了ObservedV2和Trace装饰器。这两个装饰器必须搭配使用，单独使用任何一个都不会起任何作用；在继承类中也可监测；ObservedV2的类实例目前不支持使用JSON.stringify进行序列化，需通过new操作符实例化后，才具备被观测变化的能力。与V1版本相比（使用@ObjectLink装饰器与自定义组件来实现观测），使用起来更加方便。

嵌套类场景

在下面场景中老师(Teacher)尹山木，有个学生(Student)丁云飞，高一有三门课程(语文，数学，英语)，升到高二增加了一门化学课。

export class Teacher{
  name:string = "尹山木"
  student:Student
  constructor(stu:Student) {
    this.student = stu
  }
}
export class Student{
  name:string = "丁云飞"
  course:Course
  constructor(c:Course) {
    this.course = c
  }
}
@ObservedV2
export class Course{
  @Trace courses:Array<string> = []
  constructor() {
    this.courses = ["语文","数学","英语"]
  }
}
@Entry
@ComponentV2
struct Index {
@Local teacher:Teacher = new Teacher(new Student(new Course()))
  build() {
     Column({space:20}){
       Text("老师:" + this.teacher.name)
         .fontSize(20)
       Text("学生:" + this.teacher.student.name)
         .fontSize(18)
         Row({space:6}){
           ForEach(this.teacher.student.course.courses,(course:string,index)=>{
             Text("课程:" + course)
             .fontSize(16)
         })
         }.width('100%')
         .justifyContent(FlexAlign.Start).alignItems(VerticalAlign.Center)
        Button("升上二年级")
          .onClick(()=>{
            this.teacher.student.course.courses.push("化学")
          })
     }.justifyContent(FlexAlign.Start)
    .alignItems(HorizontalAlign.Start)
    .padding({left:20})
  }
}

运行效果点击升上二年级，可以看到课程增加了一门化学。

继承类场景

祖孙三人，每过一年，年龄增加一岁。


@ObservedV2
export class GrandFather{
  @Trace age:number = 0
  constructor(age:number) {
    this.age = age;
  }
}
export class Father extends GrandFather{
  constructor(age:number) {
    super(age)
  }
}
export class Son extends Father{
  constructor(age: number) {
    super(age)
  }
}
@Entry
@ComponentV2
struct Index {
@Local son:Son = new Son(2)
  build() {
     Column({space:20}){
       Text("孩子今年：" + this.son.age + "岁了！")
         .fontSize(20)

        Button("过了一年")
          .onClick(()=>{
            this.son.age++
          })
     }.justifyContent(FlexAlign.Start)
    .alignItems(HorizontalAlign.Start)
    .padding({left:20})
  }
}

点击过了一年孩子会增长一岁。

Trace装饰基础类型的数组

ObservedV2监听模型numArrModel的numberArr数组的增加，同时刷新UI

@ObservedV2
export class numArrModel{
  id:number = 0
  @Trace numberArr:Array<number> = [0,10,5]
}
@Entry
@ComponentV2
struct Index {
@Local numModel:numArrModel = new numArrModel()
  build() {
     Column({space:20}){
       ForEach(this.numModel.numberArr,(item:number,index)=>{
         Text(''+item)
           .fontSize(20)
       })
       Button('增加一个数字')
         .onClick(()=>{
            this.numModel.numberArr.push(11)
         })
       Button('减少一个数字')
         .onClick(()=>{
           this.numModel.numberArr.pop()
         })
     }.justifyContent(FlexAlign.Start)
    .alignItems(HorizontalAlign.Start)
    .padding({left:20})
  }
}

Trace装饰对象数组

Trace装饰对象数组studends，以及student的属性age。当数组长度和age改变时页面会刷新。

@ObservedV2
export class Student{
  @Trace age:number = 1
}
@ObservedV2
export class Classes{
  id:number = 3
  @Trace studends:Student[] = []
  constructor(stus:Student[]) {
    this.studends = stus
  }
}
@Entry
@ComponentV2
struct Index {
@Local classModel:Classes = new Classes([new Student(),new Student(),new Student()])
  build() {
     Column({space:20}){
      Column(){
        Text("班级:"+this.classModel.id)
          .fontSize(20)
        Text("学生数量:"+this.classModel.studends.length+"人")
          .fontSize(20)
      }
      Column(){
        ForEach(this.classModel.studends,(stu:Student,index)=>{
          Text("年龄:"+stu.age)
            .fontSize(20)
        })
      }
       Button('增加一个学生')
         .onClick(()=>{
            this.classModel.studends.push(new Student())
         })
       Button('第一名学生年龄增加一岁')
         .onClick(()=>{
           if (this.classModel.studends.length > 0) {
             this.classModel.studends[0].age++
           }
         })
     }.justifyContent(FlexAlign.Start)
    .alignItems(HorizontalAlign.Start)
    .padding({left:20})
  }
}

Trace装饰Map类型

Trace装饰的Map类型属性，当发生set、clear、delete事件时会被监测到。

@ObservedV2
export class textMapModel{
  @Trace textMap:Map<number,string> = new Map([[0,'a'],[1,'b'],[2,'c']])
}
@Entry
@ComponentV2
struct Index {
@Local mapInfo:textMapModel = new textMapModel()
  build() {
     Column({space:20}){
       ForEach(Array.from(this.mapInfo.textMap.entries()), (item: [number, string]) => {
         Text(`${item[0]}`)
           .fontSize(30)
         Text(`${item[1]}`)
           .fontSize(30)
         Divider()
       })
       Button('初始化').onClick(()=>{
        this.mapInfo.textMap = new Map([[0,'z'],[1,'x'],[2,'c']])
       })
       Button('增加一个').onClick(()=>{
        this.mapInfo.textMap.set(3,'v')
       })
       Button('删除一个').onClick(()=>{
         this.mapInfo.textMap.delete(0)

       })
       Button('清除').onClick(()=>{
         this.mapInfo.textMap.clear()
       })
       Button('改变值').onClick(()=>{
         this.mapInfo.textMap.set(0,'city')
       })

     }.justifyContent(FlexAlign.Start)
    .alignItems(HorizontalAlign.Start)
    .padding({left:20})
  }
}

Trace装饰Set类型

Trace装饰的Set类型属性可以观测到add, clear, delete等

@ObservedV2
export class Info{
  @Trace memberSet:Set<number> = new Set([0,1,2,3,4,5,6,])
}
@Entry
@ComponentV2
struct Index {
@Local memberInfoModel:Info = new Info()
  build() {
     Column({space:20}){
      Row(){
        ForEach(Array.from(this.memberInfoModel.memberSet.values()),(item:number)=>{
          Text(``+item)
            .fontSize(20)
            .margin({left:6})

        })
      }
       Button('add').onClick(()=>{
         this.memberInfoModel.memberSet.add(10)
       })
       Button('clear').onClick(()=>{
         this.memberInfoModel.memberSet.clear()
       })
       Button('delete').onClick(()=>{
         this.memberInfoModel.memberSet.delete(0)

       })
     }.justifyContent(FlexAlign.Start)
    .alignItems(HorizontalAlign.Start)
    .padding({left:20})
  }
}

Trace装饰Date类型

@Trace装饰的Date类型属性可以观测调用API带来的变化，包括 setFullYear、setMonth、setDate、setHours、setMinutes、setSeconds、setMilliseconds、setTime、setUTCFullYear、setUTCMonth、setUTCDate、setUTCHours、setUTCMinutes、setUTCSeconds、setUTCMilliseconds。因为Info类被@ObservedV2装饰且属性selectedDate被@Trace装饰，点击Button('set selectedDate to 2023-07-08')对selectedDate赋值也可以观测到变化。