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

概述

@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是沒(méi)有任何作用的，需要搭配@ObjectLink或者@Prop使用。

限制條件

• 使用@Observed裝飾class會(huì)改變class原始的原型鏈，@Observed和其他類裝飾器裝飾同一個(gè)class可能會(huì)帶來(lái)問(wèn)題。
• @ObjectLink裝飾器不能在@Entry裝飾的自定義組件中使用。

裝飾器說(shuō)明

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

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

說(shuō)明

@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裝飾的變量的賦值，則同步鏈將被打斷。

變量的傳遞/訪問(wèn)規(guī)則說(shuō)明

圖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，沒(méi)有被@Observed裝飾，其屬性的修改不能被觀察到。

@ObjectLink b: ClassB
// 賦值變化可以被觀察到
this.b.a = new ClassA(5)
this.b.b = 5
// ClassA沒(méi)有被@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.初始渲染：

a.@Observed裝飾的class的實(shí)例會(huì)被不透明的代理對(duì)象包裝，代理了class上的屬性的setter和getter方法

b.子組件中@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() {
      // 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));
        })
    }
  }
}

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不拷貝來(lái)自父組件的數(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次更新：

  a.ForEach：數(shù)組項(xiàng)的賦值導(dǎo)致ForEach的itemGenerator被修改，因此數(shù)組項(xiàng)被識(shí)別為有更改，F(xiàn)orEach的item builder將執(zhí)行，創(chuàng)建新的ViewA組件實(shí)例。

  b.ViewA({ label:?ViewA this.arrA[last], a: this.arrA[this.arrA.length-1] })：上述更改改變了數(shù)組中第二個(gè)元素，所以綁定this.arrA[1]的ViewA將被更新；

• this.arrA.push(new ClassA(0)) ： 將觸發(fā)2次不同效果的更新：

  a.ForEach：新添加的ClassA對(duì)象對(duì)于ForEach是未知的itemGenerator，F(xiàn)orEach的item builder將執(zhí)行，創(chuàng)建新的ViewA組件實(shí)例。

  b.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ù)組的更改并沒(méi)有觸發(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()來(lái)構(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)算符來(lái)構(gòu)建class實(shí)例。

@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來(lái)與ForEach一起使用，但此處沒(méi)有
            // 因此需要確保推送的字符串是唯一的。
            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('!');
          }
        })
    }
  }
}

作為一名合格一線開(kāi)發(fā)程序員，大家心里肯定會(huì)有很多疑問(wèn)！鴻蒙系統(tǒng)這么強(qiáng)大~~

為了能夠讓大家跟上互聯(lián)網(wǎng)時(shí)代的技術(shù)迭代，在這里跟大家分享一下我自己近期學(xué)習(xí)心得以及參考網(wǎng)上資料整理出的一份最新版的鴻蒙學(xué)習(xí)提升資料，有需要的小伙伴自行領(lǐng)取，限時(shí)開(kāi)源，先到先得~~~~

領(lǐng)取以下高清學(xué)習(xí)路線原圖請(qǐng)點(diǎn)擊→《鴻蒙全套學(xué)習(xí)指南》純血鴻蒙HarmonyOS基礎(chǔ)技能學(xué)習(xí)路線圖

領(lǐng)取以上完整高清學(xué)習(xí)路線圖，請(qǐng)點(diǎn)擊→《鴻蒙開(kāi)發(fā)學(xué)習(xí)之應(yīng)用模型》小編自己整理的部分學(xué)習(xí)資料（包含有高清視頻、開(kāi)發(fā)文檔、電子書籍等）

以上分享的學(xué)習(xí)路線都適合哪些人跟著學(xué)習(xí)？

• -應(yīng)屆生/計(jì)算機(jī)專業(yè)通過(guò)學(xué)習(xí)鴻蒙新興技術(shù)，入行互聯(lián)網(wǎng)，未來(lái)高起點(diǎn)就業(yè)。
• -0基礎(chǔ)轉(zhuǎn)行提前布局新方向，抓住風(fēng)口，自我提升，獲得更多就業(yè)機(jī)會(huì)。
• -技術(shù)提升/進(jìn)階跳槽發(fā)展瓶頸期，提升職場(chǎng)競(jìng)爭(zhēng)力，快速掌握鴻蒙技術(shù)，享受藍(lán)海紅利。
  

最后

鴻蒙開(kāi)發(fā)學(xué)習(xí)是一個(gè)系統(tǒng)化的過(guò)程，從基礎(chǔ)知識(shí)的學(xué)習(xí)到實(shí)戰(zhàn)技能的錘煉，再到對(duì)前沿技術(shù)的探索，每一環(huán)節(jié)都至關(guān)重要。希望這份教程資料能幫助您快速入門并在鴻蒙開(kāi)發(fā)之路上步步攀升，成就一番事業(yè)。讓我們一起乘風(fēng)破浪，擁抱鴻蒙生態(tài)的廣闊未來(lái)！

如果你覺(jué)得這篇內(nèi)容對(duì)你有幫助，我想麻煩大家動(dòng)動(dòng)小手給我：點(diǎn)贊，轉(zhuǎn)發(fā)，有你們的 『點(diǎn)贊和評(píng)論』，才是我創(chuàng)造的動(dòng)力。

關(guān)注我，同時(shí)可以期待后續(xù)文章ing，不定期分享原創(chuàng)知識(shí)。

想要獲取更多完整鴻蒙最新VIP學(xué)習(xí)資料，請(qǐng)點(diǎn)擊→《鴻蒙基礎(chǔ)入門學(xué)習(xí)指南》文章來(lái)源地址http://www.zghlxwxcb.cn/news/detail-833118.html

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