HarmonyOS鸿蒙Next中使用@Trackable实现自定义对象的响应式更新

实现思路

我们核心是通过@Trackable来实现， @Trackable是 HarmonyOS 6 引入的一种新型响应式装饰器，它主要是通过 Proxy 拦截对象的读写操作，以此来自动的创建相关依赖关系。与 @Observed 不同的点是，它不要求数据必须是 class 实例。

用 `[@Trackable](/user/Trackable)` 声明一个可追踪的对象

[@Trackable](/user/Trackable)
private profile = {
  name: 'Alice',
  level: 5,
  isActive: true
};

在 UI 中直接绑定属性

Text(`用户: ${this.profile.name}`)
Text(`等级: ${this.profile.level}`)

监听变化执行副作用

aboutToAppear() {
  // 监听整个 trackable 对象变化
  this.profile.$watch(() => {
    console.info('Profile updated:', this.profile);
  });
}

完整示例代码

@Entry
@Component
struct TrackableDemo {
  [@Trackable](/user/Trackable)
  private profile = {
    name: 'Alice',
    level: 5,
    isActive: true
  };

  aboutToAppear() {
    this.profile.$watch(() => {
      console.info('[Trackable] Profile changed:', JSON.stringify(this.profile));
    });
  }

  build() {
    Column({ space: 20 }) {
      Text('HarmonyOS 6 [@Trackable](/user/Trackable) 响应式对象示例')
        .fontSize(18)
        .fontWeight(FontWeight.Bold)

      // 直接绑定属性，自动响应
      Text(`用户: ${this.profile.name}`)
        .fontSize(16)
      Text(`等级: ${this.profile.level}`)
        .fontSize(16)
      Text(`状态: ${this.profile.isActive ? '活跃' : '离线'}`)
        .fontSize(16)
        .fontColor(this.profile.isActive ? Color.Green : Color.Gray)

      Row({ space: 10 }) {
        Button('改名 → Bob')
          .onClick(() => {
            this.profile.name = 'Bob'; 
          })
        Button('+1级')
          .onClick(() => {
            this.profile.level += 1;
          })
        Button('切换状态')
          .onClick(() => {
            this.profile.isActive = !this.profile.isActive;
          })
      }
    }
    .padding(30)
    .width('100%')
    .height('100%')
  }
}

更多关于HarmonyOS鸿蒙Next中使用@Trackable实现自定义对象的响应式更新的实战系列教程也可以访问 https://www.itying.com/category-93-b0.html

caililin 2楼

在HarmonyOS Next中，@Trackable装饰器用于标记自定义类，使其属性变更可被UI观察并触发更新。被@Trackable装饰的类，其属性在赋值时会通知绑定的UI组件进行刷新。

h691938207 3楼

在HarmonyOS Next中，@Trackable装饰器是实现自定义对象响应式更新的核心机制。它通过标记类属性，使ArkUI框架能够自动追踪其变化并触发UI更新。

关键特性：

装饰对象属性：直接应用于类的属性声明，使该属性成为响应式数据源。
自动依赖收集：UI组件中使用@Trackable装饰的属性时，框架自动建立依赖关系。
精准更新：属性值变更时，仅触发依赖该属性的UI组件重新渲染。

基本用法示例：

import { Trackable } from '@kit.ArkUI';

class UserModel {
  @Trackable name: string = '张三';
  @Trackable age: number = 25;
}

// 在UI组件中使用
@Entry
@Component
struct UserProfile {
  private user: UserModel = new UserModel();

  build() {
    Column() {
      Text(this.user.name) // 自动响应name变化
        .fontSize(20)
      Text(`年龄：${this.user.age}`) // 自动响应age变化
        .fontSize(16)
      Button('更新信息')
        .onClick(() => {
          this.user.name = '李四'; // UI自动更新
          this.user.age += 1;
        })
    }
  }
}

注意事项：

仅支持装饰类属性，不能用于局部变量
需要配合class使用，不支持普通对象
嵌套对象需要逐层使用@Trackable装饰
数组操作建议使用框架提供的响应式数组API

与@State的区别： @Trackable专注于自定义数据模型的响应式改造，而[@State](/user/State)主要用于组件内部状态管理。两者可结合使用，@Trackable更适合复杂业务逻辑的数据封装。