【鸿蒙实战开发】@Observed装饰器和@ObjectLink装饰器：嵌套类对象属性变化

@Observed装饰器和@ObjectLink装饰器：嵌套类对象属性变化

前言

为什么要有@Observed装饰器和@ObjectLink装饰器？

在@Prop，@Link，@Provide与@Consume这几个装饰器仅能观察到第一层的变化，在实际应用开发中，应用会根据开发需要，封装自己的数据模型。对于多层嵌套的情况，比如二维数组，或者数组项class，或者class的属性是class，他们的第二层的属性变化是无法观察到的。这就引出了@Observed/@ObjectLink装饰器的作用。

概述

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

●被@Observed装饰的类，可以被观察到属性的变化；

●子组件中@ObjectLink装饰器装饰的状态变量用于接收@Observed装饰的类的实例，和父组件中对应的状态变量建立双向数据绑定。这个实例可以是数组中的被@Observed装饰的项，或者是class object中的属性，这个属性同样也需要被@Observed装饰。

●单独使用@Observed是没有任何作用的，需要搭配@ObjectLink或者@Prop使用。

注意：

使用@Observed装饰class会改变class原始的原型链，@Observed和其他类装饰器装饰同一个class可能会带来问题。

@ObjectLink装饰器不能在@Entry装饰的自定义组件中使用。

装饰器说明

@ObjectLink装饰的变量不能被赋值，如果要使用赋值操作，可以使用@Prop。

●@Prop装饰的变量和数据源的关系是是单向同步，@Prop装饰的变量在本地拷贝了数据源，所以它允许本地更改，如果父组件中的数据源有更新，@Prop装饰的变量本地的修改将被覆盖；

●@ObjectLink装饰的变量和数据源的关系是双向同步，@ObjectLink装饰的变量相当于指向数据源的指针。禁止对@ObjectLink装饰的变量赋值，如果一旦发生@ObjectLink装饰的变量的赋值，则同步链将被打断。因为@ObjectLink装饰的变量通过数据源（Object）引用来初始化。对于实现双向数据同步的@ObjectLink，赋值相当于更新父组件中的数组项或者class的属性，TypeScript/JavaScript不能实现，会发生运行时报错。

框架行为

●初始渲染：

●@Observed装饰的class的实例会被不透明的代理对象包装，代理了class上的属性的setter和