為了對嵌套類對象屬性變化直接觀測,華為提供了ObservedV2和Trace裝飾器。這兩個裝飾器必須搭配使用,單獨使用任何一個都不會起任何作用;在繼承類中也可監測;ObservedV2的類實例目前不支持使用JSON.stringify進行序列化,需通過new操作符實例化后,才具備被觀測變化的能力。與V1版本相比(使用@ObjectLink裝飾器與自定義組件來實現觀測),使用起來更加方便。
嵌套類場景
在下面場景中老師(Teacher)尹山木,有個學生(Student)丁云飛,高一有三門課程(語文,數學,英語),升到高二增加了一門化學課。
export class Teacher{name:string = "尹山木"student:Studentconstructor(stu:Student) {this.student = stu}
}
export class Student{name:string = "丁云飛"course:Courseconstructor(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 = 0constructor(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賦值也可以觀測到變化。