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

news2024/11/16 23:35:48

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

目录

一，定义

二，装饰器说明

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

 四，使用

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 = name
    this.age = age
  }
}

子组件

import YuanZhen from './bean/YuanZhen'

@Component
export default struct ProvideTest {

  @ObjectLink yuanZhen:YuanZhen

  build() {
    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 = name
    this.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 = number
    this.yuanZhen = yuanZhen
  }
}

子组件：

import YuanZhen from './bean/YuanZhen'

@Component
export default struct ProvideTest {

  @ObjectLink yuanZhen:YuanZhen

  build() {
    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 =20
          console.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:Yuan

  build() {
    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=35
            console.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 Array

  aboutToAppear(){
    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 =10
          this.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:YuanZhen

  build() {
    Row() {
      Column() {
        Text("子name:"+this.yuanZhen.name+"\nage:"+this.yuanZhen.age)
          .fontSize(50)
          .fontWeight(FontWeight.Bold)
          .onClick(() => {
            this.yuanZhen.name ="袁震子组件"
            this.yuanZhen.age=35
            console.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 Array

  aboutToAppear(){
    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 =10
          this.yuan[0].yuanZhen.age=30
        })
      ProvideTest({yuanZhen:this.yuan[0].yuanZhen})
    }
  }

}

点击父点击子

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

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

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

相关文章

基于多反应堆的高并发服务器【C/C++/Reactor】（中）在TcpConnection 中接收并解析Http请求消息

基于多反应堆的高并发服务器【C/C++/Reactor】（中）在TcpConnection 中接收并解析Http请求消息

一、在TcpConnection 中多添加和http协议相关的request和response struct TcpConnection {struct EventLoop* evLoop;struct Channel* channel;struct Buffer* readBuf;struct Buffer* writeBuf;char name[32];// http协议struct HttpRequest* request;struct HttpResponse* r…
阅读更多...
leecode1143 | 最长公共子序列

leecode1143 | 最长公共子序列

给定两个字符串 text1 和 text2&#xff0c;返回这两个字符串的最长 公共子序列 的长度。如果不存在 公共子序列 &#xff0c;返回 0 。 一个字符串的 子序列 是指这样一个新的字符串&#xff1a;它是由原字符串在不改变字符的相对顺序的情况下删除某些字符&#xff08;也可以不…
阅读更多...
第7章 PKI 和密码应用

第7章 PKI 和密码应用

7.1 非对称密码 第6章的“现代密码学”一节介绍了私钥&#xff08;对称&#xff09;和公钥&#xff08;非对称&#xff09;密码的基本原则。 你曾学过&#xff0c;对称密钥密码系统要求通信双方使用同一个共享秘密密钥&#xff0c;因而形成了安全分发密钥的问题。 你还曾学过…
阅读更多...
如何使用科大讯飞星火大模型AI批量生成文章

如何使用科大讯飞星火大模型AI批量生成文章

如何使用科大讯飞的星火大模型AI工具批量生成文章呢&#xff1f; 我们可以使用科大讯飞AI的星火大模型API接口&#xff0c;它支持批量处理和生成文章的AI功能。 但是星火大模型API接口无法直接使用&#xff0c;一般需要技术人员开发对应程序对接才行。为了让不懂技术的普通用…
阅读更多...
【微信小程序开发】深入学习小程序开发之功能扩展和优化

【微信小程序开发】深入学习小程序开发之功能扩展和优化

前言 随着移动互联网的快速发展&#xff0c;微信小程序作为一种轻量级应用&#xff0c;已经逐渐成为许多企业和个人进行业务推广和服务提供的重要平台本文将详细介绍 微信小程序开发的功能扩展和优化&#xff0c;帮助开发者更好地提升小程序的用户体验和性能。 一、功能扩展 …
阅读更多...
数据库系统概念 第七版 中文答案 第3章 SQL介绍

数据库系统概念 第七版 中文答案 第3章 SQL介绍

3.1 将以下查询使用SQL语言编写&#xff0c;使用大学数据库模式。 &#xff08;我们建议您实际在数据库上运行这些查询&#xff0c;使用我们在书籍网站db-book.com上提供的示例数据。有关设置数据库和加载示例数据的说明&#xff0c;请参阅上述网站。&#xff09; a. 查找计算机…
阅读更多...
蓝桥杯练习题（六）

蓝桥杯练习题（六）

&#x1f4d1;前言 本文主要是【算法】——蓝桥杯练习题&#xff08;六&#xff09;的文章&#xff0c;如果有什么需要改进的地方还请大佬指出⛺️ &#x1f3ac;作者简介&#xff1a;大家好&#xff0c;我是听风与他&#x1f947; ☁️博客首页&#xff1a;CSDN主页听风与他 …
阅读更多...
软件分发点（DP）的合理规划

软件分发点（DP）的合理规划

软件分发点&#xff08;Distribution Point, DP&#xff09;是用于托管文件以分发到计算机和移动设的服务器&#xff0c;Jamf Pro可以通过分发点分发以下类型的文件&#xff1a; 软件包 脚本 内部应用程序 内部书籍 Jamf Pro支持两种类型的分发点&#xff0c;您可以使用这些类型…
阅读更多...
我用 Laf 开发了一个非常好用的密码管理工具

我用 Laf 开发了一个非常好用的密码管理工具

【KeePass 密码管理】是一款简单、安全简洁的账号密码管理工具&#xff0c;服务端使用 Laf 云开发&#xff0c;支持指纹验证、FaceID&#xff0c;N 重安全保障&#xff0c;可以随时随地记录我的账号和密码。 写这个小程序之前&#xff0c;在国内市场找了很多密码存储类的 App …
阅读更多...
汽配企业MES管理系统的特点与实践

汽配企业MES管理系统的特点与实践

随着汽车工业的飞速发展&#xff0c;汽车零部件制造企业面临着日益复杂的生产环境和多样化的市场需求。为了应对这些挑战&#xff0c;许多汽配企业开始引入MES管理系统解决方案&#xff0c;以提高生产效率、优化资源配置、提升产品质量。本文将重点探讨汽配企业MES管理系统的特…
阅读更多...
阿尔泰推出19“8槽4U上架式CPCI机箱 支持客户定制化机箱需求

阿尔泰推出19“8槽4U上架式CPCI机箱 支持客户定制化机箱需求

阿尔泰科技发展有限公司是北京阿尔泰科技的子公司&#xff0c;公司于2010年正式成立&#xff0c;集全国技术支持与服务&#xff0c;销售&#xff0c;结构设计&#xff0c;项目支持等一批专业从事工控行业的工程师屹立在天府之国。公司涵盖数据采集&#xff0c;无线传输&#xf…
阅读更多...
搭建sprinboot服务环境

搭建sprinboot服务环境

搭建sprinboot服务环境 安装jdk安装nginx安装Redis安装MySQL一 下载MySQL二 安装MySQL三 启动mysql服务获取初始化密码四 登陆MySQL五 修改密码六 设置远程访问七 相关问题错误&#xff1a;1819错误&#xff1a;1251 或 2059错误&#xff1a;10060忽略表名大小写 记录搭建sprin…
阅读更多...
[计算机提升] 创建FTP共享

[计算机提升] 创建FTP共享

4.7 创建FTP共享 4.7.1 FTP介绍 在Windows系统中&#xff0c;FTP共享是一种用于在网络上进行文件传输的标准协议。它可以让用户通过FTP客户端程序访问并下载或上传文件&#xff0c;实现文件共享。 FTP共享的用途非常广泛&#xff0c;例如可以让多个用户共享文件、进行文件备份…
阅读更多...
solr 远程命令执行漏洞复现 (CVE-2019-17558)

solr 远程命令执行漏洞复现 (CVE-2019-17558)

solr 远程命令执行漏洞复现 (CVE-2019-17558) ‍ 名称: solr 远程命令执行 (CVE-2019-17558) 描述: Apache Velocity是一个基于Java的模板引擎&#xff0c;它提供了一个模板语言去引用由Java代码定义的对象。Velocity是Apache基金会旗下的一个开源软件项目&#xff0c;旨在确…
阅读更多...
【抓包教程】BurpSuite联动雷电模拟器——安卓高版本抓包移动应用教程

【抓包教程】BurpSuite联动雷电模拟器——安卓高版本抓包移动应用教程

前言 近期找到了最适合自己的高版本安卓版本移动应用抓HTTP协议数据包教程&#xff0c;解决了安卓低版本的问题&#xff0c;同时用最简单的办法抓到https的数据包&#xff0c;特此进行文字记录和视频记录。 前期准备 抓包工具&#xff1a;BurpSuite安卓模拟器&#xff1a;雷…
阅读更多...
docker 利用特权模式逃逸并拿下主机

docker 利用特权模式逃逸并拿下主机

docker 利用特权模式逃逸并拿下主机 在溯源反制过程中&#xff0c;会经常遇到一些有趣的玩法&#xff0c;这里给大家分享一种docker在特权模式下逃逸&#xff0c;并拿下主机权限的玩法。 前言 在一次溯源反制过程中&#xff0c;发现了一个主机&#xff0c;经过资产收集之后&…
阅读更多...
图形化编程：下一代的创新教育工具

图形化编程：下一代的创新教育工具

在科技日新月异的今天&#xff0c;编程已经成为了一项必备的技能。然而&#xff0c;传统的编程语言对于许多人来说仍然是一项挑战&#xff0c;尤其是对于年轻的学习者。为了解决这个问题&#xff0c;图形化编程应运而生&#xff0c;它以其直观、易理解和易操作的特点&#xff0…
阅读更多...
DevOps搭建(十六)-Jenkins+K8s部署详细步骤

DevOps搭建(十六)-Jenkins+K8s部署详细步骤

​ 1、整体部署架构图 2、编写脚本 vi pipeline.yml apiVersion: apps/v1 kind: Deployment metadata:namespace: testname: pipelinelabels:app: pipeline spec:replicas: 2selector:matchLabels:app: pipelinetemplate:metadata:labels:app: pipelinespec:containers:- nam…
阅读更多...
Logstash应用介绍

Logstash应用介绍

1.Logstash介绍 1.1 前世今生 Logstash 项目诞生于 2009 年 8 月 2 日。其作者是世界著名的运维工程师乔丹西塞(JordanSissel)&#xff0c;乔丹西塞当时是著名虚拟主机托管商 DreamHost 的员工。 Logstash 动手很早&#xff0c;对比一下&#xff0c;scribed 诞生于 2008 年&am…
阅读更多...
程序员自由创业周记#24：逃离北上广

程序员自由创业周记#24：逃离北上广

程序员自由创业周记#24&#xff1a;逃离北上广 有没有这种城市 房价&#xff1a;市区房价均价1W以内工资&#xff1a;每月工资能买一平米及以上的房子交通&#xff1a;路宽不堵车&#xff0c;高铁、高速发达&#xff0c;坐飞机方便快递&#xff1a;方便&#xff0c;包邮&#…
阅读更多...
推荐文章
最新文章

Copyright @ 2022~2023