组件状态关联

• @State: 组件内状态管理

• @Prop: 从父组件单向同步状态

• @Link: 与父组件双向同步状态

提示

• @Link装饰器不能在@Entry装饰的自定义组件中使用。
• @Link只能接收父组件里声明的第一层成员变量
• 语法： 父组件声明 @State parentField: <类型> = '默认值'
  使用：{childFiedl: $parentField }
  子组件声明： @Link childFiedl: <类型>

• @Provide和 @Consume: 跨层级双向同步状态

提示

• 通过相同的变量名绑定 @Provide a: number = 0; @Consume a: number;

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

• @Watch装饰器： 监听状态变量通知

上述四种只能观察到对象的第一层属性变化 @Watch应用于对状态变量的监听：观察嵌套对象属性变化，需要使用@Observed和@ObjectLink装饰器，当状态变化时，需要对状态变化进行监听做一些相应的操作时，可以使用@Watch为状态变量设置回调函数。 当状态变量变化时，@Watch的回调方法将被调用。@Watch在ArkUI框架内部判断数值有无更新使用的是严格相等（===），遵循严格相等规范。当在严格相等为false的情况下，就会触发@Watch的回调。 @Watch可用于购物车计算总价，或者实现计算器功能等。

@State @Watch('change') num: number = 1;
@State @Watch('change') pow: number = 2;
change() {
  this.total = Math.pow(this.num, this.pow)
}

// @Observed和@ObjectLink

提示

• 避免无限循环。循环可能是因为在@Watch的回调方法里直接或者间接地修改了同一个状态变量引起的。
• 关注性能，属性值更新函数会延迟组件的重新渲染（具体请见上面的行为表现），因此，回调函数应仅执行快速运算；
• 不建议在@Watch函数中调用async await，因为@Watch设计的用途是为了快速的计算，异步行为可能会导致重新渲染速度的性能问题。

页面状态管理

• LocalStorage: 页面级 UI状态存储，通常用于UIAbility内，页面间状态共享
  • @LocalStorageProp：@LocalStorageProp装饰的变量和与LocalStorage中给定属性建立单向同步关系。
  • @LocalStorageLink：@LocalStorageLink装饰的变量和在@Component中创建与LocalStorage中给定属性建立双向同步关系。
• AppStorage：特殊的单例LocalStorage对象，由UI框架在应用程序启动时创建，为应用程序ui状态提供中央存储, 是应用级的数据库
  • AppStorage.SetOrCreate('propsKey', value)
• PersistentStorage: 持久化存储UI状态，通常和AppStorage 配合使用，选择 AppStorage 存储写入磁盘，确认这些属性在应用程序重新启动时的值与应用程序关闭时值相同
• Environment：应用程序允许时的设备环境参数，环境参数会同步到AppStorage中，可以和AppStorage 搭配使用，所有属性都是不可变的，所有属性都是简单类型。

其他

• $$运算符：给内置组件（当前$$仅支持Refresh组件的refreshing参数。）提供TS变量的引用，使得TS变量和内置组件的内装状态保持同步。