概述

@Watch用於監聽狀態變數的變化，當狀態變數變化時，@Watch的回撥方法將被呼叫。@Watch在ArkUI框架內部判斷數值有無更新使用的是嚴格相等（===），遵循嚴格相等規範。當在嚴格相等為false的情況下，就會觸發@Watch的回撥。

裝飾器說明

@Watch補充變數裝飾器	說明
裝飾器引數	必填。常量字串，字串需要有引號。是(string) => void自定義成員函式的方法的引用。
可裝飾的自定義元件變數	可監聽所有裝飾器裝飾的狀態變數。不允許監聽常規變數。
裝飾器的順序	建議@State、@Prop、@Link等裝飾器在@Watch裝飾器之前。

語法說明

型別

說明

(changedPropertyName? : string) => void

該函式是自定義元件的成員函式，changedPropertyName是被watch的屬性名。

在多個狀態變數繫結同一個@Watch的回撥方法的時候，可以透過changedPropertyName進行不同的邏輯處理

將屬性名作為字串輸入引數，不返回任何內容。

觀察變化和行為表現

1. 當觀察到狀態變數的變化（包括雙向繫結的AppStorage和LocalStorage中對應的key發生的變化）的時候，對應的@Watch的回撥方法將被觸發；

2. @Watch方法在自定義元件的屬性變更之後同步執行；

3. 如果在@Watch的方法裡改變了其他的狀態變數，也會引起狀態變更和@Watch的執行；

4. 在第一次初始化的時候，@Watch裝飾的方法不會被呼叫，即認為初始化不是狀態變數的改變。只有在後續狀態改變時，才會呼叫@Watch回撥方法。

限制條件

● 建議開發者避免無限迴圈。迴圈可能是因為在@Watch的回撥方法裡直接或者間接地修改了同一個狀態變數引起的。為了避免迴圈的產生，建議不要在@Watch的回撥方法裡修改當前裝飾的狀態變數；

● 開發者應關注效能，屬性值更新函式會延遲元件的重新渲染（具體請見上面的行為表現），因此，回撥函式應僅執行快速運算；

● 不建議在@Watch函式中呼叫async await，因為@Watch設計的用途是為了快速的計算，非同步行為可能會導致重新渲染速度的效能問題。

使用場景

@Watch和自定義元件更新

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


@Component


struct TotalView {


  @Prop @Watch('onCountUpdated') count: number = 0;


  @State total: number = 0;


  // @Watch cb


  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')方法被呼叫，更新了子元件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 回撥

 
onBasketUpdated
(
propName
: 
string
)
: 
void 
{

 
this
.
totalPurchase 
= 
this
.
updateTotal
();

 
}



 
build
() 
{

 
Column
() 
{

 
ForEach
(
this
.
shopBasket
,

 
(
item
:
PurchaseItem
) 
=> 
{

 
Text
(
`Price: ${item.price.toFixed(2)} €`
)

 
},

 
(
item
:
PurchaseItem
) 
=>
 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值發生變化；

3. 狀態管理框架呼叫@Watch函式BasketViewer onBasketUpdated 更新BasketViewer TotalPurchase的值；

4. @Link shopBasket的改變，新增了陣列項，ForEach元件會執行item Builder，渲染構建新的Item項；@State totalPurchase改變，對應的Text元件也重新渲染；重新渲染是非同步發生的。

https://bbs.elecfans.com/jishu_2386778_1_1.html

概述