文章目录一、引言二、Watch 装饰器概述三、核心特性四、基本语法五、使用示例5.1 运行效果分析六、注意事项七、总结这是一个使用鸿蒙技术开发的本地原生记账应用非常适合大家用来练手。相关源码已上传至 Github点击此处查看项目。欢迎大家交流、指正也欢迎提交 PR。一、引言在鸿蒙应用开发中状态管理是构建动态界面的核心。Watch装饰器提供了一种优雅的方式来监听状态变量的变化并在变化发生时自动执行自定义逻辑。本文将深入介绍Watch的核心特性、基本语法、使用示例以及最佳实践帮助你更好地在鸿蒙应用开发中运用这一强大工具。二、Watch 装饰器概述Watch是鸿蒙应用开发中用于监听状态变量变化的装饰器。当被装饰的状态变量发生改变时它会自动触发开发者指定的回调函数适用于日志记录、数据同步、动画触发等场景。三、核心特性监听机制基于严格相等判断值是否变化只有严格不相等时才触发回调。初始化不触发组件首次初始化时不会调用Watch回调仅在后续状态改变时触发。同步执行回调在属性变更后同步执行。适用范围可监听State、Prop、Link、ObjectLink、Provide、Consume、StorageProp、StorageLink等装饰器修饰的变量。四、基本语法StateWatch(callbackName)count:number0;参数为字符串形式的回调函数名需加引号。回调函数可接收一个可选参数propertyName表示被监听的属性名。五、使用示例下面是一个完整的示例展示了如何使用Watch监听计数器和输入框的变化并记录变化日志。EntryComponentstruct WatchExample{StateWatch(onCountChange)count:number0;StateWatch(onInputChange)inputText:string;Statelogs:string[][];onCountChange(propertyName:string){constlog${propertyName}变为${this.count};console.info(log);this.logs[...this.logs.slice(-4),log];// 保留最近5条}onInputChange(propertyName:string){constlog${propertyName}变为 ${this.inputText};console.info(log);this.logs[...this.logs.slice(-4),log];}build(){Column({space:16}){Row({space:12}){Button(-).onClick(()this.count--)Text(${this.count}).fontSize(24).width(60).textAlign(TextAlign.Center)Button().onClick(()this.count)}TextInput({text:this.inputText,placeholder:输入内容}).onChange((value:string)this.inputTextvalue)Divider()Text(变化日志).fontSize(20).fontWeight(FontWeight.Bold)Column({space:4}){ForEach(this.logs,(log:string,index:number){Text(log).fontSize(20).fontColor(#666)})}.alignItems(HorizontalAlign.Start)}.width(100%).padding(16)}}运行效果5.1 运行效果分析计数器交互点击或-按钮时count值发生变化onCountChange回调被触发日志区会追加一条形如count 变为 1的记录。由于日志数组只保留最近 5 条超出部分自动丢弃避免日志区无限增长。输入框实时监听在输入框中键入任意文本时inputText变量随onChange事件同步更新onInputChange回调被触发日志区显示inputText 变为 用户输入的内容。每次输入都会触发一次回调体现了Watch的同步执行特性。日志滚动效果日志区使用ForEach循环渲染当新日志加入时数组引用发生变化[...this.logs.slice(-4), log]驱动 UI 自动刷新。由于日志从旧到新排列最新日志始终显示在列表底部模拟了类似控制台日志的滚动效果。性能表现在正常交互频率下Watch回调执行时间极短微秒级不会对 UI 渲染造成明显延迟。但在高频点击或快速输入场景下建议对回调逻辑做轻量化处理避免执行耗时操作。六、注意事项避免无限循环不要在Watch回调中直接修改被监听的变量否则会再次触发回调形成死循环。对象属性监听Watch仅监听引用变化无法直接监听Observed对象内部属性的变化。如需监听深层属性可在子组件中使用ObjectLink配合Watch。高频场景防抖在滑块、输入框等高频率变更场景建议配合防抖debounce使用避免频繁回调影响性能。七、总结Watch是鸿蒙应用开发中一个非常实用的装饰器它让状态变化的监听变得简单而高效。通过合理运用Watch你可以轻松实现日志记录、数据同步、动画触发等复杂逻辑提升应用的用户体验。希望本文能帮助你更好地理解和应用Watch装饰器。