鸿蒙Harmony--状态管理器-@Observed装饰器和@ObjectLink装饰器详解

 经历的越多，越喜欢简单的生活，干净的东西，清楚的感觉，有结果的事，和说到做到的人。把圈子变小，把语放缓，把心放宽，用心做好手边的事儿，该有的总会有的!

目录

一，定义

二，装饰器说明

三，变量的传递/访问规则说明

 四，使用

1，简单对象的使用

2，嵌套对象的使用

3，数组对象的使用

一，定义

之前所讲的装饰器仅能观察到第一层的变化，但是在实际应用开发中，应用会根据开发需要，封装自己的数据模型。对于多层嵌套的情况，比如二维数组，或者数组项class，或者class的属性是class，他们的第二层的属性变化是无法观察到的。这就引出了@Observed/@ObjectLink装饰器。

@ObjectLink和@Observed类装饰器用于在涉及嵌套对象或数组的场景中进行双向数据同步：

①被@Observed装饰的类，可以被观察到属性的变化；

②子组件中@ObjectLink装饰器装饰的状态变量用于接收@Observed装饰的类的实例，和父组件中对应的状态变量建立双向数据绑定。这个实例可以是数组中的被@Observed装饰的项，或者是class object中的属性，这个属性同样也需要被@Observed装饰。

③单独使用@Observed是没有任何作用的，需要搭配@ObjectLink或者@Prop使用。

限制条件：

①使用@Observed装饰class会改变class原始的原型链，@Observed和其他类装饰器装饰同一个class可能会带来问题。

②@ObjectLink装饰器不能在@Entry装饰的自定义组件中使用。

二，装饰器说明

@Observed类装饰器说明
装饰器参数无
类装饰器装饰class。需要放在class的定义前，使用new创建类对象。
@ObjectLink变量装饰器说明
装饰器参数无
同步类型不与父组件中的任何类型同步变量。
允许装饰的变量类型必须为被@Observed装饰的class实例，必须指定类型。
不支持简单类型，可以使用@Prop。
支持继承Date或者Array的class实例
@ObjectLink的属性是可以改变的，但是变量的分配是不允许的，也就是说这个装饰器装饰变量是只读的，不能被改变。
被装饰变量的初始值不允许。

！注意：

@ObjectLink装饰的变量不能被赋值，如果要使用赋值操作，请使用@Prop。

①@Prop装饰的变量和数据源的关系是单向同步，@Prop装饰的变量在本地拷贝了数据源，所以它允许本地更改，如果父组件中的数据源有更新，@Prop装饰的变量本地的修改将被覆盖；

②@ObjectLink装饰的变量和数据源的关系是双向同步，@ObjectLink装饰的变量相当于指向数据源的指针。禁止对@ObjectLink装饰的变量赋值，如果一旦发生@ObjectLink装饰的变量的赋值，则同步链将被打断。因为@ObjectLink修饰的变量通过数据源（Object）引用来初始化。对于实现双向数据同步的@ObjectLink，赋值相当于更新父组件中的数组项或者class的属性，TypeScript/JavaScript不能实现，会发生运行时报错。

三，变量的传递/访问规则说明

@ObjectLink传递/访问说明
从父组件初始化必须指定。
初始化@ObjectLink装饰的变量必须同时满足以下场景：
- 类型必须是@Observed装饰的class。
- 初始化的数值需要是数组项，或者class的属性。
- 同步源的class或者数组必须是@State，@Link，@Provide，@Consume或者@ObjectLink装饰的数据。
与源对象同步双向。
可以初始化子组件允许，可用于初始化常规变量、@State、@Link、@Prop、@Provide

 四，使用

注意，@Observed必须在ets文件中使用，在ts文件中不允许使用

1，简单对象的使用

用@Observed装饰数据类

@Observed
export default class YuanZhen {public name: string = 'YuanZhen';public age: number = 18;constructor(name: string, age: number) {this.name = namethis.age = age}
}

子组件

