HarmonyOS 鸿蒙Next关于@Observed装饰器和@ObjectLink装饰器使用问题

HarmonyOS 鸿蒙Next关于@Observed装饰器和@ObjectLink装饰器使用问题

https://developer.huawei.com/consumer/cn/doc/harmonyos-guides-V5/arkts-observed-and-objectlink-V5#%E8%A7%82%E5%AF%9F%E5%8F%98%E5%8C%96

如下文档中的示例代码Father组件传入的是bookName对象。因此外部调用this.child.bookName.size+=10 方法修改size值 Father组件组件内部size数值会更新。但若Father组件传入的是this.child对象调用外部调用this.child.bookName.size+=10 方法，Father组件组件内部size数值就无法及时更新，请问这种情况应该如何处理UI更新问题。从demo示例上看[@Observed](/user/Observed)装饰器和[@ObjectLink](/user/ObjectLink)装饰器只能响应当前class层级数据来更新UI。这里只是举一个简单例子，若开发过程中有一个复杂class对象层级较深，子组件必须传递根对象并且内部会在不同层级上对某个对象数值进行修改应该如何解决这种业务场景。

// objectLinkNestedObjects.ets
let NextID: number = 1;

[@Observed](/user/Observed)
class Bag {
  public id: number;
  public size: number;

  constructor(size: number) {
    this.id = NextID++;
    this.size = size;
  }
}

[@Observed](/user/Observed)
class User {
  public bag: Bag;

  constructor(bag: Bag) {
    this.bag = bag;
  }
}

[@Observed](/user/Observed)
class Book {
  public bookName: BookName;

  constructor(bookName: BookName) {
    this.bookName = bookName;
  }
}

[@Observed](/user/Observed)
class BookName extends Bag {
  public nameSize: number;

  constructor(nameSize: number) {
    // 调用父类方法对nameSize进行处理
    super(nameSize);
    this.nameSize = nameSize;
  }
}

@Component
struct Son {
  label: string = 'Son';
  [@ObjectLink](/user/ObjectLink) bag: Bag;

  build() {
    Column() {
      Text(`Son [${this.label}] this.bag.size = ${this.bag.size}`)
        .fontColor('#ffffffff')
        .backgroundColor('#ff3d9dba')
        .width(320)
        .height(50)
        .borderRadius(25)
        .margin(10)
        .textAlign(TextAlign.Center)
      Button(`Son: this.bag.size add 1`)
        .width(320)
        .backgroundColor('#ff17a98d')
        .margin(10)
        .onClick(() => {
          this.bag.size += 1;
        })
    }
  }
}

@Component
struct Father {
  label: string = 'Father';
  [@ObjectLink](/user/ObjectLink) bookName: BookName;

  build() {
    Row() {
      Column() {
        Text(`Father [${this.label}] this.bookName.size = ${this.bookName.size}`)
          .fontColor('#ffffffff')
          .backgroundColor('#ff3d9dba')
          .width(320)
          .height(50)
          .borderRadius(25)
          .margin(10)
          .textAlign(TextAlign.Center)
        Button(`Father: this.bookName.size add 1`)
          .width(320)
          .backgroundColor('#ff17a98d')
          .margin(10)
          .onClick(() => {
            this.bookName.size += 1;
            console.log('this.bookName.size:' + this.bookName.size)
          })
      }
      .width(320)
    }
  }
}

@Entry
@Component
struct GrandFather {
  @State user: User = new User(new Bag(0));
  @State child: Book = new Book(new BookName(0));

  build() {
    Column() {
      Son({ label: 'Son #1', bag: this.user.bag })
        .width(320)
        // 修改这里的Father入参 ，改成this.child
      Father({ label: 'Father #3', bookName: this.child.bookName })
        .width(320)
      Button(`GrandFather: this.child.bookName.size add 10`)
        .width(320)
        .backgroundColor('#ff17a98d')
        .margin(10)
        .onClick(() => {
          this.child.bookName.size += 10
          console.log('this.child.bookName.size:' + this.child.bookName.size)
        })
      Button(`GrandFather: this.user.bag = new Bag(10)`)
        .width(320)
        .backgroundColor('#ff17a98d')
        .margin(10)
        .onClick(() => {
          this.user.bag = new Bag(10);
        })
      Button(`GrandFather: this.user = new User(new Bag(20))`)
        .width(320)
        .backgroundColor('#ff17a98d')
        .margin(10)
        .onClick(() => {
          this.user = new User(new Bag(20));
        })
    }
  }
}