浅入@Track装饰器类对象属性级更新 原创

🎯 V2: 浅入@Track装饰器类对象属性级更新

📌 见解

1️⃣ @Track应用于class对象的属性级更新

2️⃣ @Track装饰的属性变化时,只会触发该属性关联的UI更新

⚠️ 使用场景：

嵌套类、继承类、@Trace装饰基础类型数据、对象数据、Map类型、Set类型、Date类型

🧩 拆解

class CaseModelOne {
  @Track str1: string = 'CaseModelOne_str1'
  @Track str2: string = 'CaseModelOne_str2'
}

class CaseModelTwo {
  str1: string = 'CaseModelTwo_str1'
  str2: string = 'CaseModelTwo_str2'
}

/**
 * CaseModelOne ------> 被@Track装饰的 对象的数据和状态装饰器绑定,修改对应的属性不会触发其他的组件刷新
 *
 * CaseModelTwo ------> 不被@Track装饰的 修改某一个对象属性值 会刷新整个使用CaseModelTwo下的属性值相关的组件
 *
 *
 * 类LogTrack中的属性均被@Track装饰器装饰,点击按钮"change caseModelOne.str1",此时Text1刷新,Text2不刷新,只有一条日志输出,避免了冗余刷新。
 * Text 1 is rendered
 *
 * 类logNotTrack中的属性均未被@Track装饰器装饰,点击按钮"change caseModelTwo.str1",此时Text3、Text4均会刷新,有两条日志输出,存在冗余刷新。
 * Text 3 is rendered
 * Text 4 is rendered
 */

@Entry
@ComponentV2
struct TrackCase {
  @Local caseModelOne: CaseModelOne = new CaseModelOne()
  @Local caseModelTwo: CaseModelTwo = new CaseModelTwo()

  isRender(index: number) {
    console.log(`Text ${index} is rendered`);
    return ''
  }

  build() {
    Row() {
      Column() {
        Text(this.caseModelOne.str1)
          .fontWeight(FontWeight.Bold)
          .fontSize(this.isRender(1))
        Text(this.caseModelOne.str2)
          .fontWeight(FontWeight.Bold)
          .fontSize(this.isRender(2))

        Button('change caseModelOne.str1')
          .onClick(() => {
            this.caseModelOne.str1 = 'caseModelOne'
          })

        Text(this.caseModelTwo.str1)
          .fontWeight(FontWeight.Bold)
          .fontSize(this.isRender(3))
        Text(this.caseModelTwo.str2)
          .fontWeight(FontWeight.Bold)
          .fontSize(this.isRender(4))

        Button('change caseModelTwo.str1')
          .onClick(() => {
            this.caseModelTwo.str1 = 'caseModelTwo'
          })
      }
      .width('100%')
    }
    .height('100%')
  }
}

👍 今天是2025.11.02去了广东东莞市华为欧洲小镇参加了鸿蒙极客沙龙，学到了许多有用的知识，特别赞

📝 使用@Track标记类的属性能减少组件UI的重绘，减少不必要的开销，提升页面流畅度

🌸🌼🌺