《鸿蒙第一行代码》第十课 @objectLink和@observed_observed和object link在同一代码中

《鸿蒙第一行代码》第十课 @objectLink和@observed

@objectLink和@observed装饰器用于在涉及嵌套对象或数组元素为对象的场景中进行双向数据同步

注意： 这里有个坑的地方：状态数组得一个个new进去

简单示例代码：

export class Student{ sid:number name:string age:number //宠物 pet:Pet constructor(sid:number,name:string,age:number,pet:Pet) { this.sid = sid this.name = name this.age = age this.pet = pet }}//宠物@Observed //实现双向数据同步export class Pet{ petName:string petAge:number constructor(petName:string,petAge:number) { this.petName = petName this.petAge = petAge }}@Entry@Componentstruct Observed_objectLink_Page { //私有变量的值是一个对象 @State s:Student = new Student(2301,\"马保国\", 73, new Pet(\"大黄\",3)) //准备一个数组 @State pets:Pet[] = [new Pet(\"小白\",2300), new Pet(\"小痴\", 1100)] build() { Column({space:20}){ /** * 数组元素为对象，实现数据同步 * 调用PetInfo， 这里的this.s.pet是属于student对象的pet属性 */ // PetInfo({pet:this.s.pet}) // .onClick(()=>{ // //变量通过@State修饰，点击修改私有变量(点击一次自增1)，然后会自动修改刷新UI // this.s.pet.petAge++ // }) //添加宠物 Button(\"添加\").onClick(()=>{ this.pets.push(new Pet(\"小灰\"+1, 10)) }) Text(\"---------宠物列表------\").fontSize(30).width(\"100%\") ForEach(this.pets,(pet:Pet, index)=>{ /** * 嵌套对象，实现数据同步 * 调用PetList */ PetList({pet:pet}) .onClick(()=>{ //变量通过@State修饰，点击修改私有变量(点击一次自增1)，然后会自动修改刷新UI this.s.pet.petAge++ }) }) } .width(\"100%\").height(\"100%\") .justifyContent(FlexAlign.Center)//主轴方向对齐 }}/** * 嵌套对象，实现数据同步 */@Componentstruct PetInfo { //子组件的变量必须使用@ObjectLink @ObjectLink pet:Pet build() { //修改Student的属性是可以的 Text(`宠物：${this.pet.petName}，${this.pet.petAge}`) .fontSize(30) }}/** * 数组元素为对象，实现数据同步 */@Componentstruct PetList { //子组件的变量必须使用@ObjectLink @ObjectLink pet:Pet build() { Row(){ Text(`${this.pet.petName}:${this.pet.petAge}`).fontSize(20) Button(\"修改年龄\").onClick(()=>{ //点击后发现修改了数据，但是由于属性属于数组的对象，@State无法让修改后自动渲染 this.pet.petAge++ }) }.width(\"100%\").justifyContent(FlexAlign.SpaceAround) }}

《鸿蒙第一行代码》项目代码结构图：

有需要《鸿蒙第一行代码》项目源码的私信我，我每天都看私信的