HarmonyOS鸿蒙Next中在使用@Observed和@ObjectLink时，替换数组里的某个值不能更新UI，是怎么回事？

【背景知识】 可以将@Observed注解加到类上，将@ObjectLink注解加到组件的属性上，这样类和组件就构成了一个整体，当类的属性值发生变化，组件会同步跟随刷新；以此为基础重复操作，这样就实现了当复杂嵌套类（如二维数组、三维数组、对象map集合等）属性变化时，UI跟随着刷新。

【解决方案】 在主界面上使用嵌套类数组，使用Button组件修改嵌套类的属性值，页面跟随着刷新变化，效果如下：

具体实现步骤如下：

1. 创建一个最基础的类和对应的UI组件。

// 第一层UI组件
@Component
struct FirstItemComponent {
  @ObjectLink firstItem: FirstItem
  private TestF: Function = (v: string) => {}

  build() {
    Column() {
      Column() {
        Text(`id:${this.firstItem.id}, text: ${this.firstItem.text}`).fontSize(20).textAlign(TextAlign.Center)
        Button('子组件调用父组件方法修改')
          .onClick(() => {
            this.TestF('测试')
          })
      }.width('100%').justifyContent(FlexAlign.Center)
    }.width('100%').justifyContent(FlexAlign.Center).backgroundColor('#ffd9cba0')
  }
}

// 第一层最基础的信息类
@Observed
class FirstItem {
  id?: number
  text?: string

  constructor(id: number, text: string) {
    this.id = id;
    this.text = text;
  }
}

1. 创建第二层嵌套类和对应的UI组件。

@Component
struct SecondComponent {
  @ObjectLink secondItem: SecondItem
  private TestS: Function = (id: number, v: string) => {}

  build() {
    Column() {
      Row() {
        Text(`id:${this.secondItem.id}, text: ${this.secondItem.text}`).fontSize(20).textAlign(TextAlign.Center)
      }.width('100%').justifyContent(FlexAlign.SpaceBetween)

      Row() {
        List() {
          ForEach(this.secondItem.itemList, (item: FirstItem, index: number) => {
            ListItem() {
              Column() {
                FirstItemComponent({
                  firstItem: item, TestF: (v: string) => {
                    this.TestS(index, v)
                  }
                })
              }
            }
          })
        }
      }.width('100%')
    }
    .padding(10)
    .backgroundColor('#ffa3cba3')
    .width('100%')
  }
}

@Observed
class SecondItem {
  id?: number
  text?: string
  // 第一层基础信息的数组
  itemList?: Array<FirstItem>

  constructor(id: number, text: string, itemList: Array<FirstItem>) {
    this.id = id;
    this.text = text;
    this.itemList = itemList;
  }
}

1. 绘制主界面UI。

@Entry
@Component
struct IndexPage {
  // 第二层数组
  @State itemInfos: SecondItem[] = [
    new SecondItem(1, `secondItem1`, [new FirstItem(10, `firstItem1`), new FirstItem(11, `firstItem2`)]),
    new SecondItem(2, `secondItem2`, [new FirstItem(13, `firstItem3`), new FirstItem(14, `firstItem4`)])
  ]

  testF(index2: number, v: string, index: number) {
    this.itemInfos[index].itemList![index2].text = v
    console.log('V==> ' + v + 'index2==> ' + index2 + 'index==> ' + index)
  }

  build() {
    Column() {
      Row() {
        List({ space: 2 }) {
          ForEach(this.itemInfos, (item: SecondItem, index: number) => {
            ListItem() {
              SecondComponent({
                secondItem: item, TestS: (index2: number, v: string) => {
                  this.testF(index2, v, index)
                }
              })
            }
          })
        }
      }.width('100%').justifyContent(FlexAlign.SpaceBetween)

      Column() {
        Button('父组件，改变数组[0][1]的text值,看是否会变化')
          .onClick(() => {
          this.itemInfos[0].itemList![1].text = new Date().toString()
        })

        Divider().height(10)
        Button('父组件，改变数组[1][0]的text值,看是否会变化')
          .onClick(() => {
          this.itemInfos[1].itemList![0].text = new Date().toString()
        })
      }.margin({ top: 50 }).width('100%').justifyContent(FlexAlign.SpaceBetween)

    }.width('100%').justifyContent(FlexAlign.Center)
  }
}

【常见FAQ】 Q：嵌套过深是否会影响性能？ A：建议不超过三层嵌套。