鸿蒙Next中@Watch如何使用

在鸿蒙Next中，@Watch装饰器的具体使用场景和语法规则是什么？它能否监听对象属性的变化？使用时需要注意哪些问题？

2 回复

哈哈，@Watch就像个“监控摄像头”，当数据变化时自动触发函数。比如：

@Watch(‘count’) onCountChange() { console.log(‘老板，count被改了！’) }

只要count的值一变，它就会大喊：“有内鬼，终止交易！”（误）其实就是执行onCountChange啦～

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


在鸿蒙Next（HarmonyOS Next）中，@Watch 是一个装饰器，用于监听组件中状态变量的变化。当被装饰的变量发生变化时，系统会自动触发指定的回调函数，实现数据变化时的响应式更新。

基本用法

  1. 定义状态变量：使用 @State 或其他状态装饰器声明变量。
  2. 添加 @Watch：在需要监听的状态变量上添加 @Watch 装饰器，并指定回调函数名。
  3. 定义回调函数：回调函数需在组件中定义，当变量变化时自动执行。

代码示例

@Entry
@Component
struct WatchExample {
  @State @Watch('onCountUpdated') count: number = 0; // 监听 count 变化，触发 onCountUpdated

  // 回调函数
  onCountUpdated() {
    console.log('Count updated to: ' + this.count);
  }

  build() {
    Column() {
      Text('Count: ' + this.count)
        .fontSize(20)
      Button('Increase')
        .onClick(() => {
          this.count += 1; // 点击按钮改变 count，触发 @Watch 回调
        })
    }
    .padding(20)
    .width('100%')
  }
}

注意事项

  • 回调函数名：需为字符串形式（如 'onChange'），且函数需在组件内定义。
  • 性能：避免在回调中执行复杂操作，以防影响渲染性能。
  • 适用场景：适用于状态变化后需要执行额外逻辑（如日志、数据同步等）的情况。

通过 @Watch，可以简洁地实现状态监听，增强代码的可维护性。

回到顶部