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

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

说明:

从API version 9开始,该装饰器支持在ArkTS卡片中使用。

概述

@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设计的用途是为了快速的计算,异步行为可能会导致重新渲染速度的性能问题。

使用场景

@Watch和自定义组件更新

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

@Component
struct TotalView {@Prop @Watch('onCountUpdated') count: number = 0;@State total: number = 0;// @Watch cbonCountUpdated(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重新渲染。

@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组件也重新渲染;重新渲染是异步发生的。

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

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

相关文章

WSL启动时自动启动docker服务

Windows系统的WSL,当windows关机再开机后,WSL等于是重新开机的,默认情况下,不会启动Docker服务。例如在Ubuntu 22.04中,需要使用命令 service docker start来启动。由于我习惯关机断电,因此每天开机打开WSL…

在RK3588Ubuntu中运行qtCreator报错

上一篇文章中的qt安装步骤执行完以后报错记录一下 chown lindikeji:lindikeji /usr/lib/aarch64-linux-gnu/qt5/examples -R chown: invalid user: ‘lindikeji:lindikeji’ 运行这个 老提示没有用户组,我就切换至管理员账户运行 chown lindikeji /usr/lib/aarch64…

Apriori算法

Apriori算法是关联规则挖掘算法,也是最经典的算法。 Apriori算法是一种用于挖掘数据集中频繁项集的算法,进而用于生成关联规则。这种算法在数据挖掘、机器学习、市场篮子分析等多个领域都有广泛的应用。 Apriori算法是为了发现事物之间的联系的算法&am…

Uni-app智慧工地可视化信息平台源码

智慧工地的核心是数字化,它通过传感器、监控设备、智能终端等技术手段,实现对工地各个环节的实时数据采集和传输,如环境温度、湿度、噪音等数据信息,将数据汇集到云端进行处理和分析,生成各种报表、图表和预警信息&…

可视化 | 数据可视化降维算法梳理

文章目录 📚数据描述🐇iris🐇MNIST 📚PCA🐇算法流程🐇图像描述 📚Kernel-PCA🐇算法流程🐇图像描述 📚MDS🐇算法流程🐇图像描述 &#…

《微聊》JMeter性能测试报告

文章目录 准备工作JMeter准备工作本地配置代理 测试规划测试方向预期方向异常处理 压力测试录制注册功能压力注册功能压力脚本录制录制功能压力测试脚本完善注册功能压力测试结果 登录功能压力录制登录功能压力测试脚本构造压力测试数据完善登录功能性能测试脚本登录功能压力测…

13年测试老鸟,软件测试经验总结分享,这几年你走了多少坑...

目录:导读 前言一、Python编程入门到精通二、接口自动化项目实战三、Web自动化项目实战四、App自动化项目实战五、一线大厂简历六、测试开发DevOps体系七、常用自动化测试工具八、JMeter性能测试九、总结(尾部小惊喜) 前言 1、测试阶段划分 …

NLP之LSTM原理剖析

文章目录 背景simpleRNN的局限性 LSTM手写一下sigmoid例子支持长记忆的神经网络解读3重门 背景 SimpleRNN有一定局限性, 图片上的文字内容: 图片标题提到“SimpleRNN是一种基础模型。它用于解决序列型问题,其中的每一步的输出会影响到下一步的结果。图…

7+共病思路。WGCNA+多机器学习+实验简单验证,易操作

今天给同学们分享一篇共病WGCNA多机器学习实验的生信文章“Shared diagnostic genes and potential mechanism between PCOS and recurrent implantation failure revealed by integrated transcriptomic analysis and machine learning”,这篇文章于2023年5月16日发…

linux常用命令大全

以下是一些常用的 Linux 命令: ls:列出当前目录下的文件和文件夹。 cd:切换到指定目录。 pwd:显示当前所在的目录。 mkdir:创建一个新的目录。 rm:删除文件或目录。请注意,这是一个非常危险…

Java操作word

生命无罪,健康万岁,我是laity。 我曾七次鄙视自己的灵魂: 第一次,当它本可进取时,却故作谦卑; 第二次,当它在空虚时,用爱欲来填充; 第三次,在困难和容易之…

类脑计算与大规模拓扑分析的几个关键技术问题

类脑计算与大规模拓扑分析的几个关键技术问题 1:构造一个类脑模型,需要我们实现自动拓扑模型构造模块,而现在的水平是人工手动编辑,费时费力,模型的尺度也很有限 2:在神经元这个层次里面,我们需…

【NI-DAQmx入门】传感器基础知识

1.什么是传感器? 传感器可将真实的现象(例如温度或压力)转换为可测量的电流和电压,因而对于数据采集应用必不可少。接下来我们将介绍您所需的测量类型及其对应的传感器类型。在开始之前,您还可以先了解一些传感器术语&…

SpringBoot面试题8:运行 Spring Boot 有哪几种方式?Spring Boot 需要独立的容器运行吗?

该文章专注于面试,面试只要回答关键点即可,不需要对框架有非常深入的回答,如果你想应付面试,是足够了,抓住关键点 面试官:运行 Spring Boot 有哪几种方式? 运行Spring Boot应用有多种方式,具体取决于你的需求和环境。以下是几种常见的运行Spring Boot应用的方式: 使…

Linux进程程序替换

一、单进程下的程序替换 使用execl进行程序替换,先执行execl前面的代码,在execl处替换成其它进程的代码和数据继续执行,后面的内容就不执行了,因此只打印before 二、程序替换原理 前面我们fork创建子进程,子进程会继承…

在全新ubuntu上用gpu训练paddleocr模型遇到的坑与解决办法

目录 一. 我的ubuntu版本![在这里插入图片描述](https://img-blog.csdnimg.cn/297945917309494ab03b50764e6fb775.png)二.首先拉取paddleocr源代码三.下载模型四.训练前的准备1.在源代码文件夹里创造一个自己放东西的文件2.准备数据2.1数据标注2.2数据划分 3.改写yml配置文件4.…

PostGreSQL:数据表继承

PostGreSQL手册的简史部分介绍到:被称为PostGreSQL的对象关系型数据库管理系统,由美国加州大学伯克利 分校编写的POSTGRES软件包发展而来。经过十几年的发展,PostGreSQL目前是世界上最先进的开源数据库。 The object-relational database man…

C++编程题目------平面上的最接近点对(分治算法)

题目描述 给定平面上n个点,找出其中的一对点的距离,使得在这n个点的所有点对中,该距离为所有点对中最小的。 输入格式 第一行一个整数 n,表示点的个数。 接下来 n 行,每行两个实数 x,y ,表示一个点的行…

torch.distributed.elastic.multiprocessing.api: [ERROR] failed (exitcode: -7)

在docker中运行时,由于配置的共享内存不足导致。新建docker时,shm-size设个大点的值。 不设置时,默认值时64M

Vue 的双向数据绑定是如何实现的?

目录 1. 响应式数据 2. v-model 指令 3. 实现原理 4. 总结 Vue.js 是一款流行的前端 JavaScript 框架,它以其强大的双向数据绑定能力而闻名。双向数据绑定使得数据在视图和模型之间保持同步,并且任一方的变化都会自动反映到另一方。那么,…