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

@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)
    }
  }
}
1.
2.
3.
4.
5.
6.
7.
8.
9.
10.
11.
12.
13.
14.
15.
16.
17.
18.
19.
20.
21.
22.
23.
24.
25.
26.
27.
28.
29.
30.

@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 })
  }
}

1.
2.
3.
4.
5.
6.
7.
8.
9.
10.
11.
12.
13.
14.
15.
16.
17.
18.
19.
20.
21.
22.
23.
24.

@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 })
  }
}
1.
2.
3.
4.
5.
6.
7.
8.
9.
10.
11.
12.
13.
14.
15.
16.
17.
18.
19.
20.
21.
22.
23.

@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 })
  }
}
1.
2.
3.
4.
5.
6.
7.
8.
9.
10.
11.
12.
13.
14.
15.
16.
17.
18.
19.
20.
21.
22.
23.
24.
25.

@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();

    }
  }
}
1.
2.
3.
4.
5.
6.
7.
8.
9.
10.
11.
12.
13.
14.
15.
16.
17.
18.
19.
20.
21.
22.