你是不是也在想——“鸿蒙这么火，我能不能学会？”
答案是：当然可以！
这个专栏专为零基础小白设计，不需要编程基础，也不需要懂原理、背术语。我们会用最通俗易懂的语言、最贴近生活的案例，手把手带你从安装开发工具开始，一步步学会开发自己的鸿蒙应用。
不管你是学生、上班族、打算转行，还是单纯对技术感兴趣，只要你愿意花一点时间，就能在这里搞懂鸿蒙开发，并做出属于自己的App！
📌 关注本专栏《零基础学鸿蒙开发》，一起变强！
每一节内容我都会持续更新，配图+代码+解释全都有，欢迎点个关注，不走丢，我是小白酷爱学习，我们一起上路 🚀

前言

在 HarmonyOS 中，@Watch 是一个用于观察和响应数据变化的装饰器，类似于 Vue.js 中的 watch 功能。它允许开发者在数据变化时自动执行某些逻辑，简化了响应式编程和数据变化的处理。

1. @Watch 的使用场景

1.1 监听数据变化

@Watch 装饰器用于监听类中数据属性的变化，触发特定的处理逻辑。这在开发中非常常见，尤其是在需要根据数据变化动态更新界面或执行某些操作时。

示例：监听数据变化

import { Watch, Component } from '@ohos.ace';

@Component
export default class WatchExample {
  count: number = 0;

  @Watch('count')
  onCountChange(newValue: number, oldValue: number) {
    console.log(`Count changed from ${oldValue} to ${newValue}`);
    // 数据变化时执行的逻辑
  }

  increment() {
    this.count++;
  }
}

在这个示例中，@Watch('count') 监听 count 数据的变化，每次 count 改变时，onCountChange 方法会被调用。在 onCountChange 方法中，可以根据 newValue 和 oldValue 来执行相应的逻辑。

1.2 响应式逻辑

@Watch 常用于需要响应式处理的场景。比如当某个值发生变化时，自动触发某些操作（例如发送网络请求、更新 UI、记录日志等）。

示例：监听多个数据属性

import { Watch, Component } from '@ohos.ace';

@Component
export default class MultiWatchExample {
  name: string = '';
  age: number = 0;

  @Watch('name')
  onNameChange(newValue: string, oldValue: string) {
    console.log(`Name changed from ${oldValue} to ${newValue}`);
  }

  @Watch('age')
  onAgeChange(newValue: number, oldValue: number) {
    console.log(`Age changed from ${oldValue} to ${newValue}`);
  }

  updateName(newName: string) {
    this.name = newName;
  }

  updateAge(newAge: number) {
    this.age = newAge;
  }
}

在这个例子中，@Watch 被用来监听 name 和 age 两个数据属性的变化。每当其中一个属性变化时，都会触发相应的钩子方法。

1.3 用于触发视图更新

当数据变化时，@Watch 可以触发视图更新、重新渲染或重新计算某些值。在 HarmonyOS 中，@Watch 可以与视图更新机制配合使用，以保证 UI 根据数据变化自动更新。

1.4 与异步操作的结合

在某些情况下，@Watch 用于处理异步操作，如发起网络请求或延时操作。当某个数据变化时，可以使用 @Watch 来自动调用异步方法，减少代码的冗余。

示例：结合异步操作

import { Watch, Component } from '@ohos.ace';

@Component
export default class WatchAsyncExample {
  username: string = '';

  @Watch('username')
  async onUsernameChange(newValue: string, oldValue: string) {
    console.log(`Username changed from ${oldValue} to ${newValue}`);
    const userInfo = await this.fetchUserInfo(newValue);
    console.log('User Info:', userInfo);
  }

  async fetchUserInfo(username: string) {
    // 模拟异步请求
    return new Promise(resolve => setTimeout(() => resolve({ username, age: 25 }), 1000));
  }

  updateUsername(newName: string) {
    this.username = newName;
  }
}

在这个示例中，每当 username 数据变化时，onUsernameChange 会被调用，并执行异步操作（如发起网络请求）。

2. 与 Vue 中的 watch 的不同

2.1 使用方式的不同

• Vue 的 watch：在 Vue 中，watch 用来观察组件中的数据属性或计算属性的变化。当数据变化时，执行指定的回调函数。在 Vue 中，watch 是在组件实例上定义的一个选项，而不是装饰器。

// Vue 示例
export default {
  data() {
    return { count: 0 };
  },
  watch: {
    count(newValue, oldValue) {
      console.log(`Count changed from ${oldValue} to ${newValue}`);
    }
  }
};

在 Vue 中，watch 是一个对象，它可以监听多个数据属性，并为每个属性定义单独的回调函数。

• ArkTS 的 @Watch：在 ArkTS 中，@Watch 是一个装饰器，用于类中的数据属性。当数据变化时，自动调用相关方法。这种方式更符合 TypeScript 的装饰器模式，提供了更清晰的语法。

import { Watch, Component } from '@ohos.ace';

@Component
export default class WatchExample {
  count: number = 0;

  @Watch('count')
  onCountChange(newValue: number, oldValue: number) {
    console.log(`Count changed from ${oldValue} to ${newValue}`);
  }
}

2.2 响应式机制的不同

• Vue 的响应式系统：Vue 使用 Object.defineProperty 或 Vue 3 使用 Proxy 来实现数据的响应式。在 Vue 中，当数据变化时，watch 监听器会自动触发，更新组件的视图或执行其他逻辑。

• ArkTS 的响应式机制：ArkTS 使用类似的响应式机制，但它的实现更加紧密地与 HarmonyOS 的组件系统和分布式架构相结合。@Watch 装饰器直接与 ArkTS 的响应式数据绑定机制配合工作，触发方法时，通常还涉及到与设备间分布式协作的背景。

2.3 适用的开发框架不同

• Vue：watch 主要用于 Vue 的前端框架，用于监听组件的数据变化，通常用于用户界面更新和状态管理。

• ArkTS：@Watch 是在 HarmonyOS 的组件框架中使用的，支持跨设备、多场景的数据绑定和变化监听。在 HarmonyOS 中，@Watch 主要用于响应数据变化并协调多设备或跨设备的交互。

3. 总结

@Watch 的使用场景：

• 数据变化监听：当需要监听某个数据属性或计算属性的变化时，使用 @Watch 可以自动触发相应的处理逻辑。
• 视图更新：当数据发生变化时，需要更新视图或执行其他处理操作时，使用 @Watch 可以简化代码结构。
• 异步操作：@Watch 可以用于异步操作，如发起网络请求、数据处理等任务。

与 Vue 中 watch 的区别：

• 语法和使用方式：Vue 的 watch 是一个选项，通常用于组件中，而 ArkTS 的 @Watch 是装饰器，适用于类的数据属性。
• 响应式系统的集成：Vue 使用 Proxy 或 Object.defineProperty 实现响应式，而 ArkTS 的响应式系统与 HarmonyOS 的分布式架构和组件化结构紧密结合。
• 适用的开发框架：Vue 的 watch 适用于 Vue 应用，而 ArkTS 的 @Watch 主要用于 HarmonyOS 中的应用开发。

通过这两者的对比，可以看出它们各自在不同框架中的作用和实现方式，开发者可以根据具体的开发需求选择适合的响应式处理方式。

❤️ 如果本文帮到了你…

• 请点个赞，让我知道你还在坚持阅读技术长文！
• 请收藏本文，因为你以后一定还会用上！
• 如果你在学习过程中遇到bug，请留言，我帮你踩坑！