一区二区三区三上|欧美在线视频五区|国产午夜无码在线观看视频|亚洲国产裸体网站|无码成年人影视|亚洲AV亚洲AV|成人开心激情五月|欧美性爱内射视频|超碰人人干人人上|一区二区无码三区亚洲人区久久精品

0
  • 聊天消息
  • 系統(tǒng)消息
  • 評論與回復(fù)
登錄后你可以
  • 下載海量資料
  • 學(xué)習(xí)在線課程
  • 觀看技術(shù)視頻
  • 寫文章/發(fā)帖/加入社區(qū)
會員中心
創(chuàng)作中心

完善資料讓更多小伙伴認(rèn)識你,還能領(lǐng)取20積分哦,立即完善>

3天內(nèi)不再提示

HarmonyOS Next V2 @Monitor 和@Computed

萬少 ? 來源:jf_22972444 ? 作者:jf_22972444 ? 2025-04-02 18:26 ? 次閱讀
加入交流群
微信小助手二維碼

掃碼添加小助手

加入工程師交流群

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功能要強大不少

  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(`點擊修改 ${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(`點擊修改 num ${this.num}`)
        .onClick(() = > {
          this.num++
        })
      Button(`點擊修改 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")
  // 如果要單獨監(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%")
  }
}

審核編輯 黃宇

聲明:本文內(nèi)容及配圖由入駐作者撰寫或者入駐合作網(wǎng)站授權(quán)轉(zhuǎn)載。文章觀點僅代表作者本人,不代表電子發(fā)燒友網(wǎng)立場。文章及其配圖僅供工程師學(xué)習(xí)之用,如有內(nèi)容侵權(quán)或者其他違規(guī)問題,請聯(lián)系本站處理。 舉報投訴
  • HarmonyOS
    +關(guān)注

    關(guān)注

    80

    文章

    2126

    瀏覽量

    33130
收藏 人收藏
加入交流群
微信小助手二維碼

掃碼添加小助手

