ObservedV2裝飾器和Trace裝飾器

為了對嵌套類對象屬性變化直接觀測,華為提供了ObservedV2和Trace裝飾器。這兩個裝飾器必須搭配使用,單獨使用任何一個都不會起任何作用;在繼承類中也可監測;ObservedV2的類實例目前不支持使用JSON.stringify進行序列化,需通過new操作符實例化后,才具備被觀測變化的能力。與V1版本相比(使用@ObjectLink裝飾器與自定義組件來實現觀測),使用起來更加方便。

嵌套類場景

在下面場景中老師(Teacher)尹山木,有個學生(Student)丁云飛,高一有三門課程(語文,數學,英語),升到高二增加了一門化學課。

export class Teacher{name:string = "尹山木"student:Studentconstructor(stu:Student) {this.student = stu}
}
export class Student{name:string = "丁云飛"course:Courseconstructor(c:Course) {this.course = c}
}
@ObservedV2
export class Course{@Trace courses:Array<string> = []constructor() {this.courses = ["語文","數學","英語"]}
}
@Entry
@ComponentV2
struct Index {
@Local teacher:Teacher = new Teacher(new Student(new Course()))build() {Column({space:20}){Text("老師:" + this.teacher.name).fontSize(20)Text("學生:" + this.teacher.student.name).fontSize(18)Row({space:6}){ForEach(this.teacher.student.course.courses,(course:string,index)=>{Text("課程:" + course).fontSize(16)})}.width('100%').justifyContent(FlexAlign.Start).alignItems(VerticalAlign.Center)Button("升上二年級").onClick(()=>{this.teacher.student.course.courses.push("化學")})}.justifyContent(FlexAlign.Start).alignItems(HorizontalAlign.Start).padding({left:20})}
}

運行效果點擊升上二年級,可以看到課程增加了一門化學。

繼承類場景

祖孫三人,每過一年,年齡增加一歲。


@ObservedV2
export class GrandFather{@Trace age:number = 0constructor(age:number) {this.age = age;}
}
export class Father extends GrandFather{constructor(age:number) {super(age)}
}
export class Son extends Father{constructor(age: number) {super(age)}
}
@Entry
@ComponentV2
struct Index {
@Local son:Son = new Son(2)build() {Column({space:20}){Text("孩子今年:" + this.son.age + "歲了!").fontSize(20)Button("過了一年").onClick(()=>{this.son.age++})}.justifyContent(FlexAlign.Start).alignItems(HorizontalAlign.Start).padding({left:20})}
}

點擊過了一年孩子會增長一歲。

Trace裝飾基礎類型的數組

ObservedV2監聽模型numArrModel的numberArr數組的增加,同時刷新UI
@ObservedV2
export class numArrModel{id:number = 0@Trace numberArr:Array<number> = [0,10,5]
}
@Entry
@ComponentV2
struct Index {
@Local numModel:numArrModel = new numArrModel()build() {Column({space:20}){ForEach(this.numModel.numberArr,(item:number,index)=>{Text(''+item).fontSize(20)})Button('增加一個數字').onClick(()=>{this.numModel.numberArr.push(11)})Button('減少一個數字').onClick(()=>{this.numModel.numberArr.pop()})}.justifyContent(FlexAlign.Start).alignItems(HorizontalAlign.Start).padding({left:20})}
}

Trace裝飾對象數組

Trace裝飾對象數組studends,以及student的屬性age。當數組長度和age改變時頁面會刷新。

@ObservedV2
export class Student{@Trace age:number = 1
}
@ObservedV2
export class Classes{id:number = 3@Trace studends:Student[] = []constructor(stus:Student[]) {this.studends = stus}
}
@Entry
@ComponentV2
struct Index {
@Local classModel:Classes = new Classes([new Student(),new Student(),new Student()])build() {Column({space:20}){Column(){Text("班級:"+this.classModel.id).fontSize(20)Text("學生數量:"+this.classModel.studends.length+"人").fontSize(20)}Column(){ForEach(this.classModel.studends,(stu:Student,index)=>{Text("年齡:"+stu.age).fontSize(20)})}Button('增加一個學生').onClick(()=>{this.classModel.studends.push(new Student())})Button('第一名學生年齡增加一歲').onClick(()=>{if (this.classModel.studends.length > 0) {this.classModel.studends[0].age++}})}.justifyContent(FlexAlign.Start).alignItems(HorizontalAlign.Start).padding({left:20})}
}

