HarmonyOS 鸿蒙Next中使用 @Observed 与 @ObjectLink 实现对象深层响应式更新

问题

我们在声明式 UI 框架中，响应式更新主要依赖于状态变量的变更通知这种机制。但是，当 @State 绑定的是一个普通 JavaScript 对象实例时，框架默认只监听对象引用的变化，而不会追踪其内部属性的修改。这意味着直接赋值虽然改变了数据，但 UI 并不会刷新，导致视图与状态不一致，那我们如何解决呢？

思路

因为在HarmonyOS 6 中引入了 @Observed 与 @ObjectLink ，所以我们通过这2个组件来进行方案组合：

首先，通过 @Observed 装饰器标记目标实例，使得对应的实例具备属性变更可观察性——ArkTS 编译器会为其实例生成代理（Proxy）包装，以此来进行拦截属性读写操作；

其次，在父组件中使用 @State 声明该类的实例，确保其作为状态源；

最后，在子组件中通过 @ObjectLink 接收该对象，这里需要注意，不是使用 @Prop了，@ObjectLink 会自动订阅该对象内部属性的变化，并在任一属性更新时触发子组件的重新构建。

实现步骤：

步骤 1：用 [@Observed](/user/Observed) 装饰需要响应的对象类

[@Observed](/user/Observed)
export class User {
  name: string;
  age: number;

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

步骤 2：在父组件中用 [@State](/user/State) 声明该对象实例

@Entry
@Component
struct UserProfile {
  [@State](/user/State) user: User = new User('Alice', 25);
  // ...
}

步骤 3：子组件通过 [@ObjectLink](/user/ObjectLink) 接收对象

@Component
struct UserInfoCard {
  [@ObjectLink](/user/ObjectLink) user: User; // ← 关键：必须用 [@ObjectLink](/user/ObjectLink)

  build() {
    Column() {
      Text(`姓名: ${this.user.name}`)
      Text(`年龄: ${this.user.age}`)
    }
  }
}

步骤 4：直接修改对象属性即可自动更新 UI

// 在父组件中
Button('改名')
  .onClick(() => {
    this.user.name = 'Bob'; 
  })

完整示例代码：

[@Observed](/user/Observed)
export class User {
  name: string;
  age: number;
  constructor(name: string, age: number) {
    this.name = name;
    this.age = age;
  }
}

@Component
struct UserInfoCard {
  [@ObjectLink](/user/ObjectLink) user: User;

  build() {
    Column({ space: 8 }) {
      Text(`姓名: ${this.user.name}`)
        .fontSize(18)
      Text(`年龄: ${this.user.age}`)
        .fontColor(Color.Gray)
    }
    .padding(15)
    .backgroundColor('#F9F9F9')
    .borderRadius(12)
  }
}

@Entry
@Component
struct ObservedDemo {
  [@State](/user/State) user: User = new User('Alice', 25);

  build() {
    Column({ space: 20 }) {
      Text('[@Observed](/user/Observed) 对象响应式示例')
        .fontSize(18)
        .fontWeight(FontWeight.Bold)

      UserInfoCard({ user: this.user })

      Row({ space: 10 }) {
        Button('改名 → Bob')
          .onClick(() => {
            this.user.name = 'Bob';
          })
        Button('+1岁')
          .onClick(() => {
            this.user.age += 1;
          })
      }
    }
    .padding(30)
    .width('100%')
    .height('100%')
  }
}