开源鸿蒙 @Watch

  • 2022-08-09
  • 浏览 (608)

@Watch

@Watch用于监听状态变量的变化,语法结构为:

@State @Watch("onChanged") count : number = 0

如上给状态变量增加一个@Watch装饰器,通过@Watch注册一个回调方法onChanged, 当状态变量count被改变时, 触发onChanged回调。

装饰器@State、@Prop、@Link、@ObjectLink、@Provide、@Consume、@StorageProp以及@StorageLink装饰的变量可以监听其变化。

// xxx.ets
@Entry
@Component
struct CompA {
    @State @Watch("onBasketUpdated") shopBasket : Array<number> = [ 7, 12, 47, 3 ];
    @State totalPurchase : number = 0;

    updateTotal() : number {
        let sum = 0;
        this.shopBasket.forEach((i) => { sum += i; });
        // 计算新的购物篮总价值,如果超过100RMB,则适用折扣
        this.totalPurchase = (sum < 100) ? sum : 0.9 * sum;
        return this.totalPurchase;
    }

    // @Watch cb
    onBasketUpdated(propName: string) : void {
      this.updateTotal();
    }

    build() {
        Column() {
            Button("add to basket").onClick(() => { this.shopBasket.push(Math.round(100 * Math.random())) })
            Text(`${this.totalPurchase}`)
                .fontSize(30)
        }
    }
}

你可能感兴趣的文章

开源鸿蒙 UI开发

开源鸿蒙 方舟开发框架概述

开源鸿蒙 文件组织

开源鸿蒙 app.js

开源鸿蒙 js标签配置

开源鸿蒙 生命周期

开源鸿蒙 多语言支持

开源鸿蒙 资源限定与访问

开源鸿蒙 CSS语法参考

开源鸿蒙 HML语法参考

0  赞