HarmonyOS Next V2 @Monitor 和@Computed

@Monitor 介紹

复制@Monitor 是狀態(tài)把管理 V2 版本中的用于監(jiān)聽狀態(tài)變量修改的技術(shù)。

它可以直接用在

1. 复制@ComponentV2裝飾的自定義組件中，用于被复制@Local、复制@Param、复制@Provider、复制@Comsumer、复制@Computed修飾的狀態(tài)變量中
2. 對于深層次的數(shù)據(jù)，如深層次對象、對象數(shù)組等，需要搭配复制@ObservedV2、复制@Trace一起使用。
3. 可以同時監(jiān)聽多個屬性
4. 可以獲取到監(jiān)聽屬性的修改前后的數(shù)據(jù)變化

對比狀態(tài)管理 V1 中的@Watch

复制@Monitor 比 复制@Watch功能要強(qiáng)大不少

1. 复制@Watch 不能用在复制@ComponentV2修飾的
2. 复制@Watch 不具備深度監(jiān)聽的功能
3. 复制@Watch 無法同時監(jiān)聽多個屬性
4. 复制@Watch 無法檢測 屬性修改前后的變化

@Monitor 監(jiān)聽單個屬性

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

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

  build() {
    Column() {

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

@Monitor 同時監(jiān)聽多個屬性

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

  // 同時監(jiān)聽多個狀態(tài)的修改
  @Monitor("num","age")
  changeNum() {
    console.log("檢測到數(shù)據(jù)的修改啦")
  }

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

@Monitor 的回調(diào)函數(shù)

复制@Monitor 的回調(diào)函數(shù)可以給我們提供這樣的能力：

1. 如果監(jiān)聽了多個狀態(tài)，而只有一個狀態(tài)發(fā)生變化時， 可以給獲知到具體哪個狀態(tài)發(fā)生了變化
2. 當(dāng)狀態(tài)發(fā)生變化時，可以獲取到變化前后的兩個值

@Monitor 的回調(diào)函數(shù)的參數(shù)是 [IMonitor]，它是一個對象，擁有兩個屬性

1. 复制dirty ，是一個字符串?dāng)?shù)組，里面存放了修改的狀態(tài)的名稱
2. 复制value，是一個函數(shù)，調(diào)用返回會返回一個新的對象，新對象中包含了 复制path:修改的狀態(tài)的名稱，before：修改前的數(shù)據(jù)，now：修改后的數(shù)據(jù)，另外 复制value() 調(diào)用時，如果不傳遞參數(shù)并且你是同時修改多個狀態(tài)的話，那么它只會返回第一個狀態(tài)，如果傳遞了參數(shù)-狀態(tài)變量 那么就會返回該狀態(tài)變量的相關(guān)信息

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

  // 同時監(jiān)聽多個狀態(tài)的修改
  @Monitor("num","age")
  changeNum(Monitor: IMonitor) {
    console.log("修改的狀態(tài)", 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 深度監(jiān)聽

复制@Monitor 需要和 复制@ObservedV2、复制@Trace一起使用才能實現(xiàn)深度監(jiān)聽的效果，需要注意的是:

1. 复制@Monitor可以直接寫在 复制@ObserveV2 修飾的复制class中
2. 复制@Monitor 也可以寫在正常的組件內(nèi)

复制@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 也可以寫在正常的組件內(nèi)
  @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 的限制

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

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


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

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

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


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

另外可以通過.語法或者監(jiān)聽數(shù)組長度來變向?qū)崿F(xiàn)檢測數(shù)組元素發(fā)生變化

.語法

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


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

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

  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%")
  }
}

監(jiān)聽數(shù)組長度變化

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


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

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

  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為計算屬性，可以監(jiān)聽數(shù)據(jù)變化，從而計算新的值。用法比較簡單

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

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

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

審核編輯 黃宇