ArkTs的@Watch状态监听

本文涉及的产品
多模态交互后付费免费试用,全链路、全Agent
简介: @Watch是ArkUI框架中用于监听状态变量变化的核心工具,类似Vue的Watch机制。状态更新时,方法触发,通过`changedPropertyName`区分多个绑定变量。需与@State、@Prop、@Link等装饰器配合使用,顺序上须置于这些装饰器之后。实际开发中,@Watch常与@Link(跨组件双向同步)或@Provide(跨代组件同步)结合使用。例如,通过@Link接收父组件变量并监听变化,动态调整子组件状态;或利用@Provide定义全局变量,监听后更新整体进度状态。这种机制提升了组件间状态管理的灵活性与解耦性,助力开发者高效构建复杂应用,实现“一次开发,多端部署”的目标。

@Watch装饰器:监听并捕捉变量变化


@Watch用于监听状态变量的变化,当状态变量变化时,@Watch的回调方法将被调用。@Watch在ArkUI框架内部判断数值有无更新使用的是严格相等(===),监听并捕捉变量变化。
前端同学以Vue中的Watch监听为嵌入点更好理解。

装饰器说明

  • 装饰器参数: 自定义回调引用,用引号字符串的方法名称,这里类似Vue中的Watch对象中自定义方法;
  • 可装饰的自定义组件变量:可监听所有装饰器装饰的状态变量。不允许监听常规变量。
  • 装饰器的顺序: 把@State、@Prop、@Link等装饰器在@Watch装饰器之前。

    语法说明

@Watch (changedPropertyName? : string) => void
  • changedPropertyName: 自定义函数成员,是watch的属性名;
  • 在多个状态变量绑定同一个@Watch的回调方法的时候,可以通过changedPropertyName进行不同的逻辑处理

变化和行为、限制条件

变化和行为 限制条件
当观察到状态变量的变化的时候,对应的@Watch的回调方法将被触发; 建议不要在@Watch的回调方法里修改当前装饰的状态变量和循环
@Watch方法在自定义组件的属性变更之后同步执行 应关注性能,属性值更新函数会延迟组件的重新渲染,因此,回调函数应仅执行快速运算
在第一次初始化的时候,@Watch装饰的方法不会被调用,只有在后续状态改变时才会调用 不建议在@Watch函数中调用async await 等异步,影响性能

@Watch 深度探索:与@Link、 @Povide配合使用


@Watch在项目开发中使用频率非常高,只要是想对一个变量变化监听,然后紧接着要处理其他业务就需要用到它。下面以示例codeLabs到'工作目标'案例为例:

@Link 和 @Watch配合使用

请添加图片描述

// TargetList.ets
@Component
export default struct TargetList {
   
  ...
  @State clickIndex: number = -1;
  ...
  onAddClick?: () => void;

  build() {
   
    Column() {
   
      ...
      List({
    space: CommonConstants.LIST_SPACE }) {
   
        ForEach(this.targetData, (item: TaskItemBean, index: number | undefined) => {
   
          ListItem() {
   
            TargetListItem({
   
              taskItem: item,
              index: index,
              selectArr: $selectArray,
              isEditMode: this.isEditMode,
              clickIndex: $clickIndex
            })
          }
        }, (item: TaskItemBean) => JSON.stringify(item))
      }
      ...
    }
    ...
  }
}

// TargetListItem.ets
@Component
export default struct TargetListItem {
   
  ...
  @Link @Watch('onClickIndexChanged') clickIndex: number;
  @State isExpanded: boolean = false;
  @Consume overAllProgressChanged: boolean;
  @State sliderMode: number = CommonConstants.DEFAULT_SLIDER_MODE;
  public index: number = 0;

  ...
  /**
   * Listening click index.
   */
  onClickIndexChanged() {
   
    if (this.clickIndex !== this.index) {
   
      this.isExpanded = false;
    }
  }

  build() {
   
    Stack({
    alignContent: Alignment.Start }) {
   
      Column() {
   
        this.TargetItem()
        ...
        }
      }
      ...
      .onClick(() => {
   
        ...
        if (!this.isEditMode) {
   
          ...
          this.clickIndex = this.index;
        }
      })
      ...
    }
    .width(CommonConstants.FULL_WIDTH)
  }

  ...
}
  • 本codelab中,使用@Link装饰器从父组件TargetList.ets中接收到(@Link是跨代组件同行,可以去HarmonyOS基础(四)- HarmonyOS ArkTs 组件状态查看详细说明)的双向同步的变量clickIndex,并使用@Watch监听当前变量。
  • onClickIndexChanged是我们自定义函数。当监听当点击子目标时,就改变isExpanded的状态,这样起到展开/收起目标子组件动态变化
  • 然后子组件就根据当前clickIndex和列表下标比对,如何是与当前下标相同,不做处理,如果不是就咱开。

