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

上文所述的裝飾器僅能觀察到第一層的變化，但是在實(shí)際應(yīng)用開發(fā)中，應(yīng)用會(huì)根據(jù)開發(fā)需要，封裝自己的數(shù)據(jù)模型。對(duì)于多層嵌套的情況，比如二維數(shù)組，或者數(shù)組項(xiàng)class，或者class的屬性是class，他們的第二層的屬性變化是無(wú)法觀察到的。這就引出了@Observed/@ObjectLink裝飾器。

說明

從API version 9開始，這兩個(gè)裝飾器支持在ArkTS卡片中使用。

概述

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

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

限制條件

使用@Observed裝飾class會(huì)改變class原始的原型鏈，@Observed和其他類裝飾器裝飾同一個(gè)class可能會(huì)帶來問題。

裝飾器說明

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

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

說明

@ObjectLink裝飾的變量不能被賦值，如果要使用賦值操作，請(qǐng)使用@Prop。

• @Prop裝飾的變量和數(shù)據(jù)源的關(guān)系是是單向同步，@Prop裝飾的變量在本地拷貝了數(shù)據(jù)源，所以它允許本地更改，如果父組件中的數(shù)據(jù)源有更新，@Prop裝飾的變量本地的修改將被覆蓋；
• @ObjectLink裝飾的變量和數(shù)據(jù)源的關(guān)系是雙向同步，@ObjectLink裝飾的變量相當(dāng)于指向數(shù)據(jù)源的指針。如果一旦發(fā)生@ObjectLink裝飾的變量的賦值，則同步鏈將被打斷。

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

圖1 初始化規(guī)則圖示

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

觀察的變化

@Observed裝飾的類，如果其屬性為非簡(jiǎn)單類型，比如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裝飾，其成員變量的賦值的變化是可以被觀察到的，但對(duì)于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í)例，可以觀察到：

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

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

框架行為

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

使用場(chǎng)景

嵌套對(duì)象

以下是嵌套類對(duì)象的數(shù)據(jù)結(jié)構(gòu)。

// 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;
  }
}

以下組件層次結(jié)構(gòu)呈現(xiàn)的是嵌套類對(duì)象的數(shù)據(jù)結(jié)構(gòu)。

@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() {
      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));
        })
    }
  }
}

ViewB中的事件句柄：

• this.b.a = new ClassA(0) 和this.b = new ClassB(new ClassA(0))： 對(duì)@State裝飾的變量b和其屬性的修改。
• this.b.a.c = … ：該變化屬于第二層的變化，@State無(wú)法觀察到第二層的變化，但是ClassA被@Observed裝飾，ClassA的屬性c的變化可以被@ObjectLink觀察到。

ViewA中的事件句柄：

• this.a.c += 1：對(duì)@ObjectLink變量a的修改，將觸發(fā)Button組件的刷新。@ObjectLink和@Prop不同，@ObjectLink不拷貝來自父組件的數(shù)據(jù)源，而是在本地構(gòu)建了指向其數(shù)據(jù)源的引用。
• @ObjectLink變量是只讀的，this.a = new ClassA(…)是不允許的，因?yàn)橐坏┵x值操作發(fā)生，指向數(shù)據(jù)源的引用將被重置，同步將被打斷。

對(duì)象數(shù)組

對(duì)象數(shù)組是一種常用的數(shù)據(jù)結(jié)構(gòu)。以下示例展示了數(shù)組對(duì)象的用法。

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

二維數(shù)組

使用@Observed觀察二維數(shù)組的變化。可以聲明一個(gè)被@Observed裝飾的繼承Array的子類。

@Observed
class StringArray extends Array<String> {
}

使用new StringArray()來構(gòu)造StringArray的實(shí)例，new運(yùn)算符使得@Observed生效，@Observed觀察到StringArray的屬性變化。

聲明一個(gè)從Array擴(kuò)展的類class StringArray extends Array {}，并創(chuàng)建StringArray的實(shí)例。@Observed裝飾的類需要使用new運(yùn)算符來構(gòu)建class實(shí)例。文章來源地址http://www.zghlxwxcb.cn/news/detail-799646.html

@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) {
            // 正常情況下需要有一個(gè)真實(shí)的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('!');
          }
        })
    }
  }
}

到了這里，關(guān)于HarmonyOS@Observed裝飾器和@ObjectLink裝飾器：嵌套類對(duì)象屬性變化的文章就介紹完了。如果您還想了解更多內(nèi)容，請(qǐng)?jiān)谟疑辖撬阉鱐OY模板網(wǎng)以前的文章或繼續(xù)瀏覽下面的相關(guān)文章，希望大家以后多多支持TOY模板網(wǎng)！