import YuanZhen from './bean/YuanZhen'@Component
export default struct ProvideTest {@ObjectLink yuanZhen:YuanZhenbuild() {Row() {Column() {Text("子name:" + this.yuanZhen.name+"\nage:"+this.yuanZhen.age).fontSize(50).fontWeight(FontWeight.Bold).onClick(() => {this.yuanZhen.name ="袁震2"this.yuanZhen.age=35})}.width('100%')}.height('100%')}}

父组件

import YuanZhen from './bean/YuanZhen';
import ProvideTest from './ProvideTest';@Entry
@Component
struct Index {@State yuan:YuanZhen=new YuanZhen("袁震",18)build() {Column(){Text("父name:" + this.yuan.name+"\nage:"+this.yuan.age).fontSize(50).fontWeight(FontWeight.Bold).onClick(() => {this.yuan.name ="袁震1"this.yuan.age =20})ProvideTest({yuanZhen:this.yuan})}}}

注意：这里会有一个报错，Assigning the '@State' decorated attribute 'yuan' to the '@ObjectLink' decorated attribute 'yuanZhen' is not allowed. <ArkTSCheck> 是编译器的问题，但是不影响使用

运行效果：

点击父点击子

所以， 被@Observed和@ObjectLink修饰的class可以实现父子双向绑定

2，嵌套对象的使用

用@Observed修饰的数据类：

@Observed
export default class YuanZhen {public name: string = 'YuanZhen';public age: number = 18;constructor(name: string, age: number) {this.name = namethis.age = age}
}
import YuanZhen from './YuanZhen';
@Observed
export default class Yuan {public number: number = 1;public yuanZhen: YuanZhen = new YuanZhen('yuanzhen', 18);constructor(number: number, yuanZhen: YuanZhen) {this.number = numberthis.yuanZhen = yuanZhen}
}

子组件：

import YuanZhen from './bean/YuanZhen'@Component
export default struct ProvideTest {@ObjectLink yuanZhen:YuanZhenbuild() {Row() {Column() {Text("子name:" + this.yuanZhen.name+"\nage:"+this.yuanZhen.age).fontSize(50).fontWeight(FontWeight.Bold).onClick(() => {this.yuanZhen.name ="袁震2"this.yuanZhen.age=35})}.width('100%')}.height('100%')}
}

父组件：

import Yuan from './bean/Yuan';
import YuanZhen from './bean/YuanZhen';
import ProvideTest from './ProvideTest';@Entry
@Component
struct Index {@State yuan:Yuan=new Yuan(1,new YuanZhen("袁震",18))build() {Column(){Text("父name:" + this.yuan.yuanZhen.name+"\nage:"+this.yuan.yuanZhen.age).fontSize(50).fontWeight(FontWeight.Bold).onClick(() => {this.yuan.yuanZhen.name ="袁震1"this.yuan.yuanZhen.age =20console.info("yz----name="+this.yuan.yuanZhen.name )})ProvideTest({yuanZhen:this.yuan.yuanZhen})}}
}

运行：

点击父点击子

点击父组件，输出：

由此可见，当class为嵌套类型时，父组件的UI不会改变，但是数据会改变，子组件的UI和数据都会改变

3，数组对象的使用

子组件

import Yuan from './bean/Yuan'@Component
export default struct ProvideTest {@ObjectLink yuan:Yuanbuild() {Row() {Column() {Text("子name:"+this.yuan.yuanZhen.name+"\nage:"+this.yuan.yuanZhen.age+"\nnumber:"+this.yuan.number).fontSize(50).fontWeight(FontWeight.Bold).onClick(() => {this.yuan.yuanZhen.name ="袁震子组件"this.yuan.yuanZhen.age=35console.log("yz---name:"+this.yuan.yuanZhen.name)})}.width('100%')}.height('100%')}
}

父组件

