鸿蒙Next中v2装饰器@monitor如何监听数据的变化

在鸿蒙Next中使用@monitor装饰器时，如何正确监听数据的变化？我尝试了以下代码但无法触发回调：

[@monitor](/user/monitor)('dataChange')
private data: string = 'init';

请问具体应该如何配置才能实现数据变化的监听？是否需要配合其他装饰器或生命周期方法使用？官方文档中的示例不够详细，求具体实现方案。

2 回复

在鸿蒙Next中，用@monitor装饰器监听数据变化，就像给数据装了个“小耳朵”。当被装饰的属性值改变时，系统会自动触发回调函数，让你及时知道数据变了。简单说就是：数据一抖，你就知道！

更多关于鸿蒙Next中v2装饰器@monitor如何监听数据的变化的实战系列教程也可以访问 https://www.itying.com/category-93-b0.html


在鸿蒙Next中，@monitor装饰器用于监听数据变化，当被装饰的变量值发生改变时，会自动触发绑定的UI更新或其他逻辑。

使用方法：

  1. 基本用法：在@State或@LocalStorageLink等响应式变量上使用@monitor，当数据变化时，UI会自动刷新。
  2. 自定义监听逻辑：通过onChange回调执行额外操作。

示例代码：

import { monitor, State } from '@kit.arkui';

@Entry
@Component
struct MyComponent {
  @State @monitor({
    onChange: (newValue: number, oldValue: number) => {
      console.log(`数据从 ${oldValue} 变为 ${newValue}`);
    }
  }) count: number = 0;

  build() {
    Column() {
      Text(`计数: ${this.count}`)
        .fontSize(30)
      Button('增加')
        .onClick(() => {
          this.count++;
        })
    }
    .padding(20)
  }
}

说明：

  • @monitor需与响应式装饰器（如@State）结合使用。
  • onChange回调参数：newValue（新值）、oldValue（旧值）。
  • 适用于数值、字符串等基本类型及对象引用变化监听。

注意事项：

  • 对象内部属性变化需结合@Track或使用深度监听方案。
  • 避免在onChange中执行耗时操作，以免影响性能。

通过以上方式，可高效实现数据变化的监听与响应。

回到顶部