HarmonyOS @Observed装饰器问题咨询

若想Text(a: ${this.b.classA.a})这块视图更新需要单独抽成组件，参考示例如下：

//当State修饰一个变量的时候，第一层可以监听到，再深层则监听不到
//第一个button：修改嵌套超过两层，所以UI未更新 但是ChildA传递参数是  @ObjectLink修饰的可以使UI更新
//第二个button：修改的是变量的第一层，UI可以更新
//第三个button：因为传递a是经过@ObjectLink修饰的，修改第一层UI可以更新
//第四个button：和第一个Button效果是一样的，若是想修改a的值需要把Text组件单独抽出来成组件，像组件ChildA一样
//对于嵌套层次多的变量，@Observed和@ObjectLink要一起使用，对于要修改的要单独抽成组件，该组件的视图可以更新
@Entry
@Component
export struct ObservedPage {
  @State b: ClassB = new ClassB(new ClassA(10), 20)

  build() {
    Column({ space: 10 }) {

      // Text(`a: ${this.b.classA.a}`)  //Text组件要抽成ChildC组件
      ChildC({
        a: this.b.classA
      })
      Button("Parent:Change ClassA.a")
        .onClick(() => {
          this.b.classA.a += 1
        })

      Text(`b: ${this.b.b}`)
        .margin({ top: 30 })
      Button("Parent:Change ClassB.b")
        .onClick(() => {
          this.b.b += 1
        })

      ChildA({ a: this.b.classA })
        .margin({ top: 30 })

      ChildB({ b: this.b })
        .margin({ top: 30 })

    }
    .width('100%')
    .alignItems(HorizontalAlign.Center)

  }
}

@Component
struct ChildA {
  @ObjectLink a: ClassA;

  build() {
    Column({ space: 10 }) {
      Text(`a: ${this.a.a}`)
      Button("ChildA:Change ClassA.a")
        .onClick(() => {
          this.a.a += 1
        })
    }
  }
}

@Component
struct ChildC {
  @ObjectLink a: ClassA;

  build() {
    Column({ space: 10 }) {
      Text(`a: ${this.a.a}`)
    }
  }
}

@Component
struct ChildB {
  @ObjectLink b: ClassB;

  build() {
    Column({ space: 10 }) {
      // Text(`a: ${this.b.classA.a}`) //Text组件要抽成ChildC组件
      ChildC({
        a: this.b.classA
      })
      Button("ChildB:Change ClassA.a")
        .onClick(() => {
          this.b.classA.a += 1 //抽成组件监听
        })
    }
  }
}

@Observed
class ClassA {
  a: number

  constructor(a: number) {
    this.a = a
  }
}

@Observed
class ClassB {
  classA: ClassA
  b: number

  constructor(classA: ClassA, b: number) {
    this.classA = classA
    this.b = b
  }
}
1.
2.
3.
4.
5.
6.
7.
8.
9.
10.
11.
12.
13.
14.
15.
16.
17.
18.
19.
20.
21.
22.
23.
24.
25.
26.
27.
28.
29.
30.
31.
32.
33.
34.
35.
36.
37.
38.
39.
40.
41.
42.
43.
44.
45.
46.
47.
48.
49.
50.
51.
52.
53.
54.
55.
56.
57.
58.
59.
60.
61.
62.
63.
64.
65.
66.
67.
68.
69.
70.
71.
72.
73.
74.
75.
76.
77.
78.
79.
80.
81.
82.
83.
84.
85.
86.
87.
88.
89.
90.
91.
92.
93.
94.
95.
96.
97.
98.
99.
100.
101.
102.
103.
104.
105.
106.