HarmonyOS:@Watch装饰器:状态变量更改通知

@Watch应用于对状态变量的监听。如果开发者需要关注某个状态变量的值是否改变,可以使用@Watch为状态变量设置回调函数。

说明
从API version 9开始,该装饰器支持在ArkTS卡片中使用。
从API version 11开始,该装饰器支持在元服务中使用。

一、概述

@Watch用于监听状态变量的变化,当状态变量变化时,@Watch的回调方法将被调用。@Watch在ArkUI框架内部判断数值有无更新使用的是严格相等(===),遵循严格相等规范。当在严格相等为false的情况下,就会触发@Watch的回调。

二、装饰器说明

@Watch补充变量装饰器说明
装饰器参数必填。常量字符串,字符串需要有引号。是(string) => void自定义成员函数的方法的引用。
可装饰的自定义组件变量可监听所有装饰器装饰的状态变量。不允许监听常规变量。
装饰器的顺序建议@State、@Prop、@Link等装饰器在@Watch装饰器之前。

三、语法说明

类型说明
(changedPropertyName? : string) => void该函数是自定义组件的成员函数,changedPropertyName是被watch的属性名。
在多个状态变量绑定同一个@Watch的回调方法的时候可以通过changedPropertyName进行不同的逻辑处理。
将属性名作为字符串输入参数,不返回任何内容。

四、观察变化和行为表现

  1. 当观察到状态变量的变化(包括双向绑定的AppStorage和LocalStorage中对应的key发生的变化)的时候,对应的@Watch的回调方法将被触发;
  2. @Watch方法在自定义组件的属性变更之后同步执行;
  3. 如果在@Watch的方法里改变了其他的状态变量,也会引起状态变更和@Watch的执行;
  4. 在第一次初始化的时候,@Watch装饰的方法不会被调用,即认为初始化不是状态变量的改变。只有在后续状态改变时,才会调用@Watch回调方法。

五、限制条件

  • 建议开发者避免无限循环。循环可能是因为在@Watch的回调方法里直接或者间接地修改了同一个状态变量引起的。为了避免循环的产生,建议不要在@Watch的回调方法里修改当前装饰的状态变量;
  • 开发者应关注性能,属性值更新函数会延迟组件的重新渲染(具体请见上面的行为表现),因此,回调函数应仅执行快速运算;
  • 不建议在@Watch函数中调用async await,因为@Watch设计的用途是为了快速的计算,异步行为可能会导致重新渲染速度的性能问题。

六、使用场景

6.1 @Watch和自定义组件更新

以下示例展示组件更新和@Watch的处理步骤。count在CountModifier中由@State装饰,在TotalView中由@Prop装饰。

@Component
struct TotalView {@Prop @Watch('onCountUpdated') count: number = 0;@State total: number = 0;// @Watch 回调onCountUpdated(propName: string): void {this.total += this.count;}build() {Text(`Total: ${this.total}`)}
}@Entry
@Component
struct CountModifier {@State count: number = 0;build() {Column() {Button('add to basket').onClick(() => {this.count++})TotalView({ count: this.count })}}
}

处理步骤:

  1. CountModifier自定义组件的Button.onClick点击事件自增count。
  2. 由于@State count变量更改,子组件TotalView中的@Prop被更新,其@Watch(‘onCountUpdated’)方法被调用,更新了子组件TotalView 中的total变量。
  3. 子组件TotalView中的Text重新渲染。

运行效果图
在这里插入图片描述

6.2 @Watch与@Link组合使用

以下示例说明了如何在子组件中观察@Link变量。

class PurchaseItem {static NextId: number = 0;public id: number;public price: number;constructor(price: number) {this.id = PurchaseItem.NextId++;this.price = price;}
}@Component
struct BasketViewer {@Link @Watch('onBasketUpdated') shopBasket: PurchaseItem[];@State totalPurchase: number = 0;updateTotal(): number {let total = this.shopBasket.reduce((sum, i) => sum + i.price, 0);// 超过100欧元可享受折扣if (total >= 100) {total = 0.9 * total;}return total;}// @Watch 回调onBasketUpdated(propName: string): void {this.totalPurchase = this.updateTotal();}build() {Column() {ForEach(this.shopBasket,(item: PurchaseItem) => {Text(`Price: ${item.price.toFixed(2)} €`)},(item: PurchaseItem) => item.id.toString())Text(`Total: ${this.totalPurchase.toFixed(2)} €`)}}
}@Entry
@Component
struct BasketModifier {@State shopBasket: PurchaseItem[] = [];build() {Column() {Button('Add to basket').onClick(() => {this.shopBasket.push(new PurchaseItem(Math.round(100 * Math.random())))})BasketViewer({ shopBasket: $shopBasket })}}
}

处理步骤如下:

  1. BasketModifier组件的Button.onClick向BasketModifier shopBasket中添加条目;
  2. @Link装饰的BasketViewer shopBasket值发生变化;
  3. 状态管理框架调用@Watch函数BasketViewer onBasketUpdated 更新BasketViewer TotalPurchase的值;
  4. @Link shopBasket的改变,新增了数组项,ForEach组件会执行item Builder,渲染构建新的Item项;@State totalPurchase改变,对应的Text组件也重新渲染;重新渲染是异步发生的。

运行效果图
在这里插入图片描述

6.3 使用changedPropertyName进行不同的逻辑处理

以下示例说明了如何在@Watch函数中使用changedPropertyName进行不同的逻辑处理。

@Entry
@Component
struct UsePropertyName {@State @Watch('countUpdated') apple: number = 0;@State @Watch('countUpdated') cabbage: number = 0;@State fruit: number = 0;// @Watch 回调countUpdated(propName: string): void {if (propName == 'apple') {this.fruit = this.apple;}}build() {Column() {Text(`Number of apples: ${this.apple.toString()}`).fontSize(20).margin({ top: 16 })Text(`Number of cabbages: ${this.cabbage.toString()}`).fontSize(20).margin({ top: 16 })Text(`Total number of fruits: ${this.fruit.toString()}`).fontSize(20).margin({ top: 16 })Button('Add apples').margin({ top: 16 }).onClick(() => {this.apple++;})Button('Add cabbages').margin({ top: 16 }).onClick(() => {this.cabbage++;})}}
}

处理步骤如下:

