同步操作将从 OpenHarmony/docs 强制同步,此操作会覆盖自 Fork 仓库以来所做的任何修改,且无法恢复!!!
确定后同步将在后台操作,完成时将刷新页面,请耐心等待。
@Watch is used to listen for state variables. If your application needs watch for value changes of a state variable, you can decorate the variable with @Watch.
NOTE
Since API version 9, this decorator is supported in ArkTS widgets.
An application can request to be notified whenever the value of the @Watch decorated variable changes. The @Watch callback is called when the value change has occurred. @Watch uses strict equality (===) to determine whether a value is updated in the ArkUI framework. If false is returned, the @Watch callback is triggered.
@Watch Decorator | Description |
---|---|
Decorator parameters | Mandatory. Constant string, which is quoted. Reference to a (string) => void custom component member function. |
Custom component variables that can be decorated | All decorated state variables. Regular variables cannot be watched. |
Order of decorators | It is recommended that the @State, @Prop, @Link, or other decorators precede the @Watch decorator. |
Type | Description |
---|---|
(changedPropertyName? : string) => void | This function is a member function of the custom component. changedPropertyName indicates the name of the watched attribute. It is useful when you use the same function as a callback to several watched attributes. It takes the attribute name as a string input parameter and returns nothing. |
When a state variable change (including the change of the named attribute in AppStorage or LocalStorage) is observed, the corresponding @Watch callback is triggered.
@The Watch callback is executed synchronously after the variable change in the custom component.
If the @Watch callback mutates other watched variables, their variable @Watch callbacks in the same and other custom components as well as state updates are triggered.
A @Watch function is not called upon custom component variable initialization, because initialization is not considered as variable mutation. A @Watch function is called upon updating of the custom component variable.
Pay attention to the risk of infinite loops. Loops can be caused by the @Watch callback directly or indirectly mutating the same variable. To avoid loops, avoid mutating the @Watch decorated state variable inside the callback handler.
Pay attention to performance. The attribute value update function delays component re-render (see the preceding behavior description). The callback should only perform quick computations.
Calling async await from an @Watch function is not recommended, because asynchronous behavior may cause performance issues of re-rendering.
This example illustrates how to watch an @Link decorated variable in a child component.
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);
// A discount is provided when the amount exceeds 100 euros.
if (total >= 100) {
total = 0.9 * total;
}
return total;
}
// @Watch callback
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 })
}
}
}
The processing procedure is as follows:
Button.onClick of the BasketModifier component adds an item to BasketModifier shopBasket.
The value of the @Link decorated variable BasketViewer shopBasket changes.
The state management framework calls the @Watch callback BasketViewer onBasketUpdated to update the value of BaketViewer TotalPurchase.
Because @Link decorated shopBasket changes (a new item is added), the ForEach component executes the item Builder to render and build the new item. Because the @State decorated totalPurchase variables changes, the Text component is also re-rendered. Re-rendering happens asynchronously.
This example is used to clarify the processing steps of custom component updates and @Watch. Note that count is @State decorated in both components.
@Component
struct TotalView {
@Prop @Watch('onCountUpdated') count: number;
@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 })
}
}
}
Processing steps:
The click event Button.onClick of the CountModifier custom component increases the value of count.
In response to the change of the @State decorated variable count, @Prop in the child component TotalView is updated, and its @Watch('onCountUpdated') callback is triggered, which updates the total variable in TotalView.
The Text component in the child component TotalView is re-rendered.
此处可能存在不合适展示的内容,页面不予展示。您可通过相关编辑功能自查并修改。
如您确认内容无涉及 不当用语 / 纯广告导流 / 暴力 / 低俗色情 / 侵权 / 盗版 / 虚假 / 无价值内容或违法国家有关法律法规的内容,可点击提交进行申诉,我们将尽快为您处理。