HarmonyOS Next V2 @Monitor 和@Computed

@Monitor 介紹

@Monitor 是狀態把管理 V2 版本中的用于監聽狀態變量修改的技術。

它可以直接用在

@ComponentV2裝飾的自定義組件中，用于被@Local、@Param、@Provider、@Comsumer、@Computed修飾的狀態變量中
對于深層次的數據，如深層次對象、對象數組等，需要搭配@ObservedV2、@Trace一起使用。
可以同時監聽多個屬性
可以獲取到監聽屬性的修改前后的數據變化

對比狀態管理 V1 中的@Watch

@Monitor 比 @Watch功能要強大不少

@Watch 不能用在@ComponentV2修飾的
@Watch 不具備深度監聽的功能
@Watch 無法同時監聽多個屬性
@Watch 無法檢測屬性修改前后的變化

@Monitor 監聽單個屬性

@Entry
@ComponentV2
struct Index {
  @Local num: number = 100

  @Monitor("num")
  changeNum() {
    console.log("檢測到數據的修改啦")
  }

  build() {
    Column() {

      Button(`點擊修改 ${this.num}`)
        .onClick(() = > {
          this.num++
        })
    }
    .width("100%")
    .height("100%")
  }
}

@Monitor 同時監聽多個屬性

@Entry
@ComponentV2
struct Index {
  @Local num: number = 100
  @Local age: number = 200

  // 同時監聽多個狀態的修改
  @Monitor("num","age")
  changeNum() {
    console.log("檢測到數據的修改啦")
  }

  build() {
    Column() {
      Button(`點擊修改 num ${this.num}`)
        .onClick(() = > {
          this.num++
        })
      Button(`點擊修改 age ${this.age}`)
        .onClick(() = > {
          this.age++
        })
    }
    .width("100%")
    .height("100%")
  }
}

@Monitor 的回調函數

@Monitor 的回調函數可以給我們提供這樣的能力：

如果監聽了多個狀態，而只有一個狀態發生變化時，可以給獲知到具體哪個狀態發生了變化
當狀態發生變化時，可以獲取到變化前后的兩個值

@Monitor 的回調函數的參數是 [IMonitor]，它是一個對象，擁有兩個屬性

dirty ，是一個字符串數組，里面存放了修改的狀態的名稱
value，是一個函數，調用返回會返回一個新的對象，新對象中包含了 path:修改的狀態的名稱，before：修改前的數據，now：修改后的數據，另外 value() 調用時，如果不傳遞參數并且你是同時修改多個狀態的話，那么它只會返回第一個狀態，如果傳遞了參數-狀態變量那么就會返回該狀態變量的相關信息

@Entry
@ComponentV2
struct Index {
  @Local num: number = 100
  @Local age: number = 200

  // 同時監聽多個狀態的修改
  @Monitor("num","age")
  changeNum(Monitor: IMonitor) {
    console.log("修改的狀態", Monitor.dirty)
    console.log("Monitor.value()", JSON.stringify(Monitor.value("age")))

  }

  build() {
    Column() {
      Button(`同時修改 num 和 age ${this.num}  ${this.age}`)
        .onClick(() = > {
          this.num++
          this.age++
        })

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

@Monitor 深度監聽

@Monitor 需要和 @ObservedV2、@Trace一起使用才能實現深度監聽的效果，需要注意的是:

@Monitor可以直接寫在 @ObserveV2 修飾的class中
@Monitor 也可以寫在正常的組件內

@ObservedV2
class Person {
  @Trace son: Son = new Son()
}

@ObservedV2
class Son {
  // @Monitor可以直接寫在 @ObserveV2 修飾的class中
  @Monitor("weight")
  weightChange() {
    console.log("1 兒子的體重修改了")
  }

  @Trace weight: number = 200
}


@Entry
@ComponentV2
struct Index {
  person: Person = new Person()
    // @Monitor 也可以寫在正常的組件內
  @Monitor("person.son.weight")
  weightChange() {
    console.log("2 兒子的體重唄修改了")
  }

  build() {
    Column() {
      Button(`修改兒子的體重${this.person.son.weight}`)
        .onClick(() = > {
          this.person.son.weight++
        })
    }
    .width("100%")
    .height("100%")
  }
}

@Monitor 的限制

在實際開發使用中，@Monitor也存在一些限制，無法監聽內置類型（Array、Map、Date、Set）的 API 調用引起的變化，如當你檢測整個數組時，你對數組使用 push、splice等常見方法修改數組，是無法檢測到的。當然，當整個數組被重新賦值時，可以檢測到它的變化

@ObservedV2
class Person {
  @Trace name: string = "小明"
}


@Entry
@ComponentV2
struct Index {
  @Local
  personList: Person[] = [new Person()]

  @Monitor("personList")
  weightChange() {
    console.log(" 檢測到數組修改了")
  }

  build() {
    Column() {
      Button("增加一個")
        .onClick(() = > {
          // 1 無效 - 無法檢測到數組發生了修改
          this.personList.push(new Person())


          // 2 有效 檢測到了數組發生修改
          // const newPerson = [...this.personList, new Person()]
          // this.personList = newPerson
        })
      ForEach(this.personList, (item: Person) = > {
        Text(item.name)
      })
    }
    .width("100%")
    .height("100%")
  }
}

另外可以通過.語法或者監聽數組長度來變向實現檢測數組元素發生變化

.語法

@ObservedV2
class Person {
  @Trace name: string = "小明"
}


@Entry
@ComponentV2
struct Index {
  @Local
  personList: Person[] = [new Person()]

  @Monitor("personList.0")
  // 如果要單獨監聽對象中的某個屬性  @Monitor("personList.0.name")
  weightChange() {
    console.log(" 檢測到數組修改了")
  }

  build() {
    Column() {
      Button("增加一個")
        .onClick(() = > {
          const p = new Person()
          p.name = "小黑"
          this.personList[0] = p
        })
      ForEach(this.personList, (item: Person) = > {
        Text(item.name)
      })
    }
    .width("100%")
    .height("100%")
  }
}

監聽數組長度變化

@ObservedV2
class Person {
  @Trace name: string = "小明"
}


@Entry
@ComponentV2
struct Index {
  @Local
  personList: Person[] = [new Person()]

  @Monitor("personList.length")
  weightChange() {
    console.log(" 檢測到數組修改了")
  }

  build() {
    Column() {
      Button("增加一個")
        .onClick(() = > {
          const p = new Person()
          p.name = "小黑"
          this.personList.push(p)
        })
      ForEach(this.personList, (item: Person) = > {
        Text(item.name)
      })
    }
    .width("100%")
    .height("100%")
  }
}

@Computed

@Computed為計算屬性，可以監聽數據變化，從而計算新的值。用法比較簡單

@Entry
@ComponentV2
struct Index {
  @Local num: number = 100

  @Computed
  get numText() {
    return this.num * 2
  }

  build() {
    Column() {
      Button("修改")
        .onClick(() = > {
          this.num++
        })
      Text(`原數據 ${this.num}`)
      Text(`計算后 ${this.numText}`)
    }
    .width("100%")
    .height("100%")
  }
}