  1. 点击Button(‘Add apples’)时,apple的值发生变化。
  2. 状态管理框架调用@Watch函数countUpdated,发生变化的状态变量名为apple,满足if逻辑条件,fruit的值被改变;
  3. 绑定了apple,fruit状态变量的Text重新渲染。
  4. 点击Button(‘Add cabbages’)时,cabbage的值发生变化。
  5. 状态管理框架调用@Watch函数countUpdated,发生变化的状态变量名为cabbage,不满足if逻辑条件,fruit的值不发生变化;
  6. 绑定了cabbage状态变量的Text重新渲染。

效果图1
在这里插入图片描述

效果图2
在这里插入图片描述

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

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

相关文章

AIGC对传统内容创作行业的冲击

文章目录 引言一、AIGC的概念1.1 AIGC的工作原理 二、AIGC对内容创作行业的影响2.1 提高创作效率2.2 降低创作门槛2.3 改变内容创作的形式 三、AIGC带来的挑战3.1 版权和道德问题3.2 内容质量的参差不齐3.3 人类创作者的角色变化 四、AIGC的应用场景4.1 新闻行业4.2 市场营销4.…

Linux 下执行定时任务之 Systemd Timers

不知道 ECS 因为什么缘故,上面安装的 MySQL 服务老是不定期挂掉,本来想通过 Linux 得 Cron 配置个半小时的定时检测任务,结果一直没有执行,因此又尝试使用了 Systemd Timers 进行了重新配置,简要做个记录。 Systemd Ti…

Java已死,大模型才是未来?

作者:不惑_ 引言 在数字技术的浪潮中,编程语言始终扮演着至关重要的角色。Java,自1995年诞生以来,便以其跨平台的特性和丰富的生态系统,成为了全球范围内开发者们最为青睐的编程语言之一 然而,随着技术的…

C语言第10节:详解操作符

1. 运算符的分类 运算符是C语言中的基本组成部分,用于执行各种操作。以下是常见运算符的详细分类: 1.1. 算术操作符 这些用于执行基本的数学运算: :加法- :减法* :乘法/ :除法% :…

Python实现全国岗位招聘信息可视化分析(源码+论文+部署讲解)

项目源码&数据源获取 利用Python实现全国岗位招聘信息可视化分析 项目背景: 1.为企业招聘决策提供科学的依据和参考,可以帮助人力资源部门、招聘机构和求职者了解当前的就业形势、行业趋势和人才需求,从而做出更明智的招聘和求职决策。…

群控系统服务端开发模式-应用开发-本地上传工厂及阿里云上传工厂开发

记住业务流程图&#xff0c;要不然不清楚自己封装的是什么东西。 一、本地工厂开发 在根目录下extend文件夹下Upload文件夹下channel文件夹中&#xff0c;我们修改LocalUpload业务控制器。具体代码如下&#xff1a; <?php /*** 本地上传工厂* User: 龙哥 三年风水* Date: …

智能座舱相关术语全解及多模态交互在智能座舱中的应用

文章目录 座舱相关术语全解1. 智能座舱2. UFS3. 多模态交互4. 3D虚拟引擎5. AR/VR6. GNSS7. TTS8. DPU9. 摄像头10. 屏幕/显示器11. 音频12. 无线连接13. 其他组件 多模态交互在智能座舱中有以下一些应用 座舱相关术语全解 1. 智能座舱 智能座舱&#xff08;intelligent cabi…

Linux中SPI

参考资料 https://www.cnblogs.com/aaronLinux/p/6219146.html1.SPI 2.SPI传输 2.1传输示例 首先&#xff0c;CS0拉低选中的SPI Flash , 然后在每个时钟周期&#xff0c; DO输出对应的电平。 SPI FLASH会在每个时钟的上升沿读取D0的电平。2.2SPI模式 根据SCK的电平以及数据在…

基于SSM+小程序的计算机实验室排课与查询管理系统(实验室2)

&#x1f449;文末查看项目功能视频演示获取源码sql脚本视频导入教程视频 1、项目介绍 1、管理员功能有个人中心&#xff0c;学生管理&#xff0c;教师管理&#xff0c;实验室信息管理&#xff0c;实验室预约管理&#xff0c;取消预约管理&#xff0c;实验课程管理&#xff0…

Netty核心源码与优化

1.Netty的优化 1.1 使用EventLoop的任务调度 直接使用 channel.writeAndFlush(data) 可能会导致线程切换&#xff0c;这是因为如果当前线程并不是该 Channel 所绑定的 EventLoop 线程&#xff0c;那么 writeAndFlush() 操作会将任务重新提交给关联的 EventLoop 线程执行&#…

selinux介绍和Linux中的防火墙

selinux 1、selinux的说明 2、selinux的工作原理 3、selinux的启动、关闭与查看 防火墙 1、什么是防火墙 2、iptables &#xff08;1&#xff09;iptables介绍 参数说明 3、firewalld firewalld-cmd的参数说明

JavaScript。—关于语法基础的理解—

一、程序控制语句 JavaScript 提供了 if 、if else 和 switch 3种条件语句&#xff0c;条件语句也可以嵌套。 &#xff08;一&#xff09;、条件语句 1、单向判断 &#xff1a; if... &#xff08;1&#xff09;概述 < if >元素用于在判断该语句是否满足特定条…

yarn 下载安装、下载依赖、通过 vscode 运行服务(Windows11)

目录 yarn工具前置要求&#xff1a;安装node.js并配置好国内镜像源下载安装下载依赖特别的&#xff1a; 启动服务 yarn 工具 系统&#xff1a;Windows 11 前置要求&#xff1a;安装node.js并配置好国内镜像源 参考&#xff1a;本人写的《node.js下载、安装、设置国内镜像源…

SQL,力扣题目1596,每位顾客最经常订购的商品【窗口函数】

一、力扣链接 LeetCode_1596 二、题目描述 表&#xff1a;Customers ------------------------ | Column Name | Type | ------------------------ | customer_id | int | | name | varchar | ------------------------ customer_id 是该表具有唯一值的…

2025上海市公务员考试报名流程详细教程

2025年上海市公务员考试报名马上就要开始了&#xff0c;有想要参加上海公务员考试的姐妹们&#xff0c;可以提前了解一下考试报名流程&#xff0c;和报名照制作尺寸要求 报名时间&#xff1a;11月2日0:00至11月8日12:00 南核时间&#xff1a;11月2日0:00至11月8日14:00 缴费…

【云原生】Docker搭建开源翻译组件Deepl使用详解

目录 一、前言 二、微服务项目使用翻译组件的场景 2.1 多语言用户界面 2.2 业务逻辑中的翻译需求 2.3 满足实时通信的要求 2.4 内容管理系统 2.5 个性化推荐系统 2.6 日志和监控 三、开源类翻译组件解决方案 3.1 国内翻译组件方案汇总 3.1.1 百度翻译 3.1.2 腾讯翻…

数据库原理上机实验4(数据更新实验){insert;update;delete;is null的使用}

本次实验用到的一些基本关键字 1、insert into 插入数据 INSERT INTO 语句可以有两种编写形式。 第一种形式无需指定要插入数据的列名&#xff0c;只需提供被插入的值即可&#xff1a; INSERT INTO table_name VALUES (value1,value2,value3,...); 第二种形式需要指定列名…

第03章 MySQL的简单使用命令

一、MySQL的登录 1.1 服务的启动与停止 MySQL安装完毕之后&#xff0c;需要启动服务器进程&#xff0c;不然客户端无法连接数据库。 在前面的配置过程中&#xff0c;已经将MySQL安装为Windows服务&#xff0c;并且勾选当Windows启动、停止时&#xff0c;MySQL也 自动启动、停止…

ubuntu 24 (wayland)如何实现无显示器远程桌面

ubuntu 24默认采用的是wayland而非x11&#xff0c;查过文档vnc对wayland的支持不是很好&#xff0c;折腾了好久&#xff0c;弄了一个如下的方案供参考&#xff1a; 硬件条件 需要一个显卡欺骗器或者可以接HDMI口作为视频信号源输出的设备。 将ubuntu的主机的HDMI输出接到该硬…

Python Matplotlib 如何处理大数据集的绘制,提高绘图效率

Python Matplotlib 如何处理大数据集的绘制&#xff0c;提高绘图效率 在数据分析和可视化的过程中&#xff0c;处理大数据集常常是我们面临的挑战。绘制大数据集不仅需要时间和计算资源&#xff0c;还可能导致图形显示不流畅&#xff0c;甚至崩溃。Matplotlib 是 Python 中一个…