Trace裝飾Map類型

Trace裝飾的Map類型屬性,當發生set、clear、delete事件時會被監測到。

@ObservedV2
export class textMapModel{@Trace textMap:Map<number,string> = new Map([[0,'a'],[1,'b'],[2,'c']])
}
@Entry
@ComponentV2
struct Index {
@Local mapInfo:textMapModel = new textMapModel()build() {Column({space:20}){ForEach(Array.from(this.mapInfo.textMap.entries()), (item: [number, string]) => {Text(`${item[0]}`).fontSize(30)Text(`${item[1]}`).fontSize(30)Divider()})Button('初始化').onClick(()=>{this.mapInfo.textMap = new Map([[0,'z'],[1,'x'],[2,'c']])})Button('增加一個').onClick(()=>{this.mapInfo.textMap.set(3,'v')})Button('刪除一個').onClick(()=>{this.mapInfo.textMap.delete(0)})Button('清除').onClick(()=>{this.mapInfo.textMap.clear()})Button('改變值').onClick(()=>{this.mapInfo.textMap.set(0,'city')})}.justifyContent(FlexAlign.Start).alignItems(HorizontalAlign.Start).padding({left:20})}
}

Trace裝飾Set類型

Trace裝飾的Set類型屬性可以觀測到add, clear, delete等

@ObservedV2
export class Info{@Trace memberSet:Set<number> = new Set([0,1,2,3,4,5,6,])
}
@Entry
@ComponentV2
struct Index {
@Local memberInfoModel:Info = new Info()build() {Column({space:20}){Row(){ForEach(Array.from(this.memberInfoModel.memberSet.values()),(item:number)=>{Text(``+item).fontSize(20).margin({left:6})})}Button('add').onClick(()=>{this.memberInfoModel.memberSet.add(10)})Button('clear').onClick(()=>{this.memberInfoModel.memberSet.clear()})Button('delete').onClick(()=>{this.memberInfoModel.memberSet.delete(0)})}.justifyContent(FlexAlign.Start).alignItems(HorizontalAlign.Start).padding({left:20})}
}

Trace裝飾Date類型

@Trace裝飾的Date類型屬性可以觀測調用API帶來的變化,包括 setFullYear、setMonth、setDate、setHours、setMinutes、setSeconds、setMilliseconds、setTime、setUTCFullYear、setUTCMonth、setUTCDate、setUTCHours、setUTCMinutes、setUTCSeconds、setUTCMilliseconds。因為Info類被@ObservedV2裝飾且屬性selectedDate被@Trace裝飾,點擊Button('set selectedDate to 2023-07-08')對selectedDate賦值也可以觀測到變化。

本文來自互聯網用戶投稿,該文觀點僅代表作者本人,不代表本站立場。本站僅提供信息存儲空間服務,不擁有所有權,不承擔相關法律責任。
如若轉載,請注明出處:http://www.pswp.cn/news/909364.shtml
繁體地址,請注明出處:http://hk.pswp.cn/news/909364.shtml
英文地址,請注明出處:http://en.pswp.cn/news/909364.shtml

如若內容造成侵權/違法違規/事實不符,請聯系多彩編程網進行投訴反饋email:809451989@qq.com,一經查實,立即刪除!

相關文章

6月計算機新書:深度學習、大模型、DeepSeek

六月&#xff0c;這個充滿活力與希望的季節&#xff0c;三本重磅新書《深度學習&#xff1a;基礎與概念》、《MCP極簡開發&#xff1a;輕松打造高效智能體》與《大模型應用開發&#xff1a;RAG實戰課》翩然而至&#xff0c;為我們開啟了一場探索科技前沿的奇妙之旅。一起來看詳…

扁平風格職場商務通用PPT模版分享

