常见装饰器和用法

目录

装饰器类型

常见装饰器及用法

1.@Entry：

2.@Component：

3.@State：

4.@Prop：

5.@Link：

6.@Provide

7.@Consume装饰器

装饰器类型

• 类装饰器：用于装饰类的构造函数，可以修改类的定义，例如添加属性或方法。
• 属性装饰器：用于类的属性，可以修改属性的描述符，如可写性（writable）、枚举性（enumerable）等。
• 方法装饰器：用于类的方法，可以在方法执行前后添加额外的代码，实现日志记录、性能分析等功能。
• 参数装饰器：用于方法的参数，可以修改参数的类型或添加默认值等。
• 访问器装饰器：用于类的访问器（getter和setter），可以拦截和修改属性的读写操作。

常见装饰器及用法

1.@Entry：

（1）用于标记自定义组件为入口组件，即作为页面的根组件。

 注：在ArkTS中，根组件是唯一可以直接被用户访问的组件，它负责管理和协调页面上所有子组件的展示和交互。

（2）代码展示

@Entry
@Component
struct Index{}

2.@Component：

（1）用于定义自定义组件，表明该类是一个可以被实例化的组件。 

注：在ArkTS中，组件可以有子组件，但子组件必须被父组件调用才能在页面上展示。

（2）代码展示

@Component
struct SonComponent{}     //子组件

3.@State：

（1）用法

用于声明状态变量，这些变量与自定义组件的渲染绑定，当状态改变时，UI会发生对应的渲染改变。

注：@State装饰的变量是私有的，只能从组件内部访问，并且在声明时必须指定类型和本地初始化。

 （2）初始化限制

必须进行本地初始化，可选择是否进行构造参数的初始化

@State    
let count:number = 0  //定义了一个number类型的变量count，初始值为0

（3） 限制条件

• 支持的类型包括Object、class、String、number、boolean、enum以及这些类型对应的数组。嵌套类型以及数组中对象的属性无法触发视图更新。

4.@Prop：

（1）用于声明属性，这些属性可以从父组件接收数据，从而实现数据的单向流动。

注：@Prop装饰的变量在声明时必须指定类型，但可以不进行本地初始化。

        它们支持简单数据类型，如number、string、boolean等。

（2）禁止进行本地初始化，必须进行构造参数的初始化

@Prop
let age : number

（3）限制条件

• 允许装饰的变量类型包括string、number、boolean、enum。不支持any，不允许使用undefined和null。
• 必须指定类型。
• 在父组件中，传递给@Prop装饰的值不能为undefined或者null 

5.@Link：

（1）用于组件之间的信息传递，即可以从父组件接收数据，也可以向父组件传递消息，实现数据的双向流动

（2）禁止进行本地初始化，必须进行构造参数的初始化

@Link
let name : string = 'Mike'

6.@Provide

（1）用于在组件的祖先节点中提供一个状态变量，这个变量可以被其子孙组件消费。

注：@Provide装饰的变量是自动对其所有后代组件可用的，即该变量被“提供”给他的后代组件。
开发者不需要多次在组件之间传递变量，后代组件可以通过使用@Consume来获取

（2）必须进行本地初始化，可选择是否进行构造参数的初始化

@Provide('reviewVote')
reviewVotes:number = 0

provide('isCompleted',isCompleted)

7.@Consume

（1）@Consume装饰器用于在后代组件中消费从祖先节点提供的状态变量。

注：@Consume通过相同的变量名或别名绑定到@Provide提供的变量，实现双向数据同步。

（2）禁止进行本地初始化，禁止进行构造参数的初始化

@Consume('reviewVote')
reviewVote  : number

const isCompleteds = inject('isCompleted',Function,true')

//Function是函数类型
//true表示将函数作为构造器处理