深度监听对象数组变化

作者：flfljh

2024-11-05
湖南
本文字数：1548 字
阅读完需：约 5 分钟

深度监听对象数组变化

前言：

在实际的应用开发过程中，我们会发现之前提到的装饰器存在一定的局限性。它仅仅能够观察到第一层的变化，而在开发中，应用常常会依据自身需求封装数据模型。当遇到多层嵌套的情况时，就会出现问题。例如二维数组，或者数组项是 class，又或者 class 的属性是 class，这种情况下，它们第二层的属性变化是无法被观察到的。这一不足严重影响了对复杂数据结构变化的监测。不过，有解决办法，那就是 @Observed/@ObjectLink 装饰器，它们的出现为解决多层嵌套数据结构属性变化观察问题提供了可能，能够更好地满足开发中对复杂数据变化监测的要求，保障应用开发中数据处理的准确性和有效性。

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

这里对官网文档进行一个解释说明

官网文档地址：https://developer.huawei.com/consumer/cn/doc/harmonyos-guides-V5/arkts-observed-and-objectlink-V5#%E5%AF%B9%E8%B1%A1%E6%95%B0%E7%BB%84

let NextID: number = 1;
// 使用装饰器监听数组对象@Observedclass Info {  public id: number;  public info: number;
  constructor(info: number) {    this.id = NextID++;    this.info = info;  }}// ObjectLink一定要放在子组件里面@Componentstruct Child {  // 子组件Child的@ObjectLink的类型是Info  @ObjectLink info: Info;  label: string = 'ViewChild';
  build() {    Row() {      Button(`ViewChild [${this.label}] this.info.info = ${this.info ? this.info.info : "undefined"}`)        .width(320)        .margin(10)        .onClick(() => {          this.info.info += 1;        })    }  }}
@Entry@Componentstruct Parent {  // 即使是在函数之中请求的数据，赋值时也要使用 new ，否则监听不到函数变化  // Parent中有@State装饰的Info[]  @State arrA: Info[] = [new Info(0), new Info(0)];
  build() {    Column() {      ForEach(this.arrA,        (item: Info) => {          Child({ label: `#${item.id}`, info: item })        },        (item: Info): string => item.id.toString()      )      // 使用@State装饰的数组的数组项初始化@ObjectLink，其中数组项是被@Observed装饰的Info的实例      Child({ label: `ViewChild this.arrA[first]`, info: this.arrA[0] })      Child({ label: `ViewChild this.arrA[last]`, info: this.arrA[this.arrA.length-1] })
      Button(`ViewParent: reset array`)        .width(320)        .margin(10)        .onClick(() => {          this.arrA = [new Info(0), new Info(0)];        })      Button(`ViewParent: push`)        .width(320)        .margin(10)        .onClick(() => {          this.arrA.push(new Info(0))        })      Button(`ViewParent: shift`)        .width(320)        .margin(10)        .onClick(() => {          if (this.arrA.length > 0) {            this.arrA.shift()          } else {            console.log("length <= 0")          }        })      Button(`ViewParent: item property in middle`)        .width(320)        .margin(10)        .onClick(() => {          this.arrA[Math.floor(this.arrA.length / 2)].info = 10;        })      Button(`ViewParent: item property in middle`)        .width(320)        .margin(10)        .onClick(() => {          this.arrA[Math.floor(this.arrA.length / 2)] = new Info(11);        })    }  }}