@Observed & @ObjectLink装饰器-嵌套类对象属性变化更新UI

** @Observed & @ObjectLink装饰器-嵌套类对象属性变化更新UI**

在实际应用开发中，应用会根据开发需要，封装自己的数据模型。对于多层嵌套的情况，比如二维数组，或者数组项class，或者class的属性是class，他们的第二层的属性变化是无法观察到的,当这些class的第二层属性变化时无法触发UI刷新，此时我们可以使用@Observed/@ObjectLink装饰器来实现class的第二层属性变化触发UI刷新。

@ObjectLink和@Observed类装饰器用于在涉及嵌套对象或数组的场景中进行双向数据同步：

1. 被@Observed装饰的类，可以被观察到属性的变化。创建类时需要使用new的方式传递数据，不能使用值传递。
2. 子组件中@ObjectLink装饰器装饰的状态变量用于接收@Observed装饰的类的实例，和父组件中对应的状态变量建立双向数据绑定。@ObjectLink不能用于entry标识的组件内。
3. 单独使用@Observed是没有任何作用的，需要搭配@ObjectLink或者@Prop使用。 如下示例中，想要修改Person数组中的每个数据引起UI变化，需要引入多种状态数据，比较麻烦：

`import promptAction from '@ohos.promptAction'; class Person{ id:number; name:string; age:number;

constructor(id:number,name:string,age:number) { this.id = id this.name=name this.age=age } }

@Entry @Component struct ObservedTest {

@State personList:Person[] = [ new Person(1,'zs',10), new Person(2,'ls',11), new Person(3,'ww',12), ]

build(){ Column(){ ForEach(this.personList,(item:Person,index:number)=>{ CompB({person:item,personList:$personList,index:index}) }) } } }

@Component struct CompB {

person:Person

@Link personList:Person[]

index:number

build() { Column(){ Text(当前person信息为：${this.person.id}-${this.person.name}-${this.person.age}) .width('100%')

  Button("修改person中的age")
    .onClick(()=>{
      const newAge = this.person.age +=1
      this.personList[this.index] = new Person(this.person.id,this.person.name,newAge)
      promptAction.showToast({message: this.person.age.toString()})
    })
}

} }`

预览图

可以直接使用@Observed装饰器装饰Person类，@ObjectLink装饰组件中的Person对象，这样就可以做到当组件中的person对象改变时当前Person对象变化被监听，从而引起UI刷新。代码如下：

import promptAction from '@ohos.promptAction'; @Observed class Person{ id:number; name:string; age:number;

constructor(id:number,name:string,age:number) { this.id = id this.name=name this.age=age } }

@Entry @Component struct ObservedTest {

@State personList:Person[] = [ new Person(1,'zs',10), new Person(2,'ls',11), new Person(3,'ww',12), ]

build(){ Column(){ ForEach(this.personList,(item:Person,index:number)=>{ CompB({person:item}) }) } }

}

@Component struct CompB { @ObjectLink person:Person

build() { Column(){ Text(当前person信息为：${this.person.id}-${this.person.name}-${this.person.age}) .width('100%')

  Button("修改person中的age")
    .onClick(()=>{
      this.person.age +=1
      promptAction.showToast({message: this.person.age.toString()})
    })
}

} } 预览如下：

当点击按钮改变person对象中的属性时，会引起UI刷新。