扁平風格PPT模版&#xff0c;創意卡通扁平化通用PPT模版&#xff0c;創意扁平化勵志論文答辯PPT模版&#xff0c;卡通職場商務PPT模版&#xff0c;職場培訓&#xff0c;項目策劃&#xff0c;工作總結類PPT模版&#xff0c;互聯網電子商務PPT模版 扁平風格職場商務通用PPT模版分…

jupyter內核崩潰

最近在做用k-mer評估基因組規模的任務&#xff0c;其中一個局部程序&#xff0c;想偷懶&#xff0c;直接在jupyter中跑了下結果&#xff0c;想看看這一小步處理如何&#xff0c;結果沒想到內核崩潰了&#xff01; 這一步我的草稿代碼如下&#xff1a; import pandas as pd imp…

Java企業技術趨勢分析:AI應用的落地實踐與未來展望

Java企業技術趨勢分析&#xff1a;AI應用的落地實踐與未來展望 開篇&#xff1a;技術趨勢與市場需求 在當前快速發展的數字化時代&#xff0c;人工智能&#xff08;AI&#xff09;已經成為推動企業創新和效率提升的關鍵力量。Java作為企業級應用開發的主流語言&#xff0c;正…

每日Prompt:Steve Winter風格插畫

提示詞 世界攝影大師杰作&#xff0c;極簡主義&#xff0c;Steve Winter風格&#xff0c;6只不同顏色的布偶貓圍成一圈&#xff0c;看向鏡頭中心&#xff0c;仰天視角&#xff0c;天空背景&#xff0c;高品質細節&#xff0c;超精細CG&#xff0c;高分辨率&#xff0c;最佳品質…

Vue3 + Element Plus 獲取表格列信息

在 Vue 3 和 Element Plus 中&#xff0c;可以通過以下步驟獲取表格的列信息&#xff1a; 實現步驟&#xff1a; 使用 ref 綁定表格實例 通過表格實例的 store.states.columns 獲取列數據 處理列信息&#xff08;過濾隱藏列、處理嵌套表頭等&#xff09; 示例代碼&#xf…

logger2js - JavaScript日志與調試工具庫

logger2js - JavaScript日志與調試工具庫 logger2js是一個功能強大的前端JavaScript日志與調試工具庫&#xff0c;提供了豐富的日志輸出、性能測試和代碼調試功能。該庫支持配置化引入&#xff0c;包含5種皮膚風格和豐富的API接口&#xff0c;如 a l e r t 增強方法、 alert增…

Stone 3D使用RemoteMesh組件極大的縮小工程文件尺寸

Stone 3D的工程文件tsp默認包含了場景中所有的對象和數據&#xff0c;這樣的好處是tsp可以單獨離線保存&#xff0c;但壞處是tsp文件通常偏大。 解決這個問題的方法是把外部glb模型文件通過RemoteMesh組件來加載。 首先創建一個空實體&#xff0c;然后給該空實體添加RemoteMe…

【深入剖析】攻克 Java 并發的基石:Java 內存模型 (JMM) 原理與實踐指南

0.引言 理解 JMM (Java Memory Model - JMM) 是掌握 Java 并發編程的關鍵&#xff0c;它定義了多線程環境下&#xff0c;線程如何與主內存以及彼此之間交互內存數據。 核心目標&#xff1a; JMM 旨在解決多線程編程中的三個核心問題&#xff1a; 原子性 (Atomicity)&#xf…

【Three.js】初識 Three.js

Threejs介紹 我們開發 webgl 主要是使用 threejs 這個庫&#xff0c;因為 webGL太難用&#xff0c;太復雜&#xff01;但是現代瀏覽器都支持WebGL&#xff0c;這樣我們就不必使用Flash、Java等插件就能在瀏覽器中創建三維圖形。 threejs 它提供-一個很簡單的關于WebGL特性的J…

【經驗總結】ECU休眠后連續發送NM報文3S后ECU網絡才被喚醒問題分析

目錄 前言 正文 1.問題描述 2.問題分析 3.驗證猜想 4.總結 前言 ECU的上下電/休眠喚醒在ECU開發設計過程中最容易出問題且都為嚴重問題,最近在項目開發過程中遇到ECU休眠狀態下連續發送NM報文3S后才能喚醒CAN網絡的問題,解決問題比較順利,但分析過程中涉及到的網絡休…