import Yuan from './bean/Yuan';
import YuanZhen from './bean/YuanZhen';
import ProvideTest from './ProvideTest';@Entry
@Component
struct Index {@State yuan:Array<Yuan>=new ArrayaboutToAppear(){let yuan1:Yuan =new Yuan(1,new YuanZhen("袁震1",18))let yuan2:Yuan =new Yuan(2,new YuanZhen("袁震2",19))let yuan3:Yuan =new Yuan(3,new YuanZhen("袁震3",20))this.yuan.push(yuan1)this.yuan.push(yuan2)this.yuan.push(yuan3)}build() {Column(){Text("父name:" + this.yuan[0].yuanZhen.name+"\nage:"+this.yuan[0].yuanZhen.age+"\nnumber:"+this.yuan[0].number).fontSize(50).fontWeight(FontWeight.Bold).onClick(() => {this.yuan[0].yuanZhen.name="袁震父组件"this.yuan[0].number =10this.yuan[0].yuanZhen.age=30})ProvideTest({yuan:this.yuan[0]})}}}

运行：

点击父点击子

可以看到，父组件不会更新本身的UI，会更新子组件的UI，子组件既不会更新自己的UI也不会更新父组件的UI。

但是，可以直接传给子组件简单类，这样可以更新子组件

子组件 

import YuanZhen from './bean/YuanZhen'@Component
export default struct ProvideTest {@ObjectLink yuanZhen:YuanZhenbuild() {Row() {Column() {Text("子name:"+this.yuanZhen.name+"\nage:"+this.yuanZhen.age).fontSize(50).fontWeight(FontWeight.Bold).onClick(() => {this.yuanZhen.name ="袁震子组件"this.yuanZhen.age=35console.log("yz---name:"+this.yuanZhen.name)})}.width('100%')}.height('100%')}
}

父组件

import Yuan from './bean/Yuan';
import YuanZhen from './bean/YuanZhen';
import ProvideTest from './ProvideTest';@Entry
@Component
struct Index {@State yuan:Array<Yuan>=new ArrayaboutToAppear(){let yuan1:Yuan =new Yuan(1,new YuanZhen("袁震1",18))let yuan2:Yuan =new Yuan(2,new YuanZhen("袁震2",19))let yuan3:Yuan =new Yuan(3,new YuanZhen("袁震3",20))this.yuan.push(yuan1)this.yuan.push(yuan2)this.yuan.push(yuan3)}build() {Column(){Text("父name:" + this.yuan[0].yuanZhen.name+"\nage:"+this.yuan[0].yuanZhen.age+"\nnumber:"+this.yuan[0].number).fontSize(50).fontWeight(FontWeight.Bold).onClick(() => {this.yuan[0].yuanZhen.name="袁震父组件"this.yuan[0].number =10this.yuan[0].yuanZhen.age=30})ProvideTest({yuanZhen:this.yuan[0].yuanZhen})}}}

点击父点击子

父组件的ui不会改变，子组件的UI会实时更新

本文来自互联网用户投稿，该文观点仅代表作者本人，不代表本站立场。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如若转载，请注明出处：http://www.mzph.cn/news/615066.shtml

如若内容造成侵权/违法违规/事实不符，请联系多彩编程网进行投诉反馈email:809451989@qq.com，一经查实，立即删除！

相关文章

kafka下载安装部署

kafka下载安装部署

Apache kafka 是一个分布式的基于push-subscribe的消息系统&#xff0c;它具备快速、可扩展、可持久化的特点。它现在是Apache旗下的一个开源系统&#xff0c;作为hadoop生态系统的一部分&#xff0c;被各种商业公司广泛应用。它的最大的特性就是可以实时的处理大量数据以满足各…
阅读更多...
面试算法115：重建序列

面试算法115：重建序列

题目 长度为n的数组org是数字1&#xff5e;n的一个排列&#xff0c;seqs是若干序列&#xff0c;请判断数组org是否为可以由seqs重建的唯一序列。重建的序列是指seqs所有序列的最短公共超序列&#xff0c;即seqs中的任意序列都是该序列的子序列。 例如&#xff0c;如果数组org为…
阅读更多...
初识Hadoop-概述与关键技术

初识Hadoop-概述与关键技术

一.大数据概述 1.什么是大数据 高速发展的信息时代&#xff0c;新一轮科技革命和变革正在加速推进&#xff0c;技术创新日益成为重塑经济发展模式和促进经济增长的重要驱动力量&#xff0c;而“大数据”无疑是核心推动力。 那么&#xff0c;什么是“大数据”呢&#xff1…
阅读更多...
初识C#语言

