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. 對(duì)于深層次的數(shù)據(jù)，如深層次對(duì)象、對(duì)象數(shù)組等，需要搭配@ObservedV2、@Trace一起使用。
3. 可以同時(shí)監(jiān)聽多個(gè)屬性
4. 可以獲取到監(jiān)聽屬性的修改前后的數(shù)據(jù)變化

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

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

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

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

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

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

  build() {
    Column() {

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

@Monitor 同時(shí)監(jiān)聽多個(gè)屬性

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

  // 同時(shí)監(jiān)聽多個(gè)狀態(tài)的修改
  @Monitor("num","age")
  changeNum() {
    console.log("檢測(cè)到數(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)聽了多個(gè)狀態(tài)，而只有一個(gè)狀態(tài)發(fā)生變化時(shí)， 可以給獲知到具體哪個(gè)狀態(tài)發(fā)生了變化
2. 當(dāng)狀態(tài)發(fā)生變化時(shí)，可以獲取到變化前后的兩個(gè)值

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

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

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

  // 同時(shí)監(jiān)聽多個(gè)狀態(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(`同時(shí)修改 num 和 age ${this.num}  ${this.age}`)
        .onClick(() = > {
          this.num++
          this.age++
        })

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

@Monitor 深度監(jiān)聽

@Monitor 需要和 @ObservedV2、@Trace一起使用才能實(shí)現(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 的限制

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

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


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

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

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


          // 2 有效 檢測(cè)到了數(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)檢測(cè)數(shù)組元素發(fā)生變化

.語法

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


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

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

  build() {
    Column() {
      Button("增加一個(gè)")
        .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(" 檢測(cè)到數(shù)組修改了")
  }

  build() {
    Column() {
      Button("增加一個(gè)")
        .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為計(jì)算屬性，可以監(jiān)聽數(shù)據(jù)變化，從而計(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(`計(jì)算后 ${this.numText}`)
    }
    .width("100%")
    .height("100%")
  }
}

審核編輯 黃宇