@Watch 装饰器与状态更新的正确姿势

在 HarmonyOS NEXT 的 ArkTS 声明式 UI 开发中，状态驱动视图是核心机制。然而，很多开发者在处理“状态变化后需要执行额外逻辑”（例如：搜索词改变时发起网络请求、滑块拖动时更新图表）时，往往会陷入误区。

为什么不建议在 build() 中写逻辑？

在 ArkTS 的 build() 函数中，我们只应该声明 UI 长什么样。build() 是一个高频调用的渲染函数，如果在里面写入网络请求或数据库查询等耗时操作，会导致严重的性能问题，甚至引发死循环。正确的做法是：将“状态变化”与“业务逻辑”解耦。

@Watch 装饰器的核心用法

@Watch 是 ArkTS 提供的一个状态监听装饰器，专门用于监听被 @State、@Prop 等装饰的变量变化。当变量被重新赋值时，它会自动触发绑定的回调函数。

@Component
struct SearchBar {
  @State @Watch('onKeywordChange') keyword: string = '';
  
  onKeywordChange() {
    // 防抖处理：避免每次按键都触发请求
    if (this.keyword.length > 0) {
      this.fetchSearchResults(this.keyword);
    }
  }
  
  build() {
    TextInput({ placeholder: '请输入搜索内容', text: this.keyword })
      .onChange((value: string) => {
        this.keyword = value; // 触发 @Watch
      })
  }
}

必须注意的三大陷阱

1. 同名回调陷阱：@Watch('onKeywordChange') 中的字符串必须与当前组件内定义的方法名完全一致。如果方法名写错，系统不会报错，但监听将静默失效。
2. 赋值触发机制：@Watch 只有在变量被重新赋值时才会触发。对于复杂对象（如数组或嵌套对象），如果只修改了内部属性而没有重新赋值整个对象，@Watch 不会生效。此时需要使用 @Observed 和 @ObjectLink，或者使用 V2 版本的 @ObservedV2。
3. 同步执行陷阱：@Watch 绑定的回调函数是同步执行的。如果在回调中执行耗时操作（如大文件读取、复杂计算），会直接阻塞主线程，导致 UI 掉帧。耗时任务应通过 taskpool 或 worker 异步处理。