0
点赞
收藏
分享

微信扫一扫

99天梭哈HarmonyOS到入职-第一天- ArkTs到@Watch状态监听

@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配合使用

99天梭哈HarmonyOS到入职-第一天- ArkTs到@Watch状态监听_ArkUI

// 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的优势,构建强大的一次开发,多段部署的物联网应用。

举报

相关推荐

0 条评论