🎯V2: 浅入@Monitor装饰器:状态变量修改监听

⭐⭐⭐⭐

📌 见解

1️⃣ @Monitor监听的变量需要被@Local、@Param、@Provider、@Consumer、@Computed装饰，没有这些装饰器装饰将无法被监听

2️⃣ 可同时监听多个变量，中间用“，”逗号隔开即可

3️⃣ 可以@ObservedV2装饰的类中使用，但是监听的属性明需要使用@Trace装饰，不然无法被监听

⚠️ 使用场景

监听深层的数据结构属性变化

🧩 拆解

/**
 * @Monitor监听的变量需要被@Local、@Param、@Provider、@Consumer、@Computed装饰
 *
 * @Monitor监听的状态变量为类对象时,仅能监听对象整体的变化。监听类属性的变化需要类属性被@Trace装饰
 *
 * @Monitor能够监听数组长度变化=========>@Monitor("Array.length")
 *
 * @Monitor能够监听对象属性变化=========>@Monitor("类明.属性名")
 */
import { promptAction } from '@kit.ArkUI'

@ObservedV2
class CaseModelOne {
  @Trace name: string = 'CaseModelOne_原始'

  @Monitor("name")
  nameChange() {
    promptAction.showToast({ message: `在类中name监听到变化类 变化值 ====>: ${this.name}` })
  }
}

@Entry
@ComponentV2
struct MonitorCase {
  @Local name: string = "史迪黄"
  @Local age: number = 24
  @Local caseModelOneName: CaseModelOne = new CaseModelOne()

  @Monitor("name", "age", "caseModelOneName.name")
  onStrChange(monitor: IMonitor) {
    monitor.dirty.forEach((path: string) => {
      console.log(`${path} changed from ${monitor.value(path)?.before} to ${monitor.value(path)?.now}`)
    })
  }

  build() {
    Column() {
      Text(this.caseModelOneName.name)

      Button("change caseModelOneName")
        .onClick(() => this.caseModelOneName.name = "CaseModelOne_更新")


      Button("change this.name")
        .onClick(() => this.name = "史迪蓝")

      Button("change this.age")
        .onClick(() => this.age = 23)
    }
  }
}

📝 @Monitor监听深层的数据结构对应属性，可以知道新值和旧值最后在区分对于逻辑

🌸🌼🌺