【HarmonyOS Next】鸿蒙实用装饰器一览(一)

  装饰器是现代js一个很重要(尚未成熟)的特性,TS4.9开始对装饰器的Stage 3支持,并在TS5.0中发布了装饰器规范的完整版本。ArkTS在TS生态基础上做了进一步扩展,保持了TS的基本风格,同时封装了大量的装饰器来简化功能。

以下内容基于HarmonyOS Next 5.0.0(API12)。

UI组件装饰器

详细文档参考
HarmonyOS Developer文档 - 创建自定义组件

@Component装饰器

@Component装饰器仅能装饰struct关键字声明的数据结构。struct@Component装饰后具备组件化的能力。

@Entry装饰器

@Entry装饰的自定义组件将作为UI页面入口。在单个UI页面中,最多可以使用@Entry装饰一个自定义组件。

@Reusable装饰器

@Reusable装饰的自定义组件具备可复用能力。官方文档未详细说明,事实上这个装饰器在解决帧率瓶颈时非常重要且有效。

使用场景
  • 滑动场景下对同一类自定义组件的实例进行频繁的创建与销毁。
  • 反复切换条件渲染的控制分支,且控制分支中的组件子树结构比较复杂。

可复用自定义组件的缓存和复用只能发生在同一父组件下,无法在不同的父组件下复用同一自定义组件的实例。

组件状态管理装饰器

@State装饰器

@State装饰的变量,与声明式范式中的其他被装饰变量一样,是私有的,只能从组件内部访问,在声明时必须指定其类型和本地初始化。

初始化也可选择使用命名参数机制从父组件完成初始化。这一点受到争议,大部分人认为私有的变量不应该从父组件进行初始化,所以在@ComponentV2中,新增@Local进行平替。

详细文档参考
HarmonyOS Developer文档 - @State装饰器:组件内状态

@Prop装饰器

@Prop装饰的变量和父组件建立单向的同步关系。当父组件的变量发生变化时会同步到子组件,所以@Prop装饰器自然不能使用在被@Entry装饰的UI页面上;另外@Prop装饰的变量允许组件内部进行修改,个人认为这个特性是松散且不严谨的。

详细文档参考
HarmonyOS Developer文档 - @State装饰器:组件内状态

@Link装饰器

@Link装饰的变量与其父组件中对应的数据源建立双向数据绑定。同@Prop装饰器一样也只能作用在子组件上。

详细文档参考
HarmonyOS Developer文档 - @Link装饰器:父子双向同步

@Provide装饰器和@Consume装饰器

@Provide@Consume,应用于与后代组件的双向数据同步,应用于状态数据在多个层级之间传递的场景。不同于上文提到的@Link装饰器@Provide@Consume摆脱参数传递机制的束缚,实现跨层级传递。

详细文档参考
HarmonyOS Developer文档 - @Provide装饰器和@Consume装饰器:与后代组件双向同步

@Observed装饰器和@ObjectLink装饰器

@ObjectLink@Observed类装饰器用于在涉及嵌套对象数组的场景中进行双向数据同步,被@ObjectLink修饰的状态变量用于接收被@Observed装饰的类的实例,和父组件中对应的状态变量建立双向数据绑定

详细文档参考
HarmonyOS Developer文档 - @Observed装饰器和@ObjectLink装饰器:嵌套类对象属性变化

应用状态管理装饰器

@LocalStorageProp装饰器

@LocalStorageProp装饰的变量与LocalStorage中给定属性建立单向同步关系。

LocalStorage页面级UI状态存储,通过@Entry装饰器接收的参数可以在页面内共享同一个LocalStorage实例。

详细文档参考
HarmonyOS Developer文档 - @LocalStorageProp

@LocalStorageLink装饰器

@LocalStorageLink(key)是和LocalStoragekey对应的属性建立双向数据同步关系。

详细文档参考
HarmonyOS Developer文档 - @LocalStorageLink

@StorageProp装饰器

@StorageProp(key)是和AppStorage中key对应的属性建立单向数据同步关系。

AppStorage是应用全局的UI状态存储,是和应用的进程绑定的,由UI框架在应用程序启动时创建,为应用程序UI状态属性提供中央存储

详细文档参考
HarmonyOS Developer文档 - @StorageProp

@StorageLink装饰器

@StorageLink(key)是和AppStorage中key对应的属性建立双向数据同步关系。