企業架構框架深入解析:TOGAF、Zachman Framework、FEAF與Gartner EA Framework

執行摘要 企業架構&#xff08;EA&#xff09;是一項至關重要的實踐&#xff0c;它使組織能夠協調其業務戰略、運營流程和技術基礎設施&#xff0c;以實現整體戰略目標。企業架構框架作為結構化的方法論和綜合性工具&#xff0c;旨在管理企業級系統的固有復雜性&#xff0c;提…

數字化動態ID隨機水印和ID跑馬燈實現教育視頻防錄屏

摘要&#xff1a;數字化動態ID隨機水印和ID跑馬燈技術可以有效保護數字教育資源。動態水印將用戶信息隨機顯示在視頻上且不可去除&#xff0c;能追蹤錄屏者并震懾盜版行為。ID跑馬燈則自定義顯示觀看者信息&#xff0c;便于追蹤盜版源頭并提供法律證據。這些技術大幅增加盜版成…

< 自用文兒 騰訊云 VPS > Ubuntu 24 系統,基本設置

前言&#xff1a; 3 月份買的騰訊云的這臺 VPS&#xff0c;剛發現現在退款&#xff0c;只能返回 0 元。測試應用已經遷移到JD&#xff0c;清除內容太麻煩&#xff0c;重裝更簡單。 因為配合政策&#xff0c;國內的云主機都有兩個 IP 地址&#xff0c;一個內網&#xff0c;一個…

React ajax中的跨域以及代理服務器

Axios的誕生 為什么會誕生Axios&#xff1f;說到Axios我們就不得不說下Ajax。最初的舊瀏覽器頁面在向服務器請求數據時&#xff0c;由于返回的是整個頁面的數據&#xff0c;所以整個頁面都會強制刷新一下&#xff0c;這對于用戶來講并不是很友好。因為當我們只需要請求部分數據…

HOT 100 | 73.矩陣置零、54.螺旋矩陣、48.旋轉圖像

一、73. 矩陣置零 73. 矩陣置零 - 力扣&#xff08;LeetCode&#xff09; 1. 解題思路 1. 使用兩個數組分別標記每行每列是否有0&#xff0c;初始化全為False&#xff0c;遇到0就變成True。 2. 遍歷矩陣&#xff0c;遇到0就將False改成True。 3. 再次遍歷矩陣&#xff0c;更…

神經網絡壓縮

網絡壓縮技術學習筆記 以下筆記基于提供的 PDF 文件&#xff08;tiny_v7.pdf&#xff09;&#xff0c;總結了網絡壓縮技術的核心概念、實現原理和方法&#xff0c;特別針對多模態大模型、空間智能以及未來智能體&#xff08;Agent&#xff09;和通用人工智能&#xff08;AGI&a…

論索引影響性能的一面④ 索引失蹤之謎【上】

梁敬彬梁敬弘兄弟出品 往期回顧 論索引影響性能的一面①索引的各種開銷 論索引影響性能的一面②索引的使用失效 論索引影響性能的一面③ 索引開銷與經典案例 開篇&#xff1a;DBA的深夜“尋人啟事” 作為數據庫的守護者&#xff0c;我們最信賴的伙伴莫過于“索引”。它如同一…

java集合(九) ---- Stack 類

目錄 九、Stack 類 9.1 位置 9.2 特點 9.3 棧 9.4 構造方法 9.5 常用方法 9.6 注意點&#xff1a;循環遍歷 Stack 類 九、Stack 類 9.1 位置 Stack 類位于 java.util 包下 9.2 特點 Stack 類是 Vector 類的子類Stack 類對標于數據結構中的棧結構 9.3 棧 定義&…

ARXML可視化轉換工具使用說明

ARXML可視化轉換工具 | 詳細使用指南與說明 &#x1f4dd; 前言 自上篇文章《聊聊ARXML解析工具&#xff1a;我們是如何擺脫昂貴商業軟件的》發布以來&#xff0c;收到了眾多朋友的關注和咨詢&#xff0c;這讓我倍感榮幸&#xff01; 新朋友請注意&#xff1a;如果您還沒有閱…