HarmonyOS 鸿蒙Next基础-ArkTs的@Watch状态监听
HarmonyOS 鸿蒙Next基础-ArkTs的@Watch状态监听
@Watch装饰器：监听并捕捉变量变化
@Watch用于监听状态变量的变化，当状态变量变化时，@Watch的回调方法将被调用。@Watch在ArkUI框架内部判断数值有无更新使用的是严格相等（===），监听并捕捉变量变化。 前端同学以Vue中的Watch监听为嵌入点更好理解。
装饰器说明
- 装饰器参数: 自定义回调引用，用引号字符串的方法名称，这里类似Vue中的Watch对象中自定义方法；
- 可装饰的自定义组件变量：可监听所有装饰器装饰的状态变量。不允许监听常规变量。
- 装饰器的顺序： 把@State、@Prop、@Link等装饰器在@Watch装饰器之前。
语法说明
[@Watch](/user/Watch)(changedPropertyName?: string) => void- changedPropertyName： 自定义函数成员，是watch的属性名；
- 在多个状态变量绑定同一个@Watch的回调方法的时候，可以通过changedPropertyName进行不同的逻辑处理
变化和行为、限制条件
| 变化和行为 | 限制条件 |
|---|---|
| 当观察到状态变量的变化的时候，对应的@Watch的回调方法将被触发； | 建议不要在@Watch的回调方法里修改当前装饰的状态变量和循环 |
| @Watch方法在自定义组件的属性变更之后同步执行 | 应关注性能，属性值更新函数会延迟组件的重新渲染，因此，回调函数应仅执行快速运算 |
| 在第一次初始化的时候，@Watch装饰的方法不会被调用，只有在后续状态改变时才会调用 | 不建议在@Watch函数中调用async await 等异步，影响性能 |
@Watch 深度探索：与@Link、 @Povide配合使用
@Watch在项目开发中使用频率非常高，只要是想对一个变量变化监听，然后紧接着要处理其他业务就需要用到它。下面以示例codeLabs到’工作目标’案例为例:
@Link 和 @Watch配合使用
- 本codelab中，使用@Link装饰器从父组件TargetList.ets中接收到（@Link是跨代组件同行，可以去HarmonyOS基础（四）- HarmonyOS ArkTs 组件状态查看详细说明）的双向同步的变量clickIndex，并使用@Watch监听当前变量。
- onClickIndexChanged是我们自定义函数。当监听当点击子目标时，就改变isExpanded的状态，这样起到展开/收起目标子组件动态变化
- 然后代组件就根据当前clickIndex和列表下标比对，如何是与当前下标相同，不做处理，如果不是就咱开。
@Provide和@Watch 配合使用
视频效果：https://live.csdn.net/v/embed/363377
- 本codelab中，使用@Provide装饰器定义变量（@Provide是跨代组件同步，可以在HarmonyOS基础（四）- HarmonyOS ArkTs 组件状态查看详细说明）overAllProgressChanged，并使用@Watch监听当前变量。
- onProgressChanged是我们自定义函数，子目标进度完成并确认后。触发当前自定义函数，并赋值给变量。
- 然后更新我们TargetInformation组件的
整体进度状态。
参考：
总结：
@Watch装饰器和@State、@Prop、@Link是ArkTS框架中最基本也是最关键状态管理修饰符，通过它们的灵活运用，能够更好地处理组件之间状态的变化和同步。实际应用中，建议开发者灵活选择使用针对不同场景，并结合codeLabs和项目，以提高应用的性能和可维护性。ArkTS的状态管理机制为开发者提供了丰富的选择，对构建复杂应用变得更加简便与高效。
ArkTs的@Watch等状态修饰符为开发这提供组件变量管理的灵活性和控制性，对初步掌握HarmonyOS开发提供了可以精确监听状态变量的能力。在实际项目组件中极大提升代码的低耦合高内聚的能力和可维护性、高效力能力。实际开发中，也能发挥ArkTS的优势，构建强大的一次开发，多段部署的物联网应用。
更多关于HarmonyOS 鸿蒙Next基础-ArkTs的@Watch状态监听的实战系列教程也可以访问 https://www.itying.com/category-93-b0.html
在HarmonyOS中，ArkTS的@Watch装饰器用于监听状态变量的变化。当被@Watch装饰的状态变量发生变化时，系统会自动调用指定的回调函数。@Watch装饰器通常与@State、@Prop、@Link等状态管理装饰器一起使用，以便在状态变化时执行特定的逻辑。
@Watch装饰器的语法如下：
@Watch(callback: (newValue: T, oldValue: T) => void)其中，callback是一个回调函数，接收两个参数：newValue表示状态变量的新值，oldValue表示状态变量的旧值。当状态变量发生变化时，系统会调用这个回调函数，并将新值和旧值作为参数传递给它。
例如：
@State @Watch(onCountChange) count: number = 0;
onCountChange(newValue: number, oldValue: number): void {
console.log(`Count changed from ${oldValue} to ${newValue}`);
}在这个例子中，count是一个状态变量，onCountChange是@Watch装饰器指定的回调函数。当count的值发生变化时，onCountChange函数会被调用，并输出变化前后的值。
@Watch装饰器可以用于监听多个状态变量，每个状态变量可以有自己的回调函数。通过@Watch装饰器，开发者可以方便地在状态变化时执行相应的操作，而不需要手动编写状态监听逻辑。
更多关于HarmonyOS 鸿蒙Next基础-ArkTs的@Watch状态监听的实战系列教程也可以访问 https://www.itying.com/category-93-b0.html
在HarmonyOS的ArkTS中，@Watch装饰器用于监听状态变量的变化。当被监听的状态变量发生变化时，@Watch装饰的方法会被自动调用。这允许开发者在状态变化时执行特定的逻辑，如更新UI或触发其他操作。使用@Watch时，需确保监听的方法是无副作用的，以避免不必要的性能开销。例如：
@State private count: number = 0;
@Watch('count')
private onCountChange(newValue: number, oldValue: number) {
console.log(`Count changed from ${oldValue} to ${newValue}`);
}在此例中，onCountChange方法会在count状态变量变化时被调用。
