目录

1、基础UI组件结构

2、基础ui装饰器

@Entry

@Component

数据装饰器@State、@Prop、@Link

@State

@Prop

@Link

三个装饰器的相同点

三个装饰器的不同点

 3、@Provide、@Consume

4、@Watch

1、基础UI组件结构

每个UI组件需要定义为@Component struct对象。

其内部必须包含一个且只能包含一个build(){}函数，用于绘制UI；

struct之内、build()函数之外的地方用于存放数据。

@Component struct SampleUIComponent { // data build() { // ui } }

2、基础ui装饰器

@Entry

装饰struct，页面的入口。

@Component

装饰struct，表示该struct具有基于组件的能力。

数据装饰器@State、@Prop、@Link

@State

当该数据被修改时，所在组件的build()方法会被重新调用，进而重绘所在的UI。该装饰器的作用范围仅限于其所在的UI内部。

@Prop

该组件继承了@State的基本功能，同时，又有两个新的特点：

1. 能被其父控件的@State变量初始化（假设为a）。

2. 与其父组件建立其单向联系：监其听父组件中的变量a，当a的值发生变化时，该@Prop也会同步变化，进而重绘其所在控件的UI。

@Link

与@Prop不同的是，@Link会与其父控件中对应的@State变化建立双向联系，即当子组件中的@Link对象的之发生变化时，其父组件中对应的@State变量也会随之变化，这个时候父子UI都会重绘。

三个装饰器的相同点

1. 会引起ui重绘
2. 内部私有

三个装饰器的不同点

 3、@Provide、@Consume

顾名思义，这一对是形成生产者-消费者模式的装饰器，且双向绑定
@Provide必须设置初始值，@Consume不可设置默认初始值。
触发变化的时机：

• 基础类型（boolean，string，number）变量的改变；
• @Observed class类型变量及其属性的修改；
• 添加，删除，更新数组中的元素。

struct CompA {
@Provide("reviewVote") reviewVotes: number = 0;
}

struct CompC {
@Consume("reviewVote") reviewVotes: number
}

4、@Watch

使用观察者模式的装饰器，但该装饰器不是触发变量变化，而是绑定一个函数，当@Watch变量变化时，调用该函数。

struct ComA {
// 绑定onBasketUpdate方法，当变量更新时调用
@State @Watch('onBasketUpdate') shopBasket: Array = [7, 12, 47, 3]

onBasketUpdate(propName: string): void {
this.updateTotal()
}
}