详细文档参考
HarmonyOS Developer文档 - @StorageLink

其他状态管理装饰器

@Watch装饰器

@Watch用于监听状态变量的变化,当状态变量变化时,@Watch的回调方法将被调用。@WatchArkUI框架内部判断数值有无更新使用的是严格相等(===),遵循严格相等规范。

详细文档参考
HarmonyOS Developer文档 - @Watch装饰器:状态变量更改通知

@Track装饰器

@Track应用于class对象属性级更新@Track装饰的属性变化时,只会触发该属性关联的UI更新。而未被标记的属性不能在UI中使用,如果使用,会发生运行时报错。

详细文档参考
HarmonyOS Developer文档 - @Track装饰器:class对象属性级更新

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

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

相关文章

ssm框架-spring-spring声明式事务

声明式事务概念 声明式事务是指使用注解或 XML 配置的方式来控制事务的提交和回滚。 开发者只需要添加配置即可, 具体事务的实现由第三方框架实现,避免我们直接进行事务操作! 使用声明式事务可以将事务的控制和业务逻辑分离开来,提…

基于单片机的多功能跑步机控制系统

本设计基于单片机的一种多功能跑步机控制系统。该系统以STM32单片机为主控制器,由七个电路模块组成,分别是:单片机模块、电机控制模块、心率检测模块、音乐播放模块、液晶显示模块、语音控制模块、电源模块。其中,单片机模块是整个…

写给Vue2使用者的Vue3学习笔记

&#x1f64b;‍请注意&#xff0c;由于本人项目中引入了unplugin-auto-import的依赖&#xff0c;所以所有的代码示例中均未手动引入各种依赖库&#xff08;ref、reactive、useRouter等等&#xff09; 初始环境搭建 npm init vuelatest模板语法 插值 同 Vue2 <span>…

C# 数据结构之【图】C#图

1. 图的概念 图是一种重要的数据结构&#xff0c;用于表示节点&#xff08;顶点&#xff09;之间的关系。图由一组顶点和连接这些顶点的边组成。图可以是有向的&#xff08;边有方向&#xff09;或无向的&#xff08;边没有方向&#xff09;&#xff0c;可以是加权的&#xff…

短剧系统小程序开发产品设计实例解析

短剧系统小程序开发架构深度解析引言 随着数字娱乐市场的蓬勃发展&#xff0c;短剧因其紧凑的情节、创新的表现形式和便捷的观看体验&#xff0c;迅速吸引了大量观众的关注。作为承载短剧内容的重要平台&#xff0c;短剧系统小程序不仅需要在用户体验、内容管理等方面做到极致&…

AI数字人视频小程序:引领未来互动新潮流

当下&#xff0c;随着人工智能技术的不断创新发展&#xff0c;各类AI系统已经成为了创新市场发展的重要力量&#xff0c;AI文案、AI数字人、AI视频等&#xff0c;为大众带来更加便捷的创作方式&#xff0c;AI成为了一个全新的风口&#xff0c;各种AI红利持续释放&#xff0c;市…

解决vue-pdf的签章不显示问题

在使用vue-pdf 4.3.0时发现上传一般的普通pdf正常预览&#xff0c;但是上传带有红头文件的和和特殊字体的pdf无法正常内容显示&#xff0c;文字丢失问题。 1、查看控制台报错信息 2、缺少字体原因 getNumPages(url) {var loadingTask pdf.createLoadingTask({url: url,//引入…

跨境电商API接口:数据采集与业务集成的核心

跨境电商作为全球贸易的重要组成部分&#xff0c;正随着互联网技术的发展而迅速增长。在这个过程中&#xff0c;API接口扮演了至关重要的角色&#xff0c;它们不仅提高了运营效率&#xff0c;还增强了安全性和用户体验。本文将深入探讨跨境电商API接口的应用、重要性以及面临的…

【linux013】文件操作命令篇 - less 命令

文章目录 less 命令1、基本用法2、常见选项3、交互式键盘命令4、举例5、注意事项 less 命令 less 是 Linux 中强大的文件分页查看命令&#xff0c;比 more 更灵活且功能更强大。less 支持双向滚动、搜索、显示大文件等功能&#xff0c;适用于查看文件内容或管道输出的大量文本…

力扣 无重复字符的最长字串-3

