@Observed装饰器和@ObjectLink装饰器:嵌套类对象属性变化
概述
@ObjectLink
和@Observed
类装饰器用于在涉及嵌套对象或数组的场景中进行双向数据同步:
- 被
@Observed
装饰的类,可以被观察到属性的变化; - 子组件中
@ObjectLink
装饰器装饰的状态变量用于接收@Observed
装饰的类的实例,和父组件中对应的状态变量建立双向数据绑定。这个实例可以是数组中的被@Observed
装饰的项,或者是class object
中的属性,这个属性同样也需要被@Observed
装饰。 @Observed
用于嵌套类场景中,观察对象类属性变化,要配合自定义组件使用(示例详见嵌套对象),如果要做数据双/单向同步,需要搭配@ObjectLink
或者@Prop
使用
限制条件
- 使用
@Observed
装饰class
会改变class
原始的原型链,@Observed
和其他类装饰器装饰同一个class
可能会带来问题。 @ObjectLink
装饰器不能在@Entry
装饰的自定义组件中使用。
装饰器说明
@Observed类装饰器 | 说明 |
---|---|
装饰器参数 | 无 |
类装饰器 | 装饰class。需要放在class的定义前,使用new创建类对象。 |
@ObjectLink变量装饰器 | 说明 |
---|---|
装饰器参数 | 无 |
允许装饰的变量类型 | 必须为被@Observed装饰的class实例,必须指定类型。不支持简单类型,可以使用@Prop。 |
@ObjectLink装饰的数据为可读示例。
this.objLink.a= ...
this.objLink= ...
@ObjectLink
装饰的变量不能被赋值,如果要使用赋值操作,请使用@Prop
。@Prop
装饰的变量和数据源的关系是是单向同步,@Prop
装饰的变量在本地拷贝了数据源,所以它允许本地更改,如果父组件中的数据源有更新,@Prop
装饰的变量本地的修改将被覆盖;@ObjectLink
装饰的变量和数据源的关系是双向同步,@ObjectLink
装饰的变量相当于指向数据源的指针。禁止对@ObjectLink
装饰的变量赋值,如果一旦发生@ObjectLink
装饰的变量的赋值,则同步链将被打断。因为@ObjectLink
装饰的变量通过数据源(Object)引用来初始化。对于实现双向数据同步的@ObjectLink
,赋值相当于更新父组件中的数组项或者class的属性,TypeScript/JavaScript
不能实现,会发生运行时报错。
观察变化和行为表现
@Observed
装饰的类,如果其属性为非简单类型,比如class、Object
或者数组,也需要被@Observed
装饰,否则将观察不到其属性的变化。
class ClassA {
public c: number;
constructor(c: number) {
this.c = c;
}
}
@Observed
class ClassB {
public a: ClassA;
public b: number;
constructor(a: ClassA, b: number) {
this.a = a;
this.b = b;
}
}
以上示例中,ClassB
被@Observed
装饰,其成员变量的赋值的变化是可以被观察到的,但对于ClassA
,没有被@Observed
装饰,其属性的修改不能被观察到。
@ObjectLink b: ClassB
// 赋值变化可以被观察到
this.b.a = new ClassA(5)
this.b.b = 5
// ClassA没有被@Observed装饰,其属性的变化观察不到
this.b.a.c = 5
@ObjectLink:@ObjectLink
只能接收被@Observed
装饰class
的实例,推荐设计单独的自定义组件来渲染每一个数组或对象。此时,对象数组或嵌套对象(属性是对象的对象称为嵌套对象)需要两个自定义组件,一个自定义组件呈现外部数组/对象,另一个自定义组件呈现嵌套在数组/对象内的类对象。可以观察到:
- 其属性的数值的变化,其中属性是指
Object.keys(observedObject)
返回的所有属性。 - 如果数据源是数组,则可以观察到数组item的替换,如果数据源是class,可观察到class的属性的变化。
继承Date的class时,可以观察到Date整体的赋值,同时可通过调用Date的接口setFullYear, setMonth, setDate, setHours, setMinutes, setSeconds, setMilliseconds, setTime, setUTCFullYear, setUTCMonth, setUTCDate, setUTCHours, setUTCMinutes, setUTCSeconds, setUTCMilliseconds
更新Date的属性。
@Observed
class DateClass extends Date {
constructor(args: number | string) {
super(args)
}
}
@Observed
class ClassB {
public a: DateClass;
constructor(a: DateClass) {
this.a = a;
}
}
@Component
struct ViewA {
label: string = 'date';
@ObjectLink a: DateClass;
build() {
Column() {
Button(`child increase the day by 1`)
.onClick(() => {
this.a.setDate(this.a.getDate() + 1);
})
DatePicker({
start: new Date('1970-1-1'),
end: new Date('2100-1-1'),
selected: this.a
})
}
}
}
@Entry
@Component
struct ViewB {
@State b: ClassB = new ClassB(new DateClass('2023-1-1'));
build() {
Column() {
ViewA({ label: 'date', a: this.b.a })
Button(`parent update the new date`)
.onClick(() => {
this.b.a = new DateClass('2023-07-07');
})
Button(`ViewB: this.b = new ClassB(new DateClass('2023-08-20'))`)
.onClick(() => {
this.b = new ClassB(new DateClass('2023-08-20'));
})
}
}
}