HarmonyOS 鸿蒙Next ArkTS语言教程入门学习第24天，@Watch装饰器：状态变量更改通知。
HarmonyOS 鸿蒙Next ArkTS语言教程入门学习第24天，@Watch装饰器：状态变量更改通知。 1、其他状态管理概述
除了前面章节提到的组件状态管理和应用状态管理，ArkTS还提供了@Watch和$$来为开发者提供更多功能：
$$运算符：给内置组件提供TS变量的引用，使得TS变量和内置组件的内部状态保持同步。
2、@Watch装饰器：状态变量更改通知
@Watch应用于对状态变量的监听。如果开发者需要关注某个状态变量的值是否改变，可以使用@Watch为状态变量设置回调函数。
说明
从API version 9开始，该装饰器支持在ArkTS卡片中使用。
3、概述
@Watch用于监听状态变量的变化，当状态变量变化时，@Watch的回调方法将被调用。@Watch在ArkUI框架内部判断数值有无更新使用的是严格相等（===），遵循严格相等规范。当在严格相等为false的情况下，就会触发@Watch的回调。
4、装饰器说明
| @Watch补充变量装饰器 | 说明 |
|---|---|
| 装饰器参数 | 必填。常量字符串，字符串需要有引号。是(string) => void自定义成员函数的方法的引用。 |
| 可装饰的自定义组件变量 | 可监听所有装饰器装饰的状态变量。不允许监听常规变量。 |
| 装饰器的顺序 | 建议@State、@Prop、@Link等装饰器在@Watch装饰器之前。 |
5、语法说明
| 类型 | 说明 |
|---|---|
| (changedPropertyName? : string) => void | 该函数是自定义组件的成员函数，changedPropertyName是被watch的属性名。在多个状态变量绑定同一个@Watch的回调方法的时候，可以通过changedPropertyName进行不同的逻辑处理 将属性名作为字符串输入参数，不返回任何内容。 |
6、观察变化和行为表现
1、当观察到状态变量的变化（包括双向绑定的AppStorage和LocalStorage中对应的key发生的变化）的时候，对应的@Watch的回调方法将被触发； 2、@Watch方法在自定义组件的属性变更之后同步执行；
7、限制条件
建议开发者避免无限循环。循环可能是因为在@Watch的回调方法里直接或者间接地修改了同一个状态变量引起的。为了避免循环的产生，建议不要在@Watch的回调方法里修改当前装饰的状态变量；
开发者应关注性能，属性值更新函数会延迟组件的重新渲染（具体请见上面的行为表现），因此，回调函数应仅执行快速运算；
不建议在@Watch函数中调用async await，因为@Watch设计的用途是为了快速的计算，异步行为可能会导致重新渲染速度的性能问题。
8、使用场景
@Watch和自定义组件更新
以下示例展示组件更新和@Watch的处理步骤。count在CountModifier中由@State装饰，在TotalView中由@Prop装饰。
1、如果在@Watch的方法里改变了其他的状态变量，也会引起状态变更和@Watch的执行； 2、在第一次初始化的时候，@Watch装饰的方法不会被调用，即认为初始化不是状态变量的改变。只有在后续状态改变时，才会调用@Watch回调方法。
更多关于HarmonyOS 鸿蒙Next ArkTS语言教程入门学习第24天，@Watch装饰器：状态变量更改通知。的实战系列教程也可以访问 https://www.itying.com/category-93-b0.html
在HarmonyOS鸿蒙Next中，@Watch装饰器用于监听状态变量的变化，并在变量发生变化时触发指定的回调函数。@Watch装饰器可以应用于自定义组件中的状态变量，以便在变量值发生变化时执行特定的逻辑。
基本用法
示例代码
@Entry
@Component
struct MyComponent {
[@State](/user/State) [@Watch](/user/Watch)('onCountChange') count: number = 0;
onCountChange(newValue: number, oldValue: number): void {
console.log(`Count changed from ${oldValue} to ${newValue}`);
}
build() {
Column() {
Text(`Count: ${this.count}`)
Button('Increment')
.onClick(() => {
this.count += 1;
})
}
}
}解释
- @State：标记
count为状态变量，当count发生变化时，UI会自动更新。 - @Watch(‘onCountChange’)：监听
count的变化，并在变化时调用onCountChange方法。 - onCountChange：回调函数，接收新值和旧值作为参数，并执行相应的逻辑。
注意事项
- @Watch装饰器只能用于监听状态变量的变化，不能用于普通变量。
- 回调函数会在状态变量变化后立即执行，因此应避免在回调函数中执行耗时操作，以免影响UI的响应速度。
通过使用@Watch装饰器，开发者可以更方便地监听状态变量的变化，并在变化时执行相应的逻辑，从而提升应用的交互性和响应性。
更多关于HarmonyOS 鸿蒙Next ArkTS语言教程入门学习第24天，@Watch装饰器：状态变量更改通知。的实战系列教程也可以访问 https://www.itying.com/category-93-b0.html
