企业培训网站建设广州市建设交易中心

State装饰器，

State装饰的变量，称为状态变量，与声明式范式中的其他被装饰变量一样，是私有的，只能从组件内部访问，在声明时，必须指定其类型和本地初始化。

Provide装饰器和@Consume装饰器，

其中@provide装饰的变量是在祖先节点中，可以理解为被‘提供’给后代的状态变量。@Consume装饰的变量是在后代组件中，去绑定祖先节点提供的变量。
@Provide和@Consume可以通过相同的变量名或者相同的变量别名绑定，变量类型必须相同

// 通过相同的变量名绑定
@Provide a: number = 0;
@Consume a: number;// 通过相同的变量别名绑定
@Provide('a') b: number = 0;
@Consume('a') c: number;

实例

// 孙组件
@Component
struct CountDownComponentB {@Consume count: number;build() {Column() {Text(`这是孙组件的值：${this.count}，改变会影响到父组件。`)Row(){Button(`+1`).onClick(() => {this.count += 1})Button(`-1`).onClick(() => {this.count -= 1})}.justifyContent(FlexAlign.SpaceEvenly).width("100%")}}
}// 子组件
@Component
struct CountDownComponentA {build() {Column() {// 孙组件CountDownComponentB()}}
}// 父组件
@Entry
@Component
struct ParentComponent {@Provide count: number = 10;build() {Column() {Text(`这是父组件的值：${this.count}，改变会传给孙组件。`)Row(){Button(`+1`).onClick(() => {this.count += 1;})Button(`-1`).onClick(() => {this.count -= 1;})}.justifyContent(FlexAlign.SpaceEvenly).width("100%")// 子组件CountDownComponentA()}}
}

watch装饰器:状态变量更改通知

@watch应用于对状态变量的监听。如果开发者需要关注某个状态变量的值是否改变，可以使用@watch为状态变量设置回调函数
当状态变量变化时，@watch回调方法将被调用。@watch在ARKUI框架内吧判断数值有无更新，使用的是严格相等===,当在严格相等为false的情况下，就会触发@watch的回调。

@watch可用于购物车计算总价，或者实现计算器功能等
（ChangedPropertyName?:string）=>void

建议开发者避免无限循环。循环可能是因为在@watch的回调方法里面直接或者间接地修改了同一个状态变量引起的，未来避免循环的产生，建议不要在@watch的回调方法里修改当前装饰的状态变量
/*

• @Watch 修饰 状态数据
• 函数中，不要修改被监视的状态变量。 我们要操作的是其他的业务逻辑
• */
  @Entry
  @Component
  struct WatchDct {
  @State @Watch(‘change’) count: number = 1
  @State @Watch(‘change’) pow: number = 2
  @State res: number = 1

change() {
this.res = Math.pow(this.count, this.pow)
}

build() {
Row() {
Column() {
Text(‘基数：’ + this.count)
.fontSize(50)
.onClick(() => {
this.count++
})

    Divider()Text(`次幂：${this.pow}`).fontSize(50).onClick(() => {this.pow++})Divider()Text("结果：" + this.res).fontSize(50)}.width('100%')
}
.height('100%')

}
}