HarmonyOS ArkTS @Watch监听器的使用
什么是@Watch监听器
在鸿蒙HarmonyOS的ArkTS开发框架中，@Watch监听器是一个强大的状态监听机制，它允许开发者监听状态变量的变化并执行相应的回调函数。@Watch装饰器为状态管理提供了更加精细和灵活的控制能力，使开发者能够在状态变化时执行复杂的业务逻辑、数据处理或副作用操作。
@Watch如何进行监听
@Watch监听器基于鸿蒙ArkTS的响应式系统构建，能够精确地检测状态变量的变化。当被监听的状态发生变化时，监听器会自动触发相应的回调函数。这种检测机制不仅支持基础数据类型的变化，还能够检测复杂对象和数组的深层变化。
@Watch装饰器的使用
注意：Watch无法单独使用，必须配合状态装饰器，比如@State、@Prop、@Link
语法：
@State@Watch(\'方法名\')info:string=\'\'
// 方法 当状态变量值发生变化会调用此方法
方法名(){ // 数据改变之后会触发}
@Watch装饰器的语法简洁明了，开发者只需要在状态变量声明时添加装饰器，并指定回调函数的名称。装饰器支持多种参数配置，可以根据不同的需求进行定制。最基本的用法是指定一个回调函数名称，当状态变化时会自动调用该函数。
@Entry@Component // 父组件struct KnowledgePage { @State // @watch1、不能单独使用需要和其他装饰器配合 2、当状态变量值发生变化会调用此方法 @Watch(\'changeCount\') count: number = 0 // 方法 当状态变量值发生变化会调用此方法 changeCount() { console.log(\'\', this.count) } build() { Column() { Text(\'父组件\') .fontSize(30) Text(this.count.toString()) Button(\'修改数据\') .onClick(() => { this.count += 2 }) } .padding(10) .height(\'100%\') .backgroundColor(\'#ccc\') .width(\'100%\') .alignItems(HorizontalAlign.Center) .padding({ top: 100 }) }}
监听复杂对象
@Watch监听器不仅可以监听基础数据类型，还能够监听复杂对象和数组的变化。对于对象类型，监听器会检测对象属性的变化；对于数组类型，监听器会检测数组元素的增删改操作。这种深度监听能力为复杂数据结构的状态管理提供了强大支持。
// 定义一个复杂对象类型interface UserProfile { name: string; age: number; address: {
city: string;street: string;zipCode: string;
}; preferences: {
theme: \'light\' | \'dark\';notifications: boolean;
};}
@Entry@Componentstruct ComplexObjectWatcher { // 定义一个复杂对象的状态变量 @State userProfile: UserProfile = {
name: \'张三\',age: 28,address: { city: \'北京\', street: \'朝阳路\', zipCode: \'100020\'},preferences: { theme: \'light\', notifications: true}
};
// 监听整个userProfile对象的变化（深度监听） @Watch(\'userProfile\', { deep: true }) onUserProfileChange(newValue: UserProfile, oldValue: UserProfile) {
console.log(\'用户资料发生变化（深度监听）:\', { newValue, oldValue });
}
// 监听address.city属性的变化 @Watch(\'userProfile.address.city\') onCityChange(newCity: string, oldCity: string) {
console.log(\'城市发生变化:\', { newCity, oldCity });
}
// 监听preferences对象的变化 @Watch(\'userProfile.preferences\') onPreferencesChange(newPrefs: UserProfile[\'preferences\'], oldPrefs: UserProfile[\'preferences\']) {
console.log(\'偏好设置发生变化:\', { newPrefs, oldPrefs });
}
build() {
Column() { Text(`用户名: ${this.userProfile.name}`) Text(`年龄: ${this.userProfile.age}`) Text(`城市: ${this.userProfile.address.city}`) Text(`主题: ${this.userProfile.preferences.theme}`) Button(\'修改城市\') .onClick(() => { this.userProfile.address.city = this.userProfile.address.city === \'北京\' ? \'上海\' : \'北京\'; }) Button(\'切换主题\') .onClick(() => { this.userProfile.preferences.theme = this.userProfile.preferences.theme === \'light\' ? \'dark\' : \'light\'; }) Button(\'修改年龄\') .onClick(() => { this.userProfile.age += 1; })}.width(\'100%\').height(\'100%\').padding(20)
}}
总结
在HarmonyOS应用开发中，ArkTS的@Watch装饰器提供了一种高效的数据监听机制，能够实时响应状态变量的变化并触发回调逻辑。通过@Watch，开发者可以轻松实现数据驱动的UI更新，提升应用的动态交互能力。
核心要点：
-
功能定位：
@Watch用于监听状态变量（@State、@Prop等）的变化，当变量值改变时自动执行绑定的回调函数，适合处理需要副作用逻辑的场景（如数据校验、联动更新等）。 -
语法简洁：通过
@Watch(\'监听的变量名\')装饰回调方法，与状态变量配合使用，代码可读性强。 -
与计算变量区别：不同于
@Builder或派生逻辑，@Watch更侧重“响应变化后的动作”，而非计算新值。
