鸿蒙Next @Watch功能如何使用

刚升级到鸿蒙Next系统，发现新增了@Watch功能，但不太清楚具体怎么用。这个功能是做什么的？在哪些场景下可以使用？需要怎么设置才能开启？有没有详细的操作步骤或者注意事项？求大佬解答！

2 回复

鸿蒙Next的@Watch？简单说就是“盯梢”变量！当被监视的数据一变，立刻触发回调函数，就像给变量装了警报器。用法：在变量前加@Watch(函数名)，数据一动，函数就自动执行。比如@Watch(onCountChange) count = 0，count变，onCountChange就干活。省得手动监听，真香！

更多关于鸿蒙Next @Watch功能如何使用的实战系列教程也可以访问 https://www.itying.com/category-93-b0.html


鸿蒙Next（即HarmonyOS NEXT）中的 @Watch 装饰器用于监听状态变量的变化，当变量值改变时自动触发指定的回调函数。它适用于 @State、@Link、@Prop、@ObjectLink 等装饰的变量。

使用方法：

  1. 定义状态变量：使用 @State 等装饰器声明需要监听的数据。
  2. 添加 @Watch：在状态变量上使用 @Watch('回调函数名')，指定变化时触发的回调。
  3. 编写回调函数：在组件中定义回调函数，接收新旧值作为参数。

示例代码：

@Entry
@Component
struct WatchExample {
  @State @Watch('onCountUpdated') count: number = 0

  // 监听回调函数
  onCountUpdated(propName: string, newValue: number, oldValue: number): void {
    console.log(`属性 ${propName} 从 ${oldValue} 变为 ${newValue}`)
  }

  build() {
    Column() {
      Text(`计数: ${this.count}`)
        .fontSize(30)
      Button('增加')
        .onClick(() => {
          this.count += 1 // 触发 @Watch 回调
        })
    }
    .width('100%')
    .padding(20)
  }
}

注意事项：

  • 回调函数参数顺序固定为：(propName: string, newValue: T, oldValue: T)。
  • 避免在回调中直接修改被监听变量，可能导致循环更新。
  • 支持同时监听多个属性，例如 @State @Watch('funcA') @Watch('funcB') value: number。

通过 @Watch 可以方便地实现数据变化时的响应逻辑，如验证、日志记录或触发其他操作。

回到顶部