1# @Watch 2 3 4@Watch is used to listen for changes of state variables. The syntax structure is as follows: 5 6 7 8``` 9@State @Watch("onChanged") count : number = 0 10``` 11 12 13As shown above, add an @Watch decorator to the target state variable to register an onChanged callback. When the state variable count is changed, the onChanged callback will be triggered. 14 15 16@Watch can be used to listen for changes of variables decorated by @State, @Prop, @Link, @ObjectLink, @Provide, @Consume, @StorageProp, or @StorageLink. 17 18 19 20``` 21@Entry 22@Component 23struct CompA { 24 @State @Watch("onBasketUpdated") shopBasket : Array<number> = [ 7, 12, 47, 3 ]; 25 @State totalPurchase : number = 0; 26 27 updateTotal() : number { 28 let sum = 0; 29 this.shopBasket.forEach((i) => { sum += i; }); 30 // Calculate the total amount of items in the shopping basket. If the amount exceeds CNY100, the specified discount will be applied. 31 this.totalPurchase = (sum < 100) ? sum : 0.9 * sum; 32 return this.totalPurchase; 33 } 34 35 // @Watch cb 36 onBasketUpdated(propName: string) : void { 37 this.updateTotal(); 38 } 39 40 build() { 41 Column() { 42 Button("add to basket").onClick(() => { this.shopBasket.push(Math.round(100 * Math.random())) }) 43 Text(`${this.totalPurchase}`) 44 .fontSize(30) 45 } 46 } 47} 48``` 49