初识C#语言

提示&#xff1a;文章写完后&#xff0c;目录可以自动生成&#xff0c;如何生成可参考右边的帮助文档 文章目录 前言一、C#语言以及特点C# 强大的编程功能 二、C# 与 .NET三、.NET 与 .NET Framwork.Net 框架&#xff08;.Net Framework&#xff09;.NET 与 .NET Framework 总结…
阅读更多...
MySQL基础命令

MySQL基础命令

1.SQL语句基础 1.1 SQL简介 SQL&#xff1a;结构化查询语言(Structured Query Language)&#xff0c;在关系型数据库上执行数据操作、数据检索以及 数据维护的标准语言。使用SQL语句&#xff0c;程序员和数据库管理员可以完成如下的任务 改变数据库的结构 更改系统的安全设置 …
阅读更多...
人工智能推动供应链革命的成功

人工智能推动供应链革命的成功

人工智能推动供应链革命的成功 目录 人工智能推动供应链革命的成功一、供应链管理不断变化的面貌二、拥挤的解决方案景观三、踏上人工智能驱动的转型1. 价值创造识别、战略和路线图2. 目标解决方案设计和供应商选择3. 实施与系统集成4. 变革管理、能力建设和全面价值获取 新技术…
阅读更多...
flutter 文件下载及存储路径

flutter 文件下载及存储路径

flutter 文件下载及存储路径 前言一、下载进度条二、文件路径二、文件上传总结 前言 日常开发中&#xff0c;经常会遇到下载文件的功能&#xff0c;往往我们在需要保存文件的路径上去调试&#xff0c;比如Android中的路径&#xff0c;有些会报错在SD卡中&#xff0c;但是有些手…
阅读更多...
1.5计算机网络的分类

1.5计算机网络的分类

1.5计算机网络的分类 1.5.1按照网络的作用范围进行分类 1、广域网WAN 广域网WAN&#xff08;WideAreaNetwork&#xff09;&#xff1a;广域网的作用范围通常为几十到几千公里&#xff0c;因而有时也称为远程网(longhaulnetwork)。广域网是互联网的核心部分&#xff0c;其任务…
阅读更多...
几款优秀科学开源计算软件介绍

几款优秀科学开源计算软件介绍

有一些比较优秀的软件&#xff0c;它们在科学计算、数据处理和分析方面具有广泛的应用和功能。以下是一些比较知名的软件&#xff1a; SciPy&#xff1a;SciPy是一个非常流行的科学计算库&#xff0c;提供了大量的数学函数和算法&#xff0c;用于解决各种科学问题。它支持多种操…
阅读更多...
dhcp 时间同步 详细介绍

dhcp 时间同步 详细介绍

装服务程序步骤 1.如果有默认配置 请先备份 再进行修改 2.修改完配置文件 请重启服务或重新加载配置文件 否则不生效 注意&#xff1a;有的软件 安装包的名字和 系统里服务程序的名字不一样 htttp httpd openssh-server ssh 高阶级改防火墙 一&#xff0c; dhcp自动分配IP地…
阅读更多...
机器学习-协同过滤

机器学习-协同过滤

1、协同过滤要解决的问题 协同过滤算法主要用于推荐系统&#xff0c;推荐系统是信息过载所采用的措施&#xff0c;面对海量的数据信息&#xff0c;从中快速推荐出符合用户特点的物品。一些人的“选择恐惧症”、没有明确需求的人。 解决如何从大量信息中找到自己感兴趣的信息。…
阅读更多...
爬虫逆向破解翻译接口参数

爬虫逆向破解翻译接口参数

Python 请求baidu翻译接口&#xff1a;https://fanyi.baidu.com/v2transapi?fromzh&toen 步骤一&#xff1a; 查找构建请求参数 JS 断点发现如下参数&#xff1a; w {from: _.fromLang,to: _.toLang,query: e,transtype: i,simple_means_flag: 3,sign: b(e),token: windo…
阅读更多...
Tomcat 的 work 目录缓存导致的JSP页面图片更新问题

