@Observed裝飾器和@ObjectLink裝飾器：嵌套類對象屬性變化

概述

@ObjectLink和@Observed類裝飾器用于在涉及嵌套對象或數(shù)組的場景中進行雙向數(shù)據(jù)同步：

• 被@Observed裝飾的類，可以被觀察到屬性的變化；
• 子組件中@ObjectLink裝飾器裝飾的狀態(tài)變量用于接收@Observed裝飾的類的實例，和父組件中對應的狀態(tài)變量建立雙向數(shù)據(jù)綁定。這個實例可以是數(shù)組中的被@Observed裝飾的項，或者是class object中的屬性，這個屬性同樣也需要被@Observed裝飾。
• 單獨使用@Observed是沒有任何作用的，需要搭配@ObjectLink或者@Prop使用。

限制條件

• 使用@Observed裝飾class會改變class原始的原型鏈，@Observed和其他類裝飾器裝飾同一個class可能會帶來問題。
• @ObjectLink裝飾器不能在@Entry裝飾的自定義組件中使用。

裝飾器說明

@ObjectLink裝飾的數(shù)據(jù)為可讀示例。

// 允許@ObjectLink裝飾的數(shù)據(jù)屬性賦值
this.objLink.a= ...
// 不允許@ObjectLink裝飾的數(shù)據(jù)自身賦值
this.objLink= ...

變量的傳遞/訪問規(guī)則說明

觀察變化和行為表現(xiàn)

觀察的變化

@Observed裝飾的類，如果其屬性為非簡單類型，比如class、Object或者數(shù)組，也需要被@Observed裝飾，否則將觀察不到其屬性的變化。

class ClassA {
  public c: number;

  constructor(c: number) {
    this.c = c;
  }
}

@Observed
class ClassB {
  public a: ClassA;
  public b: number;

  constructor(a: ClassA, b: number) {
    this.a = a;
    this.b = b;
  }
}

以上示例中，ClassB被@Observed裝飾，其成員變量的賦值的變化是可以被觀察到的，但對于ClassA，沒有被@Observed裝飾，其屬性的修改不能被觀察到。

@ObjectLink b: ClassB

// 賦值變化可以被觀察到
this.b.a = new ClassA(5)
this.b.b = 5

// ClassA沒有被@Observed裝飾，其屬性的變化觀察不到
this.b.a.c = 5

@ObjectLink：@ObjectLink只能接收被@Observed裝飾class的實例，可以觀察到：

• 其屬性的數(shù)值的變化，其中屬性是指Object.keys(observedObject)返回的所有屬性，示例請參考嵌套對象。

• 如果數(shù)據(jù)源是數(shù)組，則可以觀察到數(shù)組item的替換，如果數(shù)據(jù)源是class，可觀察到class的屬性的變化，示例請參考對象數(shù)組。

框架行為

1. 初始渲染：
   1. @Observed裝飾的class的實例會被不透明的代理對象包裝，代理了class上的屬性的setter和getter方法
   2. 子組件中@ObjectLink裝飾的從父組件初始化，接收被@Observed裝飾的class的實例，@ObjectLink的包裝類會將自己注冊給@Observed class。
2. 屬性更新：當@Observed裝飾的class屬性改變時，會走到代理的setter和getter，然后遍歷依賴它的@ObjectLink包裝類，通知數(shù)據(jù)更新。

使用場景

嵌套對象

以下是嵌套類對象的數(shù)據(jù)結構。

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

@Observed
class ClassA {
  public id: number;
  public c: number;

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

@Observed
class ClassB {
  public a: ClassA;

  constructor(a: ClassA) {
    this.a = a;
  }
}

@Component
struct ViewA {
  label: string = 'ViewA1';
  @ObjectLink a: ClassA;

  build() {
    Row() {
      Button(`ViewA [${this.label}] this.a.c=${this.a.c} +1`)
        .onClick(() => {
          this.a.c += 1;
        })
    }
  }
}

@Entry
@Component
struct ViewB {
  @State b: ClassB = new ClassB(new ClassA(0));

  build() {
    Column() {
      // in low version,DevEco may throw a warning,but it does not matter.
      // you can still compile and run.
      ViewA({ label: 'ViewA #1', a: this.b.a })
      ViewA({ label: 'ViewA #2', a: this.b.a })

      Button(`ViewB: this.b.a.c+= 1`)
        .onClick(() => {
          this.b.a.c += 1;
        })
      Button(`ViewB: this.b.a = new ClassA(0)`)
        .onClick(() => {
          this.b.a = new ClassA(0);
        })
      Button(`ViewB: this.b = new ClassB(ClassA(0))`)
        .onClick(() => {
          this.b = new ClassB(new ClassA(0));
        })
    }
  }
}

對象數(shù)組

對象數(shù)組是一種常用的數(shù)據(jù)結構。以下示例展示了數(shù)組對象的用法。

@Component
struct ViewA {
  // 子組件ViewA的@ObjectLink的類型是ClassA
  @ObjectLink a: ClassA;
  label: string = 'ViewA1';

