🎯 V2: 浅入@Local装饰器:组件内部状态

📌 见解

为了实现对@ComponentV2装饰的自定义组件中变量变化的观测,开发者可以使用@Local装饰器装饰变量

⚠️ 使用场景：

观察对象整体变化、装饰Date类型变量、Map类型变量、Set类型变量、联合类型

🧩 拆解

/** 观测对象整体变化*/
@ObservedV2
class CaseModelOne {
  @Trace str1: string = 'CaseModelOne_str1'
}

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

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

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

@Entry
@ComponentV2
struct LocalCase {
  @Local caseModelOne: CaseModelOne = new CaseModelOne()
  @Local caseModelTwo: CaseModelTwo = new CaseModelTwo()
  @Local caseModelThree: CaseModelThree = new CaseModelThree()
  @Local caseModelFour: CaseModelFour = new CaseModelFour()

  build() {
    Row() {
      Column() {
        Text(this.caseModelOne.str1)
          .fontWeight(FontWeight.Bold)
        Text(`${this.caseModelTwo.caseModelFiveMap.values()}`)
          .fontWeight(FontWeight.Bold)
        Text(`${this.caseModelThree.caseModelSixSet}`)
          .fontWeight(FontWeight.Bold)
        Text(`${this.caseModelFour.CaseModelSevenDate}`)
          .fontWeight(FontWeight.Bold)

        Button('change all value')
          .onClick(() => {
            this.caseModelOne.str1 = 'caseModelOne'
            this.caseModelTwo.caseModelFiveMap.set(0, '2222')
            this.caseModelThree.caseModelSixSet = new Set(['0', '1', '2', '3'])
            this.caseModelFour.CaseModelSevenDate = new Date('2021-22-11')
          })

      }
      .width('100%')
    }
    .height('100%')
  }
}

📝 @Local（局部）表示组件内部的状态，使得自定义组件内部的变量具有观测变化的能力

🌸🌼🌺