浅入@ObservedV2装饰器和@Trace装饰器 原创

🎯 V2: 浅入@ObservedV2装饰器和@Trace装饰器

📌 见解

@ObservedV2和@Trace提供了对嵌套类对象属性变化直接观测的能力

⚠️ 使用场景：

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

🧩 拆解

/** 嵌套类型*/
@ObservedV2
class CaseModelOne {
  str1: CaseModelThree = new CaseModelThree()
}

/** 继承类型*/
@ObservedV2
class CaseModelTwo {
  @Trace str1: string = 'CaseModelTwo_原始'
}
class CaseModelTwoSon extends CaseModelTwo{
  getStr() {
    this.str1 = 'CaseModelTwoSon_更新'
    return this.str1
  }
}

/** 基础类型*/
@ObservedV2
class CaseModelThree {
  @Trace str1: string = 'CaseModelThree_原始'
}

/** 对象数组类型*/
@ObservedV2
class CaseModelFour {
  @Trace str1?: string = 'CaseModelFour_原始'

  constructor(name?: string) {
    this.str1 = name
  }
}
@ObservedV2
class CaseModelFourArray {
  @Trace caseModelFourArray: CaseModelFour[] = [new CaseModelFour(), new CaseModelFour(), new CaseModelFour(), new CaseModelFour()]
}

/** Map类型*/
@ObservedV2
class CaseModelFive {
  @Trace caseModelFiveMap: Map<number, string> = new Map([[0, "a"], [1, "b"], [3, "c"]]);
}

/** Set类型*/
@ObservedV2
class CaseModelSix {
  @Trace caseModelSixSet: Set<string> = new Set(['0', '1', '2', '3'])
}

/** Date类型*/
@ObservedV2
class CaseModelSeven {
  @Trace CaseModelSevenDate: Date = new Date('2021-08-08')
}


@Entry
@ComponentV2
struct ObservedV2AndTrace {
  private caseModelOne: CaseModelOne = new CaseModelOne()
  private caseModelTwoSon: CaseModelTwoSon = new CaseModelTwoSon()
  private caseModelThree: CaseModelThree = new CaseModelThree()
  private caseModelFourArray: CaseModelFourArray = new CaseModelFourArray()
  private caseModelFive: CaseModelFive = new CaseModelFive()
  private caseModelSix: CaseModelSix = new CaseModelSix()
  private caseModelSeven: CaseModelSeven = new CaseModelSeven()

  build() {
    Row() {
      Column() {
        Text(this.caseModelOne.str1.str1)
          .fontWeight(FontWeight.Bold)
        Text(this.caseModelTwoSon.str1)
          .fontWeight(FontWeight.Bold)
        Text(this.caseModelThree.str1)
          .fontWeight(FontWeight.Bold)
        Text(this.caseModelFourArray.caseModelFourArray[0].str1)
          .fontWeight(FontWeight.Bold)
        Text(this.caseModelFive.caseModelFiveMap[0])
          .fontWeight(FontWeight.Bold)
        Text(`${this.caseModelSix.caseModelSixSet.values()}`)
          .fontWeight(FontWeight.Bold)
        Text(`${this.caseModelSeven.CaseModelSevenDate}`)
          .fontWeight(FontWeight.Bold)

        Button('change all value')
          .onClick(() => {
            this.caseModelOne.str1.str1 = 'caseModelOne_更新'
            this.caseModelTwoSon.getStr()
            this.caseModelThree.str1 = 'caseModelThree_更新'
            this.caseModelFourArray.caseModelFourArray[0] = new CaseModelFour('caseModelFourArray_更新')
            this.caseModelFive.caseModelFiveMap[0] = 'caseModelFiveMap_更新'
            this.caseModelSix.caseModelSixSet = new Set(['4', '5', '6', '7']);
            this.caseModelSeven.CaseModelSevenDate = new Date('2021-10-08')
          })
      }
      .width('100%')
    }
    .height('100%')
  }
}

📝 @ObservedV2装饰器和是状态管理V2中相对核心的能力之一，在日常开发中是必然要掌握的

🌸🌼🌺