本文同步发表于我的微信公众号，微信搜索 程语新视界 即可关注，每个工作日都有文章更新

一、背景

   开发中，对象的状态管理装饰器从 V1 版本到 V2 版本，主要是为了提升对嵌套对象属性变化的观察能力，简化开发流程，并增强 UI 更新的精确性。

二、装饰器对应关系

三、V1 与 V2 的主要区别

1. 观察能力不同

• V1：只能观察对象的第一层属性变化，嵌套对象需借助 @ObjectLink 和自定义组件实现观察

• V2：通过 @ObservedV2 和 @Trace 可直接观察嵌套对象的属性变化，无需额外组件

2. 精确更新机制

• V1：使用 @Track 控制属性级别的更新

• V2：@Trace 替代 @Track，具备更高效的属性级观察与更新能力

3. 代码结构简化

• V2 减少了自定义组件的使用，代码更简洁，逻辑更清晰

四、迁移规则

1. 嵌套对象属性观察

• V1：必须使用自定义组件 + @ObjectLink 观察嵌套属性

• V2：直接使用 @ObservedV2 和 @Trace 对嵌套属性进行深度观察

2. 类属性精确更新

• V1：使用 @Observed + @Track 实现属性级观察

• V2：使用 @ObservedV2 + @Trace 实现更高效的属性级更新

五、迁移示例

一：嵌套对象属性观察

V1 实现

// V1：使用 @Observed 和 @ObjectLink
@Observed
class Location {
  cityName: string;

  constructor(cityName: string) {
    this.cityName = cityName;
  }
}

@Observed
class Person {
  userName: string;
  location: Location;

  constructor(userName: string, location: Location) {
    this.userName = userName;
    this.location = location;
  }
}

@Component
struct LocationView {
  @ObjectLink location: Location;

  build() {
    Column() {
      Text(`City: ${this.location.cityName}`)
      Button("Update City")
        .onClick(() => {
          this.location.cityName += " City";
        })
    }
  }
}

@Entry
@Component
struct PersonProfile {
  @State person: Person = new Person("Tom", new Location("Beijing"));

  build() {
    Column() {
      Text(`Name: ${this.person.userName}`)
      LocationView({ location: this.person.location })
    }
  }
}

V2 迁移实现

// V2：使用 @ObservedV2 和 @Trace
@ObservedV2
class Location {
  @Trace cityName: string;

  constructor(cityName: string) {
    this.cityName = cityName;
  }
}

@ObservedV2
class Person {
  @Trace userName: string;
  @Trace location: Location;

  constructor(userName: string, location: Location) {
    this.userName = userName;
    this.location = location;
  }
}

@Entry
@ComponentV2
struct PersonProfile {
  @Local person: Person = new Person("Tom", new Location("Beijing"));

  build() {
    Column() {
      Text(`Name: ${this.person.userName}`)
      Text(`City: ${this.person.location.cityName}`)
      Button("Update City")
        .onClick(() => {
          this.person.location.cityName += " City";
        })
    }
  }
}

二：类属性变化观测

V1 实现

// V1：使用 @Observed 和 @Track
@Observed
class Student {
  @Track stuName: string;
  @Track score: number;

  constructor(stuName: string, score: number) {
    this.stuName = stuName;
    this.score = score;
  }
}

@Entry
@Component
struct ScoreCard {
  @State student: Student = new Student("Lucy", 90);

  build() {
    Column() {
      Text(`Student: ${this.student.stuName}`)
      Text(`Score: ${this.student.score}`)
      Button("Add Score")
        .onClick(() => {
          this.student.score += 1;
        })
    }
  }
}

V2 迁移实现

// V2：使用 @ObservedV2 和 @Trace
@ObservedV2
class Student {
  @Trace stuName: string;
  @Trace score: number;

  constructor(stuName: string, score: number) {
    this.stuName = stuName;
    this.score = score;
  }
}

@Entry
@ComponentV2
struct ScoreCard {
  @Local student: Student = new Student("Lucy", 90);

  build() {
    Column() {
      Text(`Student: ${this.student.stuName}`)
      Text(`Score: ${this.student.score}`)
      Button("Add Score")
        .onClick(() => {
          this.student.score += 1;
        })
    }
  }
}

六、总结

• V1 到 V2 的迁移核心：从“组件依赖 + 分层观察”转向“直接深度观察 + 属性级精确更新”

• 主要优势：

  • 减少自定义组件数量，简化代码结构

  • 提升嵌套对象属性变化的响应能力

  • 使用 @Trace 统一属性观察与更新机制，提升性能与可维护性