@Watch裝飾器：狀態(tài)變量更改通知

概述

@Watch用于監(jiān)聽狀態(tài)變量的變化，當狀態(tài)變量變化時，@Watch的回調(diào)方法將被調(diào)用。@Watch在ArkUI框架內(nèi)部判斷數(shù)值有無更新使用的是嚴格相等（===），遵循嚴格相等規(guī)范。當在嚴格相等為false的情況下，就會觸發(fā)@Watch的回調(diào)。

裝飾器說明

語法說明

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

1. 當觀察到狀態(tài)變量的變化（包括雙向綁定的AppStorage和LocalStorage中對應的key發(fā)生的變化）的時候，對應的@Watch的回調(diào)方法將被觸發(fā)；
2. @Watch方法在自定義組件的屬性變更之后同步執(zhí)行；
3. 如果在@Watch的方法里改變了其他的狀態(tài)變量，也會引起狀態(tài)變更和@Watch的執(zhí)行；
4. 在第一次初始化的時候，@Watch裝飾的方法不會被調(diào)用，即認為初始化不是狀態(tài)變量的改變。只有在后續(xù)狀態(tài)改變時，才會調(diào)用@Watch回調(diào)方法。

限制條件

• 建議開發(fā)者避免無限循環(huán)。循環(huán)可能是因為在@Watch的回調(diào)方法里直接或者間接地修改了同一個狀態(tài)變量引起的。為了避免循環(huán)的產(chǎn)生，建議不要在@Watch的回調(diào)方法里修改當前裝飾的狀態(tài)變量；
• 開發(fā)者應關注性能，屬性值更新函數(shù)會延遲組件的重新渲染（具體請見上面的行為表現(xiàn)），因此，回調(diào)函數(shù)應僅執(zhí)行快速運算；
• 不建議在@Watch函數(shù)中調(diào)用async await，因為@Watch設計的用途是為了快速的計算，異步行為可能會導致重新渲染速度的性能問題。

使用場景

@Watch和自定義組件更新

以下示例展示組件更新和@Watch的處理步驟。count在CountModifier中由@State裝飾，在TotalView中由@Prop裝飾。

@Component
struct TotalView {
  @Prop @Watch('onCountUpdated') count: number;
  @State total: number = 0;
  // @Watch 回調(diào)
  onCountUpdated(propName: string): void {
    this.total += this.count;
  }

  build() {
    Text(`Total: ${this.total}`)
  }
}

@Entry
@Component
struct CountModifier {
  @State count: number = 0;

  build() {
    Column() {
      Button('add to basket')
        .onClick(() => {
          this.count++
        })
      TotalView({ count: this.count })
    }
  }
}

處理步驟：

1. CountModifier自定義組件的Button.onClick點擊事件自增count。
2. 由于@State count變量更改，子組件TotalView中的@Prop被更新，其@Watch('onCountUpdated')方法被調(diào)用，更新了子組件TotalView 中的total變量。
3. 子組件TotalView中的Text重新渲染。

@Watch與@Link組合使用

以下示例說明了如何在子組件中觀察@Link變量。

class PurchaseItem {
  static NextId: number = 0;
  public id: number;
  public price: number;

  constructor(price: number) {
    this.id = PurchaseItem.NextId++;
    this.price = price;
  }
}

@Component
struct BasketViewer {
  @Link @Watch('onBasketUpdated') shopBasket: PurchaseItem[];
  @State totalPurchase: number = 0;

  updateTotal(): number {
    let total = this.shopBasket.reduce((sum, i) => sum + i.price, 0);
    // 超過100歐元可享受折扣
    if (total >= 100) {
      total = 0.9 * total;
    }
    return total;
  }
  // @Watch 回調(diào)
  onBasketUpdated(propName: string): void {
    this.totalPurchase = this.updateTotal();
  }

  build() {
    Column() {
      ForEach(this.shopBasket,
        (item) => {
          Text(`Price: ${item.price.toFixed(2)} €`)
        },
        item => item.id.toString()
      )
      Text(`Total: ${this.totalPurchase.toFixed(2)} €`)
    }
  }
}

@Entry
@Component
struct BasketModifier {
  @State shopBasket: PurchaseItem[] = [];

  build() {
    Column() {
      Button('Add to basket')
        .onClick(() => {
          this.shopBasket.push(new PurchaseItem(Math.round(100 * Math.random())))
        })
      BasketViewer({ shopBasket: $shopBasket })
    }
  }
}

處理步驟如下：

1. BasketModifier組件的Button.onClick向BasketModifier shopBasket中添加條目；
2. @Link裝飾的BasketViewer shopBasket值發(fā)生變化；
3. 狀態(tài)管理框架調(diào)用@Watch函數(shù)BasketViewer onBasketUpdated 更新BasketViewer TotalPurchase的值；
4. @Link shopBasket的改變，新增了數(shù)組項，F(xiàn)orEach組件會執(zhí)行item Builder，渲染構建新的Item項；@State totalPurchase改變，對應的Text組件也重新渲染；重新渲染是異步發(fā)生的。