  build() {
    Row() {
      Button(`ViewA [${this.label}] this.a.c = ${this.a.c} +1`)
        .onClick(() => {
          this.a.c += 1;
        })
    }
  }
}

@Entry
@Component
struct ViewB {
  // ViewB中有@State裝飾的ClassA[]
  @State arrA: ClassA[] = [new ClassA(0), new ClassA(0)];

  build() {
    Column() {
      ForEach(this.arrA,
        (item) => {
          ViewA({ label: `#${item.id}`, a: item })
        },
        (item) => item.id.toString()
      )
      // 使用@State裝飾的數(shù)組的數(shù)組項初始化@ObjectLink，其中數(shù)組項是被@Observed裝飾的ClassA的實例
      ViewA({ label: `ViewA this.arrA[first]`, a: this.arrA[0] })
      ViewA({ label: `ViewA this.arrA[last]`, a: this.arrA[this.arrA.length-1] })

      Button(`ViewB: reset array`)
        .onClick(() => {
          this.arrA = [new ClassA(0), new ClassA(0)];
        })
      Button(`ViewB: push`)
        .onClick(() => {
          this.arrA.push(new ClassA(0))
        })
      Button(`ViewB: shift`)
        .onClick(() => {
          this.arrA.shift()
        })
      Button(`ViewB: chg item property in middle`)
        .onClick(() => {
          this.arrA[Math.floor(this.arrA.length / 2)].c = 10;
        })
      Button(`ViewB: chg item property in middle`)
        .onClick(() => {
          this.arrA[Math.floor(this.arrA.length / 2)] = new ClassA(11);
        })
    }
  }
}

• this.arrA[Math.floor(this.arrA.length/2)] = new ClassA(..) ：該狀態(tài)變量的改變觸發(fā)2次更新：
  1. ForEach：數(shù)組項的賦值導致ForEach的itemGenerator被修改，因此數(shù)組項被識別為有更改，F(xiàn)orEach的item builder將執(zhí)行，創(chuàng)建新的ViewA組件實例。
  2. ViewA({ label: `ViewA this.arrA[last]`, a: this.arrA[this.arrA.length-1] })：上述更改改變了數(shù)組中第二個元素，所以綁定this.arrA[1]的ViewA將被更新；
• this.arrA.push(new ClassA(0)) ： 將觸發(fā)2次不同效果的更新：
  1. ForEach：新添加的ClassA對象對于ForEach是未知的itemGenerator，F(xiàn)orEach的item builder將執(zhí)行，創(chuàng)建新的ViewA組件實例。
  2. ViewA({ label: `ViewA this.arrA[last]`, a: this.arrA[this.arrA.length-1] })：數(shù)組的最后一項有更改，因此引起第二個ViewA的實例的更改。對于ViewA({ label: `ViewA this.arrA[first]`, a: this.arrA[0] })，數(shù)組的更改并沒有觸發(fā)一個數(shù)組項更改的改變，所以第一個ViewA不會刷新。
• this.arrA[Math.floor(this.arrA.length/2)].c：@State無法觀察到第二層的變化，但是ClassA被@Observed裝飾，ClassA的屬性的變化將被@ObjectLink觀察到。

二維數(shù)組

使用@Observed觀察二維數(shù)組的變化?？梢月暶饕粋€被@Observed裝飾的繼承Array的子類。

@Observed
class StringArray extends Array<String> {
}

使用new StringArray()來構造StringArray的實例，new運算符使得@Observed生效，@Observed觀察到StringArray的屬性變化。

聲明一個從Array擴展的類class StringArray extends Array<String> {}，并創(chuàng)建StringArray的實例。@Observed裝飾的類需要使用new運算符來構建class實例。

@Observed
class StringArray extends Array<String> {
}

@Component
struct ItemPage {
  @ObjectLink itemArr: StringArray;

  build() {
    Row() {
      Text('ItemPage')
        .width(100).height(100)

      ForEach(this.itemArr,
        item => {
          Text(item)
            .width(100).height(100)
        },
        item => item
      )
    }
  }
}

@Entry
@Component
struct IndexPage {
  @State arr: Array<StringArray> = [new StringArray(), new StringArray(), new StringArray()];

  build() {
    Column() {
      ItemPage({ itemArr: this.arr[0] })
      ItemPage({ itemArr: this.arr[1] })
      ItemPage({ itemArr: this.arr[2] })

      Divider()

      ForEach(this.arr,
        itemArr => {
          ItemPage({ itemArr: itemArr })
        },
        itemArr => itemArr[0]
      )

      Divider()

      Button('update')
        .onClick(() => {
          console.error('Update all items in arr');
          if (this.arr[0][0] !== undefined) {
            // 正常情況下需要有一個真實的ID來與ForEach一起使用，但此處沒有
            // 因此需要確保推送的字符串是唯一的。
            this.arr[0].push(`${this.arr[0].slice(-1).pop()}${this.arr[0].slice(-1).pop()}`);
            this.arr[1].push(`${this.arr[1].slice(-1).pop()}${this.arr[1].slice(-1).pop()}`);
            this.arr[2].push(`${this.arr[2].slice(-1).pop()}${this.arr[2].slice(-1).pop()}`);
          } else {
            this.arr[0].push('Hello');
            this.arr[1].push('World');
            this.arr[2].push('!');
          }
        })
    }
  }
}