加入工程師交流群

    評論

    相關(guān)推薦
    熱點推薦

    第三屆大會回顧第6期 | HarmonyOS NEXT原生智能,助力應(yīng)用低成本生而智能

    原生智能是HarmonyOS NEXT的核心能力之一,通過將人工智能(AI)技術(shù)與操作系統(tǒng)深度融合,實現(xiàn)了從底層到應(yīng)用層的全面智能化。HarmonyOS NEXT的原生智能是如何實現(xiàn)的
    的頭像 發(fā)表于 07-14 18:04 ?174次閱讀
    第三屆大會回顧第6期 | <b class='flag-5'>HarmonyOS</b> <b class='flag-5'>NEXT</b>原生智能,助力應(yīng)用低成本生而智能

    第三屆大會回顧第2期 | HarmonyOS NEXT內(nèi)核驅(qū)動生態(tài)兼容與競爭力思考

    隨著HarmonyOS NEXT生態(tài)和技術(shù)的發(fā)展,驅(qū)動框架作為北向和南向的生態(tài)中樞,有很多的機會。例如,提供更多的信息到應(yīng)用層,實現(xiàn)精準(zhǔn)的性能功耗控制;打破傳統(tǒng)的分層解耦,簡化關(guān)鍵協(xié)議、關(guān)鍵路徑等等。
    的頭像 發(fā)表于 05-19 19:17 ?719次閱讀
    第三屆大會回顧第<b class='flag-5'>2</b>期 | <b class='flag-5'>HarmonyOS</b> <b class='flag-5'>NEXT</b>內(nèi)核驅(qū)動生態(tài)兼容與競爭力思考

    HarmonyOS Next V2 @Local 和@Param

    HarmonyOS Next V2 @Local 和@Param @Local 背景 @Local 是 harmony 應(yīng)用開發(fā)中的 v2 版本中 對標(biāo)**@State**的狀態(tài)管理修
    的頭像 發(fā)表于 04-02 18:27 ?398次閱讀
    <b class='flag-5'>HarmonyOS</b> <b class='flag-5'>Next</b> <b class='flag-5'>V2</b> @Local 和@Param

    HarmonyOS Next V2 @Event

    HarmonyOS Next V2 @Event 背景 在上一節(jié)中,我們針對父子組件,講了關(guān)于傳遞數(shù)據(jù)的知識。我們了解到 @Local 是管理自己內(nèi)部的數(shù)據(jù)的, @Param 是負(fù)責(zé)接收父組件的數(shù)據(jù)
    的頭像 發(fā)表于 03-31 09:42 ?359次閱讀

    stlink v2為什么無法連接上stm32 stlink unility?

    stlink v2無法連接上stm32 stlink unility
    發(fā)表于 03-14 08:51

    在linux使用HUMMINGGBIRD Debugger Kit V2連接目標(biāo)板上e203提示出錯是怎么回事?

    在linux使用HUMMINGGBIRD Debugger Kit V2 連接目標(biāo)板上e203提示出錯如下: (hbirdenv) root@linuxczp:/home/nuclei-hbird
    發(fā)表于 03-07 16:32

    微軟OmniParser V2:大模型轉(zhuǎn)化為計算機智能體

    微軟近日宣布,視覺Agent解析框架OmniParser已發(fā)布最新版本V2。這一新版本具有將大型語言模型如OpenAI(4o/o1/o3-mini)、DeepSeek(R1)、Qwen(2.5VL
    的頭像 發(fā)表于 02-18 09:31 ?2345次閱讀

    SAM IoT Wx v2硬件用戶指南

    電子發(fā)燒友網(wǎng)站提供《SAM IoT Wx v2硬件用戶指南.pdf》資料免費下載
    發(fā)表于 01-21 14:02 ?0次下載
    SAM IoT Wx <b class='flag-5'>v2</b>硬件用戶指南

    名單公布!【書籍評測活動NO.56】極速探索HarmonyOS NEXT:純血鴻蒙應(yīng)用開發(fā)實踐

    本書深入剖析了HarmonyOS NEXT的各項技術(shù),通過豐富的實戰(zhàn)案例,由淺入深地解析了HarmonyOS NEXT的原理與應(yīng)用。借助多樣化的實戰(zhàn)案例和豐富的配套資源,讀者可以全面
    發(fā)表于 01-20 16:53

    HarmonyOS NEXT 應(yīng)用開發(fā)練習(xí):智能視頻推薦

    一、整體思路 本DEMO展示了如何在HarmonyOS NEXT平臺上開發(fā)一個智能視頻推薦應(yīng)用。應(yīng)用通過模擬的用戶偏好數(shù)據(jù),為用戶推薦可能感興趣的視頻。用戶可以通過滑動屏幕查看推薦的視頻列表,并點擊
    發(fā)表于 01-02 16:26

    HarmonyOS Next MQTT演示

    HarmonyOS Next MQTT演示
    發(fā)表于 11-07 16:54

    華為大氣?。?b class='flag-5'>HarmonyOS NEXT公測發(fā)福利~這個可以有

    HarmonyOS NEXT火熱公測中,首批100萬名公測用戶速來領(lǐng)取多重權(quán)益!這波福利不錯
    的頭像 發(fā)表于 11-06 10:26 ?694次閱讀
    華為大氣啊!<b class='flag-5'>HarmonyOS</b> <b class='flag-5'>NEXT</b>公測發(fā)福利~這個可以有

    華為HarmonyOS NEXT 10月8日開啟公測

    華為宣布,萬眾矚目的HarmonyOS NEXT操作系統(tǒng)將于10月8日正式開啟公測,標(biāo)志著這一創(chuàng)新力作即將與廣大用戶見面。HarmonyOS NEXT作為華為自研操作系統(tǒng)的最新成果,不
    的頭像 發(fā)表于 09-24 15:41 ?1418次閱讀
    華為<b class='flag-5'>HarmonyOS</b> <b class='flag-5'>NEXT</b> 10月8日開啟公測

    淺析SDIO協(xié)議V2V3版本的區(qū)別

    SDIO(Secure Digital Input/Output)協(xié)議V2V3在多個方面存在顯著的區(qū)別,這些區(qū)別主要體現(xiàn)在功能支持、硬件要求、安全性以及支持的協(xié)議等方面。以下是對這些區(qū)別的詳細(xì)分析
    發(fā)表于 09-18 08:32

    華為“純血”鴻蒙系統(tǒng) HarmonyOS NEXT 將于9月底推出正式版

    HarmonyOS NEXT 將于今年 9 月底推出正式版本。 “從發(fā)布第一個版本到今年的 9 月份,這個(9 月)月底我們會正式發(fā)布 HarmonyOS NEXT,這一版本是完全獨
    的頭像 發(fā)表于 09-14 14:27 ?2551次閱讀