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

如若内容造成侵权/违法违规/事实不符,请联系多彩编程网进行投诉反馈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;如果您还没有阅…