@Provide和@Watch 配合使用

[video(video-j1ych5oc-1707379671885)(type-csdn)(url-https://live.csdn.net/v/embed/363377)(image-https://video-community.csdnimg.cn/vod-84deb4/c081b734c65771eebfc75107e0c90102/snapshots/30ac3b013e614616acee7f99e6fb8966-00001.jpg?auth_key=4860978840-0-0-cd408bf2baf8502e95ab217e3631d573)(title-)]

@Entry
@Component
struct MainPage {
   
  @State targetData: Array<TaskItemBean> = DataModel.getData();
  @State totalTasksNumber: number = 0;
  @State completedTasksNumber: number = 0;
  @State latestUpdateDate: string = CommonConstants.DEFAULT_PROGRESS_VALUE;
  @Provide @Watch('onProgressChanged') overAllProgressChanged: boolean = false;
  dialogController: CustomDialogController = new CustomDialogController({
   
    ...
  });

  /**
   * Listening targetData.
   */
  onProgressChanged() {
   
    this.totalTasksNumber = this.targetData.length;
    this.completedTasksNumber = this.targetData.filter((item: TaskItemBean) => {
   
      return item.progressValue === CommonConstants.SLIDER_MAX_VALUE;
    }).length;
    this.latestUpdateDate = getCurrentTime();
  }

  build() {
   
    Column() {
   
      ...
      TargetInformation({
   
        latestUpdateDate: this.latestUpdateDate,
        totalTasksNumber: this.totalTasksNumber,
        completedTasksNumber: this.completedTasksNumber
      })
      ...
    }
    .width(CommonConstants.FULL_WIDTH)
    .height(CommonConstants.FULL_HEIGHT)
    .backgroundColor($r('app.color.index_background'))
  }
  • 本codelab中,使用@Provide装饰器定义变量(@Provide是跨代组件同步,可以在HarmonyOS基础(四)- HarmonyOS ArkTs 组件状态查看详细说明)overAllProgressChanged,并使用@Watch监听当前变量。
  • onProgressChanged是我们自定义函数,子目标进度完成并确认后。触发当前自定义函数,并赋值给变量。
  • 然后更新我们TargetInformation组件的整体进度状态。

参考:

ArkUI指南
ArkTS-API文档
HarmonyOS基础认证课程
HarmonyOS高级认证课程

​​

总结:

@Watch 装饰器和@State、@Prop、@Link是 ArkTS 框架中最基本也是最关键状态管理修饰符,通过它们的灵活运用,能够更好地处理组件之间状态的变化和同步。实际应用中,建议开发者灵活选择使用针对不同场景,并结合codeLabs和项目,以提高应用的性能和可维护性。 ArkTS 的状态管理机制为开发者提供了丰富的选择,对构建复杂应用变得更加简便与高效。

ArkTs的@Watch等状态修饰符为开发这提供组件变量管理的灵活性和控制性,对初步掌握HarmonyOS开发提供了可以精确监听状态变量的能力。在实际项目组件中极大提升代码的低耦合高内聚的能力和可维护性、高效力能力。实际开发中,也能发挥ArkTS的优势,构建强大的一次开发,多段部署的物联网应用。

相关文章
Arkts http数据请求
Arkts http数据请求
683 0
|
9月前
|
编解码
四、ArkTS 常用组件-图片(Image)
ArkTS 常用组件-图片(Image)简介:Image 组件用于在应用中显示图片,支持本地和网络图片的加载,提供了多种参数类型如 string、Resource 和 media.PixelMap。常用属性包括图片尺寸设置(width()、height())、图片缩放模式(objectFit())及图片插值(interpolation()),确保图片在不同场景下的最佳显示效果。此外,Image 组件还支持图片资源的灵活引用方式,如通过 $r() 函数引用 resources 目录下的图片资源。
743 2
|
人工智能 自然语言处理 API
阿里云百炼产品月刊【2025年3月】
2025年3月的阿⾥云百炼平台月刊突出展示了其在AI模型和服务上的显著进展。本期亮点包括推出了多个先进的多模态模型,如qwen2.5-omni-7b和视觉推理模型qvq-max系列,大幅提升了文本、图像、语音和视频的处理能力,并降低了计算成本。此外,平台引入了精准的语音识别和翻译模型gummy-realtime-v1及gummy-chat-v1,支持多语言实时交互。为了促进应用开发,阿里云百炼平台还发布了开源推理模型qwq-32b,以及一系列优化的智能体应用模型,增强了自动化和交互性。最后,通过新增周边查询插件和基于MCP的析⾔服务,进一步扩展了平台的功能和服务范围。
793 8
|
6月前
|
资源调度 前端开发 算法
鸿蒙OS架构设计探秘:从分层设计到多端部署
本文深入探讨了鸿蒙OS的架构设计,从独特的“1+8+N”分层架构到模块化设计,再到智慧分发和多端部署能力。分层架构让系统更灵活,模块化设计通过Ability机制实现跨设备一致性,智慧分发优化资源调度,多端部署提升开发效率。作者结合实际代码示例,分享了开发中的实践经验,并指出生态建设是未来的关键挑战。作为国产操作系统的代表,鸿蒙的发展值得每一位开发者关注与支持。
|
6月前
|
人工智能 Java 程序员
一文彻底拿下@State和@Prop和@Link的区别和联系
程序员Feri,12年+开发经验,专注于Java、嵌入式、鸿蒙、AI等领域,助力程序员成长。本文详解HarmonyOS装饰器:@State用于组件内部状态管理,状态变化触发重渲染;@Prop实现父组件向子组件单向数据传递,数据只读;@Link支持双向绑定,父子组件共享数据。掌握这些特性,让开发更高效!
309 8
一文彻底拿下@State和@Prop和@Link的区别和联系
|
6月前
|
前端开发 API 开发者
harmonyOS基础- 快速弄懂HarmonyOS ArkTs基础组件、布局容器(前端视角篇)
本文由黑臂麒麟(6年前端经验)撰写,介绍ArkTS开发中的常用基础组件与布局组件。基础组件包括Text、Image、Button等,支持样式设置如字体颜色、大小和加粗等,并可通过Resource资源引用统一管理样式。布局组件涵盖Column、Row、List、Grid和Tabs等,支持灵活的主轴与交叉轴对齐方式、分割线设置及滚动事件监听。同时,Tabs组件可实现自定义样式与页签切换功能。内容结合代码示例,适合初学者快速上手ArkTS开发。参考华为开发者联盟官网基础课程。
458 75
harmonyOS基础- 快速弄懂HarmonyOS ArkTs基础组件、布局容器(前端视角篇)
|
10月前
|
UED 开发者 容器
鸿蒙next版开发:ArkTS组件通用属性(位置设置)
在HarmonyOS next中,ArkTS提供了align、direction、position、markAnchor、offset和alignRules等通用属性,用于精确控制组件在用户界面中的位置和布局。本文详细解读了这些属性,并提供了示例代码进行说明。通过这些属性,开发者可以实现精确布局、动态界面调整和提升用户体验。
1311 6
|
6月前
|
前端开发 JavaScript 调度
harmonyOS基础-认识UIAbility
本文介绍了UIAbility的概念、页面跳转与数据传递、生命周期以及启动模式。UIAbility是包含用户界面的应用组件,用于与用户交互,支持单实例、多实例和指定实例三种模式。文章详细解析了页面跳转方法(如`pushUrl`和`replaceUrl`)、参数传递及返回逻辑,并深入探讨了UIAbility的生命周期回调(如`onCreate`、`onForeground`等)。通过合理配置启动模式和生命周期管理,开发者可优化应用性能与用户体验。
409 24
|
6月前
|
移动开发 JavaScript API
HarmonyOS Next 简单上手元服务开发
本文介绍了 HarmonyOS Next 中元服务的开发流程与关键特性。元服务是一种轻量级应用程序形态,支持免安装、秒开直达,适用于听音乐、打车等场景,大幅提升服务获取效率。文章详细讲解了元服务的开发旅程,包括在 AGC 平台上新建项目、修改名称与图标、新增卡片等内容,并提供了代码示例,如 AtomicServiceTabs 的 tab 切换和标题设置、AtomicServiceNavigation 的路由管理等。此外,还探讨了 AtomicServiceWeb 的使用方法,涵盖鸿蒙页面与 h5 页面的数据传递及方法调用。
363 20
HarmonyOS Next 简单上手元服务开发
|
6月前
|
传感器 JavaScript 调度
HarmonyOS Next 并发 taskpool 和 worker
HarmonyOS Next 提供了 TaskPool 和 Worker 两种并发能力,基于 Actor 并发模型实现。TaskPool 是 Worker 的封装,支持参数直接传递、返回数据接收、任务优先级设置及取消功能,适合大多数场景;Worker 则适用于超长任务或需手动管理线程生命周期的场景。两者通过消息通信完成跨线程数据交换,支持普通对象拷贝、ArrayBuffer 拷贝/转移、SharedArrayBuffer 共享及 Sendable 引用传递等方式。实际开发中,TaskPool 更简化任务调度,而 Worker 更灵活,可根据任务类型(耗时、长时、常驻)选择合适方案。
228 12
HarmonyOS Next 并发 taskpool 和 worker