前言
希望构建一个动态的、有交互的界面,就需要引入“状态”的概念。数据状态变化会触发UI刷新,UI状态变化会触发数据改变。
- 状态变量:被状态装饰器装饰的变量,状态变量值的改变会引起UI的渲染更新。示例:@State num: number = 1,其中,@State是状态装饰器,num是状态变量。
- 常规变量:没有被状态装饰器装饰的变量,通常应用于辅助计算。它的改变永远不会引起UI的刷新。示例private increaseBy: number = 1;
普通状态装饰器
| 状态 | 同步范围 | 本地初始化 |
|---|---|---|
| @State | 组件内部 | 必须本地初始化 |
| @Prop | 父子单向同步 | 允许本地初始化 |
| @Link | 父子双向同步 | 禁止本地初始化 |
| @Provide+@Consume | 多个层级之间双向同步 | @Provide:必须本地初始化 @Consume:禁止本地初始化 |
特殊状态装饰器
| 状态 | 同步范围 | 本地初始化 |
|---|---|---|
| @Observed+@ObjectLink | 可观察到嵌套类的变化 | @ObjectLink不允许 |
普通状态种类器仅能观察到第一层的变化,但是在实际应用开发中,应用会根据开发需要,封装自己的数据模型。对于多层嵌套的情况,比如二维数组,或者数组项class,或者class的属性是class,他们的第二层的属性变化是无法观察到的。这就需要使用@Observed/@ObjectLink装饰器。