源码 https://github.com/webabcd/HarmonyDemo
作者 webabcd
开天辟地 HarmonyOS(鸿蒙) - 状态管理: @Require, @Watch, @Track, $$
示例如下:
pages\state\WatchDemo.ets
/** @Require - 用于说明在构造组件的时候必须要传参，支持无装饰变量，以及 @Prop, @State, @Provide, @BuilderParam 装饰的变量* @Watch - 用于为 @State, @Prop, @Link 装饰的状态变量指定变化后的回调函数* @Track - 用于让对象的指定的属性变化后触发相关 UI 的更新（同对象的其他属性的变化不会触发相关 UI 的更新）* $$ - 用于为部分内置组件提供数据的双向同步功能*/import { TitleBar } from '../TitleBar';@Component
struct MyComponent {// 通过 @Watch('xxx') 为状态变量指定名为 xxx 的回调函数@Require @Prop @Watch('onCountUpdated') count: number;@State total: number = 0;// 通过 @Watch('onCountUpdated') 指定的名为 onCountUpdated 的回调函数onCountUpdated(propName: string): void {this.total += this.count;}build() {Text(`total: ${this.total}`)}
}class Person {// 因为 name 有 @Track 装饰，所以 name 的变化会刷新绑定了此对象的组件（当然，前提是你的相关的对象需要是一个 @State 之类的状态变量）// 注：如果整个类都没有 @Track 装饰器，则所有属性的变化都会刷新绑定了此对象的组件@Track name: string;// 当前类其他属性有 @Track 装饰，但是这个 age 没有 @Track 装饰，所以 age 的变化不会刷新绑定了此对象的组件// 注：这种情况下 age 是不能显示到 UI 上的，否则会出现异常age: number;constructor(name: string, age: number) {this.name = name;this.age = age;}
}@Entry
@Component
struct WatchDemo {@State count: number = 0;@State person: Person = new Person('webabcd', 44);@State text: string = 'abc'build() {Column({ space: 10 }) {TitleBar()Text(`count: ${this.count}`)MyComponent({count: this.count})Button('演示 @Watch').onClick(() => {this.count++})Divider()Text(`${this.person.name}`)Button('演示 @Track').onClick(() => {this.person.name = "wanglei"})Divider()Text(this.text)// 通过 $$ 为 TextInput 组件的 text 属性提供数据的双向同步功能// 注：只有部分组件的部分属性才支持此功能，比如 Checkbox 的 select 属性，Slider 的 value 属性等，详见各个组件的相关文档TextInput({text: $$this.text,})}}
}
源码 https://github.com/webabcd/HarmonyDemo
作者 webabcd
