OpenHarmony ETS 类状态 @Watch图文示例秒懂用法 原创 精华

往前系列文章：

简单的变量传值：OpenHarmony ETS 状态变量(@State，@Prop，@Link) 图文秒懂用法-OpenHarmony技术社区-51CTO.COM

跨组件传值：OpenHarmony ETS 类状态 @Consume和@Provide 图文示例秒懂用法-OpenHarmony技术社区-51CTO.COM

类嵌套类：OpenHarmony ETS 类状态@Observed和@ObjectLink图文示例秒懂用法-OpenHarmony技术社区-51CTO.COM

若数据改变我们要做额外的处理时，可以用到@Watch标记

@Watch

• 应用可以注册回调方法。当一个被@State, @Prop, @Link, @ObjectLink, @Provide, @Consume, @StorageProp, 以及 @StorageLink中任意一个装饰器修饰的变量改变时，均可触发此回调。@Watch中的变量一定要使用（“”）进行包装。
  *测试@StorageLink时发现，@Watch不起作用。

1，@State

@Component
struct ChildWatchState {
  @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;
    });
    this.totalPurchase = (sum < 100) ? sum : 0.9 * sum;
    return this.totalPurchase;
  }

  onBasketUpdated(): void {
    this.updateTotal();
  }

  build() {
    Column() {
      Text('@State @Watch').fontSize(24)
      Button(`add 2 Array`).fontSize(24)
        .onClick(() => {
          this.shopBasket.push(Math.round(100 * Math.random()))
        })

      Text(`数组和:${this.totalPurchase}`).fontSize(30)
    }
  }
}

2，@Prop

@Component
struct ChildWatchProp {
  @Prop @Watch("onPropWatch") count: number ;
  @State onPropWatchCount: number = 0;

  onPropWatch(): void {
    console.log("onPropWatch:" + this.onPropWatchCount)
    this.onPropWatchCount += 1
  }

  build() {
    Column() {
      Text('@Prop @Watch').fontSize(24)

      Button(`点击count+1`).fontSize(24)
        .onClick(() => {
          this.count += 1
        })
      Text(`onPropWatch触发:${this.onPropWatchCount}`).fontSize(30)
    }.width('100%')
    .margin({ top: 10 })
  }
}

3，@Link

@Component
struct ChildWatchLink{
  @Link @Watch("onLinkWatch") count: number ;
  @State onLinkWatchCount: number = 0;

  onLinkWatch(): void {
    console.log("onLinkWatch:" + this.onLinkWatchCount)
    this.onLinkWatchCount += 1
  }

  build() {
    Column() {
      Text('@Link @Watch').fontSize(24)

      Button(`点击count+1`).fontSize(24)
        .onClick(() => {
          this.count += 1
        })
      Text(`onLinkWatch触发:${this.onLinkWatchCount}`).fontSize(30)
    }.width('100%')
    .margin({ top: 10 })
  }
}

4，@Consume

@Component
struct ChildWatchConsume {
  @Consume('name1') @Watch("onConsumeWatch") name: string ;
  @State onConsumeWatchCount: number = 0;

  onConsumeWatch(): void {
    console.log("onConsumeWatch:" + this.onConsumeWatchCount)
    this.onConsumeWatchCount += 1
  }

  build() {
    Column() {
      Text('@Consume @Watch').fontSize(24)

      Text(`${this.name}`).fontSize(24)

      Button(`点击count+1`).fontSize(24)
        .onClick(() => {
          this.name = this.name + "s"
        })
      Text(`onConsumeWatch触发:${this.onConsumeWatchCount}`).fontSize(30)
    }.width('100%')
    .margin({ top: 10 })
  }
}

entry 代码

@Entry
@Component
struct CompA {
  @State testCount: number = 0;
  @Provide('name1') name: string = "纳米";

  build() {
    Column() {
      Text(' 被@State, @Prop, @Link, @ObjectLink, @Provide, @Consume, @StorageProp, ' +
      '以及 @StorageLink中任意一个装饰器修饰的变量改变时，均可触发此回调').fontSize(24).fontColor('#FF0000')

      ChildWatchState()

      ChildWatchProp({ count: 1 })

      ChildWatchLink({ count: $testCount });

      ChildWatchConsume();

    }
  }
}

5，总结

• @State @Watch(“onBasketUpdated”) shopBasket: Array<number> = [7, 12, 47, 3];
• @Prop @Watch(“onPropWatch”) count: number ;