Tomcat 的 work 目录缓存导致的JSP页面图片更新问题

一、问题分析 1. 修改后重新部署没有变化 笔者之前部署了一个后台管理项目&#xff0c;通过它来发布课程内容&#xff0c;其中有一个 JSP 课程页面&#xff0c;在该 JSP 页面里也引用了类文件 Constant.java 里的一个变量&#xff08;ALIYUN_OSS_PATH&#xff09;&#xff0c;…
阅读更多...
使用ffmpeg实现音频静音修剪

使用ffmpeg实现音频静音修剪

1 silenceremove介绍 本文主要介绍在 FFmpeg 命令中使用 silenceremove filter 进行音频静音的修剪。 1.1 start_x参数 参数名说明取值范围默认值start_periods设置是否应在音频开头修剪音频。0 表示不应从一开始就修剪静音。当指定一个非 0 值时&#xff0c;它会修剪音频直…
阅读更多...
2022-ECCV-Explaining Deepfake Detection by Analysing Image Matching

2022-ECCV-Explaining Deepfake Detection by Analysing Image Matching

一、研究背景 1.大量工作将深度伪造检测作为一个二分类任务并取得了良好的性能。 2.理解模型如何在二分类标签的监督下学习伪造相关特征仍难是个艰巨的任务。 3.视觉概念&#xff1a;具有语义的人脸区域&#xff0c;如嘴、鼻子、眼睛。 二、研究目标 1.验证假设&#xff0c;并…
阅读更多...
虹科分享 | 用Redis为LangChain定制AI代理——OpenGPTs

虹科分享 | 用Redis为LangChain定制AI代理——OpenGPTs

文章速览&#xff1a; OpenGPTs简介Redis在OpenGPTs中的作用在本地使用OpenGPTs在云端使用OpenGPTsRedis与LangChain赋能创新 OpenAI最近推出了OpenAI GPTs——一个构建定制化AI代理的无代码“应用商店”&#xff0c;随后LangChain开发了类似的开源工具OpenGPTs。OpenGPTs是一…
阅读更多...
OpenCV——多分辨率LBP的计算方法

OpenCV——多分辨率LBP的计算方法

目录 一、算法原理1、原理概述2、参考文献 二、代码实现三、结果展示 OpenCV——多分辨率LBP的计算方法由CSDN点云侠原创&#xff0c;爬虫自重。如果你不是在点云侠的博客中看到该文章&#xff0c;那么此处便是不要脸的爬虫。 一、算法原理 1、原理概述 基本LBP算子虽然在早期…
阅读更多...
Vue.js设计与实现阅读-2

Vue.js设计与实现阅读-2

Vue.js设计与实现阅读-2 1、前言2、框架设计的核心要素2、1 提升用户体验2、2 控制代码体积2、3 Tree-Shaking2、4 特性开关2、5 错误处理 1、前言 上一篇我们了解到了 命令式和声明式的区别&#xff0c;前者关注过程&#xff0c;后者关注结果了解了虚拟dom存在的意义&#x…
阅读更多...
【蓝桥杯选拔赛真题55】python输出N+10 第十四届青少年组蓝桥杯python 选拔赛比赛真题解析

【蓝桥杯选拔赛真题55】python输出N+10 第十四届青少年组蓝桥杯python 选拔赛比赛真题解析

目录 python输出N+10 一、题目要求 1、编程实现 2、输入输出
阅读更多...
笔记软件内怎么查看文章字数 笔记查看字数的操作步骤

笔记软件内怎么查看文章字数 笔记查看字数的操作步骤

在记录生活点滴、工作要务时&#xff0c;你是否曾像我一样&#xff0c;为了知道写了多少字而犯愁&#xff1f;尤其是在需要精确控制字数时&#xff0c;那种焦虑感更是如影随形。 记得有一次&#xff0c;我为了一个项目报告苦思冥想&#xff0c;好不容易写了个初稿&#xff0c;…
阅读更多...
推荐文章
最新文章

Copyright @ 2022~2023