ArkTS @watch装饰器的用法（附带实例）

有这样一个场景，当一个变量发生变化时，页面中的某个元素会动态地显示与隐藏。在这种情况下，就需要对这个变量进行监听，也就是需要使用本节将要介绍的另一个装饰器 @Watch。

@Watch 装饰器用于监视某个表达式的变化，当表达式的值发生变化时，可以执行特定的逻辑操作。

@Watch 装饰器的特性如下：

@Watch 装饰器用于监听状态变量变化并执行回调。
装饰器参数必须是对 (string) => void 类型函数的引用。
@Watch 适用于所有被装饰器标记的状态变量，不包括常规变量。
推荐先使用 @State、@Prop、@Link 等装饰器，再使用 @Watch。

在下面的案例中，用 @Watch 装饰器装饰父组件传过来的变量 hasShow，并定义函数 handleChange，当监听的数据发生变化时，handleChange 函数就会被触发。因此，我们可以在这里进行一些相关的操作，如下图所示：

图 1 @watch 的使用

完整代码如下：

// 定义一个名为 Demo1_3_6Watch 的组件，用于展示状态监听和子组件更新
@Entry
@Component
struct Demo1_3_6Watch {
  // 定义一个名为 hasShow 的状态变量，初始值为 true
  @State hasShow: boolean = true;

  // 构建组件的方法
  build() {
    Column() {
      // 创建一个按钮，单击该按钮时修改 hasShow 的值
      Button('修改 hasShow 状态')
        .onClick(() => {
          this.hasShow = !this.hasShow;
        })

      // 创建一个 ChildWatch 组件，并将 hasShow 作为 props 传递给它
      ChildWatch({ hasShow: this.hasShow })
    }
    .width('100%')
    .height('100%');
  }
}

// 定义一个名为 ChildWatch 的组件，用于监听父组件传递过来的 props 的变化
@Component
struct ChildWatch {
  // 定义一个名为 hasShow 的 props，并监听它的值的变化
  @Prop @Watch('handleChange') hasShow: boolean = true;

  // 定义一个名为 childCom 的状态变量，初始值为 true
  @State childCom: boolean = true;

  // 当 hasShow 发生变化时调用的方法
  handleChange(): void {
    this.childCom = this.hasShow;
  }

  // 构建组件的方法
  build() {
    Column() {
      // 显示当前监听的值
      Text(`当前监听的值是：${this.hasShow}`);
      if (this.childCom) {
        // 如果 childCom 为 true，则显示子组件的内容
        Text('这是子组件的内容');
      }
    }
  }
}

ArkTS @watch装饰器的用法（附带实例）

相关文章