无重复字符的最长字串-3 class Solution { public:// 解决方法&#xff1a;双指针int lengthOfLongestSubstring(string s) { // 如果字符串为空&#xff0c;直接返回0if (s.length() 0)return 0;// 如果字符串不为空&#xff0c;字符串每个字符都不同的情况下&#xff0c;最…

如何在Ubuntu当中利用CloudCompare软件进行点云配准拼接?

1.首先需要安装相应的cloudcompare软件&#xff0c;以下有两种方式&#xff1a;第一种直接在ubuntu的软件商店里搜索CloudCompare软件进行install&#xff0c;我这里已经安装完毕。 方式二&#xff1a;可以直接原码安装&#xff1a; github地址&#xff1a; https://github.co…

贴贴,一款windows剪切板管理软件

贴贴&#xff0c;一款windows剪切板管理软件 软件下载官网 https://tietieapp.com 软件界面 软件界面简洁、信息展示清晰。软件会自动记录你复制过的内容。包括哪个软件复制的、复制的时间。支持图片、文本、文件等多种格式。支持持久化&#xff0c;电脑重启记录仍然存在。支持…

RocketMQ的使⽤

初识MQ 1.1.同步和异步通讯 微服务间通讯有同步和异步两种⽅式&#xff1a; 同步通讯&#xff1a;就像打电话&#xff0c;需要实时响应。 异步通讯&#xff1a;就像发邮件&#xff0c;不需要⻢上回复。 两种⽅式各有优劣&#xff0c;打电话可以⽴即得到响应&#xff0c;但…

初试无监督学习 - K均值聚类算法

文章目录 1. K均值聚类算法概述2. k均值聚类算法演示2.1 准备工作2.2 生成聚类用的样本数据集2.3 初始化KMeans模型对象&#xff0c;并指定类别数量2.4 用样本数据训练模型2.5 用训练好的模型生成预测结果2.6 输出预测结果2.7 可视化预测结果 3. 实战小结 1. K均值聚类算法概述…

JSON,事件绑定

文章目录 JSON事件绑定输入框input和div的内容返回获取dom元素数组还是单个对象for循环为什么要写const那一行&#xff0c;直接写 hobbys[index].checked true;可以吗const不是常量吗&#xff0c;为什么用const声明的element的属性值可以改变&#xff1f; 黑马学习笔记 JSON 定…

学习HTML第三十一天

学习文章目录 七. 普通按钮八. 文本域九.下拉框 七. 普通按钮 注意点&#xff1a;普通按钮的 type 值为 button &#xff0c;若不写 type 值是 submit 会引起表单的提交 八. 文本域 常用属性如下&#xff1a; rows 属性&#xff1a;指定默认显示的行数&#xff0c;会影响文…

基于Multisim的汽车尾灯控制电路设计与仿真

1、电路由四个按键控制&#xff0c;分别对应左转、右转、刹车和检查。 2、当左转或右转键按下时,左侧或右侧的 3个汽车尾灯按照左循环或右循环的顺!2/3 点亮&#xff0c;点亮时间为 1秒。 3、当刹车时&#xff0c;所有的尾灯同时闪烁&#xff0c;闪烁时间为1秒。 4、当检查时…

小程序-使用 iconfont 图标库报错:Failed to load font

官方默认可以忽略此错误&#xff0c;在清除缓存后首次刷新会显示此错误&#xff0c;重新渲染错误消失 解决方法&#xff1a; 在 iconfont 图标库选择项目设置 选中 Base64 保存&#xff0c;重新点击链接 -> 复制代码到项目中 操作步骤&#xff1a;

Stable Diffusion的解读(二)

Stable Diffusion的解读&#xff08;二&#xff09; 文章目录 Stable Diffusion的解读&#xff08;二&#xff09;摘要Abstract一、机器学习部分1. 算法梳理1.1 LDM采样算法1.2 U-Net结构组成 2. Stable Diffusion 官方 GitHub 仓库2.1 安装2.2 主函数2.3 DDIM采样器2.4 Unet 3…

Rust “xxx“.to_string()和Rust String::from(“xxx“)区别(将字符串字面量(str类型)转换为String类型)

文章目录 Rust "xxx".to_string()和Rust String::from("xxx")区别1. .to_string()&#xff08;能够将任何可以显示的类型&#xff08;如数字、结构体等&#xff09;转为字符串&#xff09;2. String::from()区别总结&#xff1a;性能&#xff1a;示例对比&…