帝国cms网站地图生成器,网站服务器ip地址在哪里看,做美食哪些类型网站,公司官网格式设计文章目录 一、引言1.1 什么是修饰符1.2 修饰符在鸿蒙开发中的重要性1.3 修饰符的作用机制 二、UI装饰类修饰符2.1 Styles修饰符2.1.1 基本概念和使用场景2.1.2 使用示例2.1.3 最佳实践 2.2 Extend修饰符2.2.1 基本概念2.2.2 使用示例2.2.3 Extend vs Styles 对比2.2.4 使用建议… 文章目录 一、引言1.1 什么是修饰符1.2 修饰符在鸿蒙开发中的重要性1.3 修饰符的作用机制 二、UI装饰类修饰符2.1 Styles修饰符2.1.1 基本概念和使用场景2.1.2 使用示例2.1.3 最佳实践 2.2 Extend修饰符2.2.1 基本概念2.2.2 使用示例2.2.3 Extend vs Styles 对比2.2.4 使用建议 三、组件类修饰符3.1 Component修饰符3.1.1 基本概念3.1.2 Component vs 普通函数对比3.1.3 基础使用示例3.1.4 高级特性3.1.5 最佳实践3.1.6 性能优化建议 3.2 BuilderParam修饰符3.2.1 基本概念3.2.2 使用场景3.2.3 注意事项与最佳实践 四、状态管理类修饰符4.1 State修饰符4.1.1 基本概念4.1.2 使用规则4.1.3 State注意事项和最佳实践 4.2 Prop修饰符4.2.1 基本概念4.2.2 使用示例4.2.3 Prop vs 普通变量对比4.2.4 Prop的高级用法4.2.5 最佳实践 4.3 Link修饰符4.3.1 基本概念4.3.2 使用示例4.3.3 Link vs Prop 对比4.3.4 Link最佳实践 4.4 Provide/Consume修饰符4.4.1 基本概念4.4.2 基础用法4.4.3 高级特性4.4.4 使用建议与最佳实践 4.5 Watch修饰符4.5.1 基本概念4.5.2 基础用法4.5.3 高级用法4.5.4 Watch使用场景4.5.5 最佳实践4.5.6 Watch注意事项 4.6 Observed/ObjectLink修饰符4.6.1 基本概念4.6.2 基础用法4.6.3 关键点4.6.4 实际应用示例4.6.5 注意事项 对比1. 使用场景对比2. 具体示例对比3. 特点对比StatePropLinkObserved/ObjectLink 4. 数据同步方式对比 一、引言
在HarmonyOS鸿蒙应用开发中修饰符Decorator是一个极其重要的概念。它们不仅能够简化开发过程还能提供强大的功能扩展性。本文将深入探讨鸿蒙中的各类修饰符帮助开发者更好地理解和使用这些工具。本文主要介绍StylesExtendBuilderComponentBuilderParamStatePropLinkProvideWatchObserved等等。 #mermaid-svg-P1gGCgH0ztGdHPe7 {font-family:"trebuchet ms",verdana,arial,sans-serif;font-size:16px;fill:#333;}#mermaid-svg-P1gGCgH0ztGdHPe7 .error-icon{fill:#552222;}#mermaid-svg-P1gGCgH0ztGdHPe7 .error-text{fill:#552222;stroke:#552222;}#mermaid-svg-P1gGCgH0ztGdHPe7 .edge-thickness-normal{stroke-width:2px;}#mermaid-svg-P1gGCgH0ztGdHPe7 .edge-thickness-thick{stroke-width:3.5px;}#mermaid-svg-P1gGCgH0ztGdHPe7 .edge-pattern-solid{stroke-dasharray:0;}#mermaid-svg-P1gGCgH0ztGdHPe7 .edge-pattern-dashed{stroke-dasharray:3;}#mermaid-svg-P1gGCgH0ztGdHPe7 .edge-pattern-dotted{stroke-dasharray:2;}#mermaid-svg-P1gGCgH0ztGdHPe7 .marker{fill:#333333;stroke:#333333;}#mermaid-svg-P1gGCgH0ztGdHPe7 .marker.cross{stroke:#333333;}#mermaid-svg-P1gGCgH0ztGdHPe7 svg{font-family:"trebuchet ms",verdana,arial,sans-serif;font-size:16px;}#mermaid-svg-P1gGCgH0ztGdHPe7 .label{font-family:"trebuchet ms",verdana,arial,sans-serif;color:#333;}#mermaid-svg-P1gGCgH0ztGdHPe7 .cluster-label text{fill:#333;}#mermaid-svg-P1gGCgH0ztGdHPe7 .cluster-label span{color:#333;}#mermaid-svg-P1gGCgH0ztGdHPe7 .label text,#mermaid-svg-P1gGCgH0ztGdHPe7 span{fill:#333;color:#333;}#mermaid-svg-P1gGCgH0ztGdHPe7 .node rect,#mermaid-svg-P1gGCgH0ztGdHPe7 .node circle,#mermaid-svg-P1gGCgH0ztGdHPe7 .node ellipse,#mermaid-svg-P1gGCgH0ztGdHPe7 .node polygon,#mermaid-svg-P1gGCgH0ztGdHPe7 .node path{fill:#ECECFF;stroke:#9370DB;stroke-width:1px;}#mermaid-svg-P1gGCgH0ztGdHPe7 .node .label{text-align:center;}#mermaid-svg-P1gGCgH0ztGdHPe7 .node.clickable{cursor:pointer;}#mermaid-svg-P1gGCgH0ztGdHPe7 .arrowheadPath{fill:#333333;}#mermaid-svg-P1gGCgH0ztGdHPe7 .edgePath .path{stroke:#333333;stroke-width:2.0px;}#mermaid-svg-P1gGCgH0ztGdHPe7 .flowchart-link{stroke:#333333;fill:none;}#mermaid-svg-P1gGCgH0ztGdHPe7 .edgeLabel{background-color:#e8e8e8;text-align:center;}#mermaid-svg-P1gGCgH0ztGdHPe7 .edgeLabel rect{opacity:0.5;background-color:#e8e8e8;fill:#e8e8e8;}#mermaid-svg-P1gGCgH0ztGdHPe7 .cluster rect{fill:#ffffde;stroke:#aaaa33;stroke-width:1px;}#mermaid-svg-P1gGCgH0ztGdHPe7 .cluster text{fill:#333;}#mermaid-svg-P1gGCgH0ztGdHPe7 .cluster span{color:#333;}#mermaid-svg-P1gGCgH0ztGdHPe7 div.mermaidTooltip{position:absolute;text-align:center;max-width:200px;padding:2px;font-family:"trebuchet ms",verdana,arial,sans-serif;font-size:12px;background:hsl(80, 100%, 96.2745098039%);border:1px solid #aaaa33;border-radius:2px;pointer-events:none;z-index:100;}#mermaid-svg-P1gGCgH0ztGdHPe7 :root{--mermaid-font-family:"trebuchet ms",verdana,arial,sans-serif;} HarmonyOS Decorators UI Decorators Component Decorators State Management Styles Extend Component BuilderParam State Prop Link 1.1 什么是修饰符
修饰符是一种特殊的语法元素用符号作为标识可以用来修饰类、方法、属性等代码元素为其添加额外的行为或特性。在鸿蒙开发中修饰符主要用于以下几个方面
UI样式定义和复用组件声明和管理状态管理和数据同步组件间通信
1.2 修饰符在鸿蒙开发中的重要性 1.3 修饰符的作用机制
修饰符在编译时会被转换为特定的代码它们主要通过以下机制发挥作用
装饰器模式: 在不改变原有代码结构的情况下动态地给对象添加新的功能编译时转换: 将声明式的代码转换为命令式代码运行时注入: 在运行时为目标对象注入额外的行为
二、UI装饰类修饰符 #mermaid-svg-0jfhzyz6LUD9oOV2 {font-family:"trebuchet ms",verdana,arial,sans-serif;font-size:16px;fill:#333;}#mermaid-svg-0jfhzyz6LUD9oOV2 .error-icon{fill:#552222;}#mermaid-svg-0jfhzyz6LUD9oOV2 .error-text{fill:#552222;stroke:#552222;}#mermaid-svg-0jfhzyz6LUD9oOV2 .edge-thickness-normal{stroke-width:2px;}#mermaid-svg-0jfhzyz6LUD9oOV2 .edge-thickness-thick{stroke-width:3.5px;}#mermaid-svg-0jfhzyz6LUD9oOV2 .edge-pattern-solid{stroke-dasharray:0;}#mermaid-svg-0jfhzyz6LUD9oOV2 .edge-pattern-dashed{stroke-dasharray:3;}#mermaid-svg-0jfhzyz6LUD9oOV2 .edge-pattern-dotted{stroke-dasharray:2;}#mermaid-svg-0jfhzyz6LUD9oOV2 .marker{fill:#333333;stroke:#333333;}#mermaid-svg-0jfhzyz6LUD9oOV2 .marker.cross{stroke:#333333;}#mermaid-svg-0jfhzyz6LUD9oOV2 svg{font-family:"trebuchet ms",verdana,arial,sans-serif;font-size:16px;}#mermaid-svg-0jfhzyz6LUD9oOV2 .label{font-family:"trebuchet ms",verdana,arial,sans-serif;color:#333;}#mermaid-svg-0jfhzyz6LUD9oOV2 .cluster-label text{fill:#333;}#mermaid-svg-0jfhzyz6LUD9oOV2 .cluster-label span{color:#333;}#mermaid-svg-0jfhzyz6LUD9oOV2 .label text,#mermaid-svg-0jfhzyz6LUD9oOV2 span{fill:#333;color:#333;}#mermaid-svg-0jfhzyz6LUD9oOV2 .node rect,#mermaid-svg-0jfhzyz6LUD9oOV2 .node circle,#mermaid-svg-0jfhzyz6LUD9oOV2 .node ellipse,#mermaid-svg-0jfhzyz6LUD9oOV2 .node polygon,#mermaid-svg-0jfhzyz6LUD9oOV2 .node path{fill:#ECECFF;stroke:#9370DB;stroke-width:1px;}#mermaid-svg-0jfhzyz6LUD9oOV2 .node .label{text-align:center;}#mermaid-svg-0jfhzyz6LUD9oOV2 .node.clickable{cursor:pointer;}#mermaid-svg-0jfhzyz6LUD9oOV2 .arrowheadPath{fill:#333333;}#mermaid-svg-0jfhzyz6LUD9oOV2 .edgePath .path{stroke:#333333;stroke-width:2.0px;}#mermaid-svg-0jfhzyz6LUD9oOV2 .flowchart-link{stroke:#333333;fill:none;}#mermaid-svg-0jfhzyz6LUD9oOV2 .edgeLabel{background-color:#e8e8e8;text-align:center;}#mermaid-svg-0jfhzyz6LUD9oOV2 .edgeLabel rect{opacity:0.5;background-color:#e8e8e8;fill:#e8e8e8;}#mermaid-svg-0jfhzyz6LUD9oOV2 .cluster rect{fill:#ffffde;stroke:#aaaa33;stroke-width:1px;}#mermaid-svg-0jfhzyz6LUD9oOV2 .cluster text{fill:#333;}#mermaid-svg-0jfhzyz6LUD9oOV2 .cluster span{color:#333;}#mermaid-svg-0jfhzyz6LUD9oOV2 div.mermaidTooltip{position:absolute;text-align:center;max-width:200px;padding:2px;font-family:"trebuchet ms",verdana,arial,sans-serif;font-size:12px;background:hsl(80, 100%, 96.2745098039%);border:1px solid #aaaa33;border-radius:2px;pointer-events:none;z-index:100;}#mermaid-svg-0jfhzyz6LUD9oOV2 :root{--mermaid-font-family:"trebuchet ms",verdana,arial,sans-serif;} UI Decorator Styles Extend Global Styles Theme Styles Component Extensions Custom Components 2.1 Styles修饰符
2.1.1 基本概念和使用场景
Styles修饰符用于定义可复用的样式集合类似于Web开发中的CSS类。它可以
提取共同样式实现复用保持代码整洁统一管理样式
2.1.2 使用示例
// 定义全局样式
Styles function globalStyles() {.width(100%).height(100).backgroundColor(#f5f5f5).padding(20)
}// 使用样式
Entry
Component
struct StylesDemo {build() {Column() {Text(Hello).fontSize(20).globalStyles()Text(World).fontSize(16).globalStyles()}}
}2.1.3 最佳实践
样式分类管理
// 按功能分类样式
Styles function cardStyles() {.width(100%).padding(15).borderRadius(8).backgroundColor(Color.White)
}Styles function buttonStyles() {.width(120).height(40).borderRadius(20).backgroundColor(#007DFF)
}2.2 Extend修饰符
2.2.1 基本概念
Extend用于扩展现有组件的样式和行为创建具有特定样式的新组件类型。
2.2.2 使用示例
// 扩展Text组件
Extend(Text) function primaryText() {.fontSize(16).fontColor(#333333).fontWeight(FontWeight.Medium)
}// 扩展Button组件
Extend(Button) function primaryButton(color:Color) {.width(200).height(50).backgroundColor(#007DFF).fontColor(color)
}Entry
Component
struct TestCase {build() {Column({ space: 20 }) {Text(这是普通文本).primaryText()Button(点击按钮).primaryButton(Color.White)}.height(100%).width(100%)}
}2.2.3 Extend vs Styles 对比
特性ExtendStyles使用对象特定组件任意组件复用性只能用于指定的组件类型可以应用于任何组件类型安全更强的类型检查相对宽松适用场景组件定制化通用样式复用是否能接收参数是否
2.2.4 使用建议 选择合适的场景 需要创建特定样式的组件变体时使用Extend需要跨组件复用样式时使用Styles 命名规范
// 好的命名示例
Extend(Text) function primaryText() {}
Extend(Text) function warningText() {}
Extend(Button) function roundButton() {}// 避免的命名方式
Extend(Text) function txt() {}
Extend(Button) function btn() {}三、组件类修饰符
3.1 Component修饰符
3.1.1 基本概念
Component是鸿蒙开发中最核心的修饰符之一用于声明自定义组件。它将一个struct转换为可重用的UI组件具有以下特点
必须包含build()方法支持组件生命周期可以包含状态变量支持组件间通信 #mermaid-svg-i7IfguRVyCrZ0Y2Y {font-family:"trebuchet ms",verdana,arial,sans-serif;font-size:16px;fill:#333;}#mermaid-svg-i7IfguRVyCrZ0Y2Y .error-icon{fill:#552222;}#mermaid-svg-i7IfguRVyCrZ0Y2Y .error-text{fill:#552222;stroke:#552222;}#mermaid-svg-i7IfguRVyCrZ0Y2Y .edge-thickness-normal{stroke-width:2px;}#mermaid-svg-i7IfguRVyCrZ0Y2Y .edge-thickness-thick{stroke-width:3.5px;}#mermaid-svg-i7IfguRVyCrZ0Y2Y .edge-pattern-solid{stroke-dasharray:0;}#mermaid-svg-i7IfguRVyCrZ0Y2Y .edge-pattern-dashed{stroke-dasharray:3;}#mermaid-svg-i7IfguRVyCrZ0Y2Y .edge-pattern-dotted{stroke-dasharray:2;}#mermaid-svg-i7IfguRVyCrZ0Y2Y .marker{fill:#333333;stroke:#333333;}#mermaid-svg-i7IfguRVyCrZ0Y2Y .marker.cross{stroke:#333333;}#mermaid-svg-i7IfguRVyCrZ0Y2Y svg{font-family:"trebuchet ms",verdana,arial,sans-serif;font-size:16px;}#mermaid-svg-i7IfguRVyCrZ0Y2Y .label{font-family:"trebuchet ms",verdana,arial,sans-serif;color:#333;}#mermaid-svg-i7IfguRVyCrZ0Y2Y .cluster-label text{fill:#333;}#mermaid-svg-i7IfguRVyCrZ0Y2Y .cluster-label span{color:#333;}#mermaid-svg-i7IfguRVyCrZ0Y2Y .label text,#mermaid-svg-i7IfguRVyCrZ0Y2Y span{fill:#333;color:#333;}#mermaid-svg-i7IfguRVyCrZ0Y2Y .node rect,#mermaid-svg-i7IfguRVyCrZ0Y2Y .node circle,#mermaid-svg-i7IfguRVyCrZ0Y2Y .node ellipse,#mermaid-svg-i7IfguRVyCrZ0Y2Y .node polygon,#mermaid-svg-i7IfguRVyCrZ0Y2Y .node path{fill:#ECECFF;stroke:#9370DB;stroke-width:1px;}#mermaid-svg-i7IfguRVyCrZ0Y2Y .node .label{text-align:center;}#mermaid-svg-i7IfguRVyCrZ0Y2Y .node.clickable{cursor:pointer;}#mermaid-svg-i7IfguRVyCrZ0Y2Y .arrowheadPath{fill:#333333;}#mermaid-svg-i7IfguRVyCrZ0Y2Y .edgePath .path{stroke:#333333;stroke-width:2.0px;}#mermaid-svg-i7IfguRVyCrZ0Y2Y .flowchart-link{stroke:#333333;fill:none;}#mermaid-svg-i7IfguRVyCrZ0Y2Y .edgeLabel{background-color:#e8e8e8;text-align:center;}#mermaid-svg-i7IfguRVyCrZ0Y2Y .edgeLabel rect{opacity:0.5;background-color:#e8e8e8;fill:#e8e8e8;}#mermaid-svg-i7IfguRVyCrZ0Y2Y .cluster rect{fill:#ffffde;stroke:#aaaa33;stroke-width:1px;}#mermaid-svg-i7IfguRVyCrZ0Y2Y .cluster text{fill:#333;}#mermaid-svg-i7IfguRVyCrZ0Y2Y .cluster span{color:#333;}#mermaid-svg-i7IfguRVyCrZ0Y2Y div.mermaidTooltip{position:absolute;text-align:center;max-width:200px;padding:2px;font-family:"trebuchet ms",verdana,arial,sans-serif;font-size:12px;background:hsl(80, 100%, 96.2745098039%);border:1px solid #aaaa33;border-radius:2px;pointer-events:none;z-index:100;}#mermaid-svg-i7IfguRVyCrZ0Y2Y :root{--mermaid-font-family:"trebuchet ms",verdana,arial,sans-serif;} Component 生命周期管理 状态管理 UI渲染 aboutToAppear aboutToDisappear State Prop build方法 3.1.2 Component vs 普通函数对比
特性Component普通函数状态管理支持State等状态修饰符不支持状态管理生命周期有完整生命周期没有生命周期重渲染机制响应式更新需手动处理更新使用场景复杂UI组件简单功能封装
3.1.3 基础使用示例
import { promptAction } from kit.ArkUI;Entry
Component
struct TestCase {// 组件私有状态
State counter: number 0// 生命周期函数aboutToAppear() {promptAction.showToast({message:Component is about to appear})}aboutToDisappear() {promptAction.showToast({message:Component is about to disappear})}build() {Column() {Text(计数器: ${this.counter}).fontSize(20).fontWeight(FontWeight.Bold)Button(增加).onClick(() {this.counter}).margin(10)}.width(100%).padding(20)}
}3.1.4 高级特性
1. 组件参数传递
Component
struct AdvancedComponent {// 从父组件接收的属性Prop title: stringState private description: string build() {Column({ space: 10 }) {Text(this.title).fontSize(24)TextInput({ placeholder: 请输入描述 }).onChange((value: string) {this.description value})}}
}2. 组件插槽Slot
Component
struct SlotComponent {BuilderParam content: () voidbuild() {Column() {this.content()}.width(100%).backgroundColor(#f5f5f5)}
}// 使用组件插槽
Component
struct ParentComponent {build() {SlotComponent() {Row() {Text(自定义内容)Image(icon.png)}}}
}3.1.5 最佳实践
组件拆分原则
// 好的实践功能单一职责明确
Component
struct UserAvatar {Prop userName: stringProp avatarUrl: stringbuild() {Stack() {Image(this.avatarUrl).width(50).height(50).borderRadius(25)Text(this.userName[0]).fontSize(20).fontColor(Color.White)}}
}// 使用组件
Component
struct UserProfile {build() {Row() {UserAvatar({userName: 张三,avatarUrl: avatar.png})Text(其他信息)}}
}生命周期使用建议
Component
struct LifecycleComponent {State private data: any {}aboutToAppear() {// 初始化数据订阅事件this.initData()}aboutToDisappear() {// 清理资源取消订阅this.cleanUp()}private initData() {// 数据初始化逻辑}private cleanUp() {// 清理逻辑}build() {// UI渲染}
}3.1.6 性能优化建议
状态管理优化
Component
struct OptimizedComponent {// 使用私有变量存储不需要响应式更新的数据private staticData: string static// 只将需要触发更新的数据声明为StateState dynamicData: number 0build() {Column() {// 静态内容Text(this.staticData)// 动态内容Text(${this.dynamicData})}}
}条件渲染优化
Component
struct ConditionalComponent {State loading: boolean trueState data: Arraystring []build() {Column() {if (this.loading) {LoadingSpinner()} else {ForEach(this.data, (item) {DataItem({ content: item })})}}}
}3.2 BuilderParam修饰符
3.2.1 基本概念
BuilderParam用于声明自定义构建函数参数使组件能够接收和渲染自定义内容。
3.2.2 使用场景
自定义列表项渲染 Component
struct MainPage {
State items: string[] [项目1, 项目2, 项目3]
Builder myItemBuilder(item: string):void{}
BuilderParam itemBuilder: (item: string) void this.myItemBuilderbuild() {List() {ForEach(this.items, (item:string,idx:number) {ListItem() {this.itemBuilder(item)}})}}
}// 使用示例
Entry
Component
struct TestCase {build() {Column(){MainPage({itemBuilder: (item:string) {Row() {Text(item).width(100%).height(100%).backgroundColor(Color.Pink)}}})}}
}可定制化容器组件
Component
struct Container {BuilderParam header?: () voidBuilderParam content: () voidBuilderParam footer?: () voidbuild() {Column() {if (this.header) {this.header()}this.content()if (this.footer) {this.footer()}}}
}3.2.3 注意事项与最佳实践
参数命名规范
// 推荐的命名方式
BuilderParam headerBuilder: () void
BuilderParam contentBuilder: () void
BuilderParam footerBuilder: () void// 不推荐的命名方式
BuilderParam hdr: () void
BuilderParam cnt: () void性能考虑
Component
struct PerformanceOptimizedList {// 使用私有变量缓存不常变化的构建函数Builder myStaticBuilder() :void{Text(Static Content)
}BuilderParam private staticBuilder:()void this.myStaticBuilderBuilderParam dynamicBuilder: () voidbuild() {Column() {// 静态内容this.staticBuilder()// 动态内容this.dynamicBuilder()}}
}四、状态管理类修饰符
4.1 State修饰符
4.1.1 基本概念
State是鸿蒙应用中最基础的状态管理修饰符用于组件内部状态管理。当State装饰的变量发生变化时框架会自动重新渲染相关UI。 #mermaid-svg-3s5AtFZGW1v32JBV {font-family:"trebuchet ms",verdana,arial,sans-serif;font-size:16px;fill:#333;}#mermaid-svg-3s5AtFZGW1v32JBV .error-icon{fill:#552222;}#mermaid-svg-3s5AtFZGW1v32JBV .error-text{fill:#552222;stroke:#552222;}#mermaid-svg-3s5AtFZGW1v32JBV .edge-thickness-normal{stroke-width:2px;}#mermaid-svg-3s5AtFZGW1v32JBV .edge-thickness-thick{stroke-width:3.5px;}#mermaid-svg-3s5AtFZGW1v32JBV .edge-pattern-solid{stroke-dasharray:0;}#mermaid-svg-3s5AtFZGW1v32JBV .edge-pattern-dashed{stroke-dasharray:3;}#mermaid-svg-3s5AtFZGW1v32JBV .edge-pattern-dotted{stroke-dasharray:2;}#mermaid-svg-3s5AtFZGW1v32JBV .marker{fill:#333333;stroke:#333333;}#mermaid-svg-3s5AtFZGW1v32JBV .marker.cross{stroke:#333333;}#mermaid-svg-3s5AtFZGW1v32JBV svg{font-family:"trebuchet ms",verdana,arial,sans-serif;font-size:16px;}#mermaid-svg-3s5AtFZGW1v32JBV .label{font-family:"trebuchet ms",verdana,arial,sans-serif;color:#333;}#mermaid-svg-3s5AtFZGW1v32JBV .cluster-label text{fill:#333;}#mermaid-svg-3s5AtFZGW1v32JBV .cluster-label span{color:#333;}#mermaid-svg-3s5AtFZGW1v32JBV .label text,#mermaid-svg-3s5AtFZGW1v32JBV span{fill:#333;color:#333;}#mermaid-svg-3s5AtFZGW1v32JBV .node rect,#mermaid-svg-3s5AtFZGW1v32JBV .node circle,#mermaid-svg-3s5AtFZGW1v32JBV .node ellipse,#mermaid-svg-3s5AtFZGW1v32JBV .node polygon,#mermaid-svg-3s5AtFZGW1v32JBV .node path{fill:#ECECFF;stroke:#9370DB;stroke-width:1px;}#mermaid-svg-3s5AtFZGW1v32JBV .node .label{text-align:center;}#mermaid-svg-3s5AtFZGW1v32JBV .node.clickable{cursor:pointer;}#mermaid-svg-3s5AtFZGW1v32JBV .arrowheadPath{fill:#333333;}#mermaid-svg-3s5AtFZGW1v32JBV .edgePath .path{stroke:#333333;stroke-width:2.0px;}#mermaid-svg-3s5AtFZGW1v32JBV .flowchart-link{stroke:#333333;fill:none;}#mermaid-svg-3s5AtFZGW1v32JBV .edgeLabel{background-color:#e8e8e8;text-align:center;}#mermaid-svg-3s5AtFZGW1v32JBV .edgeLabel rect{opacity:0.5;background-color:#e8e8e8;fill:#e8e8e8;}#mermaid-svg-3s5AtFZGW1v32JBV .cluster rect{fill:#ffffde;stroke:#aaaa33;stroke-width:1px;}#mermaid-svg-3s5AtFZGW1v32JBV .cluster text{fill:#333;}#mermaid-svg-3s5AtFZGW1v32JBV .cluster span{color:#333;}#mermaid-svg-3s5AtFZGW1v32JBV div.mermaidTooltip{position:absolute;text-align:center;max-width:200px;padding:2px;font-family:"trebuchet ms",verdana,arial,sans-serif;font-size:12px;background:hsl(80, 100%, 96.2745098039%);border:1px solid #aaaa33;border-radius:2px;pointer-events:none;z-index:100;}#mermaid-svg-3s5AtFZGW1v32JBV :root{--mermaid-font-family:"trebuchet ms",verdana,arial,sans-serif;} State变量改变 触发更新机制 计算差异 更新UI 完成渲染 4.1.2 使用规则
基本语法
interface IUser{name: string,age: number
}// 使用示例
Entry
Component
struct TestCase {// 基础类型State count: number 0// 对象类型State user: IUser {name: tata,age: 25}// 数组类型State list: string[] [item1, item2]build() {Column({ space: 20 }) {// 使用状态变量Text(Count: ${this.count})Button(Add).onClick(() {this.count})Text(User: ${this.user.name}, ${this.user.age})Button(Update User).onClick(() {// 对象更新要使用新对象this.user {name:this.user.name,age: this.user.age 1}})}}
}4.1.3 State注意事项和最佳实践
状态初始化
Component
struct StateInitDemo {// ✅ 推荐直接初始化State counter1: number 0// ⚠️ 不推荐延迟初始化可能导致问题State counter2: numberaboutToAppear() {// 延迟初始化可能导致首次渲染问题this.counter2 0}
}状态粒度控制
Component
struct StateGranularityDemo {// ❌ 错误粒度过大State entirePage: {header: object,content: object,footer: object}// ✅ 正确适当的状态粒度State headerConfig: objectState contentList: arrayState footerVisible: booleanbuild() {Column() {// UI实现}}
}4.2 Prop修饰符
4.2.1 基本概念
Prop用于父子组件间的单向数据传递子组件通过Prop接收父组件传递的数据。
4.2.2 使用示例
// 子组件
Component
struct ChildComponent {Prop count: number // 接收父组件传递的数值Prop message: string // 接收父组件传递的字符串build() {Column() {Text(Count: ${this.count})Text(Message: ${this.message})}}
}// 父组件
Component
struct ParentComponent {State parentCount: number 0State parentMessage: string Hellobuild() {Column() {// 传递属性给子组件ChildComponent({count: this.parentCount,message: this.parentMessage})Button(Update Parent).onClick(() {this.parentCountthis.parentMessage Updated})}}
}4.2.3 Prop vs 普通变量对比
Component
struct PropComparisonDemo {// Prop装饰的变量Prop propValue: number// 普通变量normalValue: numberbuild() {Column() {// Prop变量会响应父组件的更新Text(Prop Value: ${this.propValue})// 普通变量不会响应更新Text(Normal Value: ${this.normalValue})}}
}特性Prop变量普通变量数据流向单向父到子无数据流响应更新自动响应不响应可修改性本地可修改但不影响父组件可以自由修改使用场景父子组件通信组件内部数据
4.2.4 Prop的高级用法
默认值处理
Component
struct PropDefaultDemo {// 使用装饰器提供默认值Prop defaultValue: number 100build() {Column() {Text(Value: ${this.defaultValue})}}
}属性监听与处理
Component
struct PropWatchDemo {Prop Watch(onCountChange) count: numberState localCount: number 0onCountChange() {// 当Prop值变化时执行this.localCount this.count * 2}build() {Column() {Text(Prop Count: ${this.count})Text(Local Count: ${this.localCount})}}
}4.2.5 最佳实践
属性命名规范
Component
struct PropNamingDemo {// ✅ 推荐语义化命名Prop isVisible: booleanProp userName: stringProp itemCount: number// ❌ 避免模糊的命名Prop flag: booleanProp str: stringProp num: number
}类型安全
Component
struct PropTypeDemo {// ✅ 推荐明确的类型定义Prop items: Array{id: number,name: string}// ❌ 避免使用any类型Prop data: any
}4.3 Link修饰符
4.3.1 基本概念
Link修饰符用于实现父子组件间的双向数据绑定。与Prop不同Link装饰的变量在子组件中的修改会同步回父组件。 #mermaid-svg-5kexsPsVBB8gaMOP {font-family:"trebuchet ms",verdana,arial,sans-serif;font-size:16px;fill:#333;}#mermaid-svg-5kexsPsVBB8gaMOP .error-icon{fill:#552222;}#mermaid-svg-5kexsPsVBB8gaMOP .error-text{fill:#552222;stroke:#552222;}#mermaid-svg-5kexsPsVBB8gaMOP .edge-thickness-normal{stroke-width:2px;}#mermaid-svg-5kexsPsVBB8gaMOP .edge-thickness-thick{stroke-width:3.5px;}#mermaid-svg-5kexsPsVBB8gaMOP .edge-pattern-solid{stroke-dasharray:0;}#mermaid-svg-5kexsPsVBB8gaMOP .edge-pattern-dashed{stroke-dasharray:3;}#mermaid-svg-5kexsPsVBB8gaMOP .edge-pattern-dotted{stroke-dasharray:2;}#mermaid-svg-5kexsPsVBB8gaMOP .marker{fill:#333333;stroke:#333333;}#mermaid-svg-5kexsPsVBB8gaMOP .marker.cross{stroke:#333333;}#mermaid-svg-5kexsPsVBB8gaMOP svg{font-family:"trebuchet ms",verdana,arial,sans-serif;font-size:16px;}#mermaid-svg-5kexsPsVBB8gaMOP .label{font-family:"trebuchet ms",verdana,arial,sans-serif;color:#333;}#mermaid-svg-5kexsPsVBB8gaMOP .cluster-label text{fill:#333;}#mermaid-svg-5kexsPsVBB8gaMOP .cluster-label span{color:#333;}#mermaid-svg-5kexsPsVBB8gaMOP .label text,#mermaid-svg-5kexsPsVBB8gaMOP span{fill:#333;color:#333;}#mermaid-svg-5kexsPsVBB8gaMOP .node rect,#mermaid-svg-5kexsPsVBB8gaMOP .node circle,#mermaid-svg-5kexsPsVBB8gaMOP .node ellipse,#mermaid-svg-5kexsPsVBB8gaMOP .node polygon,#mermaid-svg-5kexsPsVBB8gaMOP .node path{fill:#ECECFF;stroke:#9370DB;stroke-width:1px;}#mermaid-svg-5kexsPsVBB8gaMOP .node .label{text-align:center;}#mermaid-svg-5kexsPsVBB8gaMOP .node.clickable{cursor:pointer;}#mermaid-svg-5kexsPsVBB8gaMOP .arrowheadPath{fill:#333333;}#mermaid-svg-5kexsPsVBB8gaMOP .edgePath .path{stroke:#333333;stroke-width:2.0px;}#mermaid-svg-5kexsPsVBB8gaMOP .flowchart-link{stroke:#333333;fill:none;}#mermaid-svg-5kexsPsVBB8gaMOP .edgeLabel{background-color:#e8e8e8;text-align:center;}#mermaid-svg-5kexsPsVBB8gaMOP .edgeLabel rect{opacity:0.5;background-color:#e8e8e8;fill:#e8e8e8;}#mermaid-svg-5kexsPsVBB8gaMOP .cluster rect{fill:#ffffde;stroke:#aaaa33;stroke-width:1px;}#mermaid-svg-5kexsPsVBB8gaMOP .cluster text{fill:#333;}#mermaid-svg-5kexsPsVBB8gaMOP .cluster span{color:#333;}#mermaid-svg-5kexsPsVBB8gaMOP div.mermaidTooltip{position:absolute;text-align:center;max-width:200px;padding:2px;font-family:"trebuchet ms",verdana,arial,sans-serif;font-size:12px;background:hsl(80, 100%, 96.2745098039%);border:1px solid #aaaa33;border-radius:2px;pointer-events:none;z-index:100;}#mermaid-svg-5kexsPsVBB8gaMOP :root{--mermaid-font-family:"trebuchet ms",verdana,arial,sans-serif;} 父组件状态 Link双向绑定 子组件状态 父组件UI更新 子组件UI更新 4.3.2 使用示例
// 子组件
Component
struct LinkChildComponent {Link countValue: number // 双向绑定数据build() {Column() {Text(Count: ${this.countValue})Button(在子组件中修改).onClick(() {this.countValue // 修改会影响父组件})}}
}// 父组件
Entry
Component
struct TestCase {State parentCount: number 0build() {Column() {Text(Parent Count: ${this.parentCount})LinkChildComponent({ countValue: $parentCount })Button(在父组件中修改).onClick(() {this.parentCount})}}
}4.3.3 Link vs Prop 对比
特性LinkProp数据流向双向单向父到子子组件修改直接影响父组件不影响父组件使用场景需要子组件修改父组件状态只需要展示父组件数据语法标记变量名变量名
4.3.4 Link最佳实践
合理使用场景
Component
struct FormComponent {// ✅ 适合使用Link的场景表单数据Link formData: {username: string,password: string}build() {Column() {TextInput({ placeholder: 用户名 }).onChange((value) {this.formData.username value})TextInput({ placeholder: 密码 }).type(InputType.Password).onChange((value) {this.formData.password value})}}
}避免过度使用
Component
struct OptimizedComponent {// ✅ 只对需要双向绑定的数据使用LinkLink editableData: string// ✅ 只读数据使用PropProp readOnlyData: string// ✅ 组件内部状态使用StateState localState: number 0build() {Column() {// 实现UI}}
}4.4 Provide/Consume修饰符
4.4.1 基本概念
Provide和Consume用于实现跨组件层级的数据共享避免多层props传递即prop drilling问题。
4.4.2 基础用法 interface IUser{name:string,role:string
}
// 顶层组件
Entry
Component
struct TestCase {Provide(theme) theme: string lightProvide(user) userInfo:IUser {name: tata,role: admin}build() {Column() {ConsumerComponent()}}
}// 消费组件可以是任意层级的子组件
Component
struct ConsumerComponent {Consume(theme) theme: stringConsume(user) userInfo: IUserbuild() {Column() {Text(Current Theme: ${this.theme})Text(User: ${this.userInfo.name})}}
}4.4.3 高级特性
使用别名
Component
struct AdvancedProvider {Provide(systemTheme) theme: string light
}Component
struct AdvancedConsumer {// 使用别名访问共享数据Consume(systemTheme) currentTheme: stringbuild() {Column() {Text(Theme: ${this.currentTheme})}}
}多层级数据共享
Component
struct AppRoot {Provide(globalState) userInfo:IUser {name:tata,role:admin}build() {Column() {// 可以被任意深度的子组件访问DeepNestedComponent()}}
}4.4.4 使用建议与最佳实践
合理的数据粒度
// ✅ 推荐适当的粒度
Component
struct GoodProvider {Provide(userSettings) settings: UserSettingsProvide(appTheme) theme: Theme
}// ❌ 避免过大的共享范围
Component
struct BadProvider {Provide(entireAppState) state: AppState
}性能优化
Component
struct OptimizedProvider {// 将频繁变化的数据和稳定数据分开Provide(staticConfig) staticConfig: Config // 稳定数据Provide(dynamicState) dynamicState: State // 变化数据build() {Column() {// 实现UI}}
}错误处理
Component
struct SafeConsumer {Consume(data) data?: DataType // 使用可选类型build() {Column() {if (this.data) {// 安全地使用数据Text(this.data.toString())} else {// 提供后备UIText(数据未就绪)}}}
}4.5 Watch修饰符
4.5.1 基本概念
Watch用于监听状态变量的变化当被监听的状态发生改变时会触发相应的回调函数。 #mermaid-svg-9Sk4KRGvocPD9cX2 {font-family:"trebuchet ms",verdana,arial,sans-serif;font-size:16px;fill:#333;}#mermaid-svg-9Sk4KRGvocPD9cX2 .error-icon{fill:#552222;}#mermaid-svg-9Sk4KRGvocPD9cX2 .error-text{fill:#552222;stroke:#552222;}#mermaid-svg-9Sk4KRGvocPD9cX2 .edge-thickness-normal{stroke-width:2px;}#mermaid-svg-9Sk4KRGvocPD9cX2 .edge-thickness-thick{stroke-width:3.5px;}#mermaid-svg-9Sk4KRGvocPD9cX2 .edge-pattern-solid{stroke-dasharray:0;}#mermaid-svg-9Sk4KRGvocPD9cX2 .edge-pattern-dashed{stroke-dasharray:3;}#mermaid-svg-9Sk4KRGvocPD9cX2 .edge-pattern-dotted{stroke-dasharray:2;}#mermaid-svg-9Sk4KRGvocPD9cX2 .marker{fill:#333333;stroke:#333333;}#mermaid-svg-9Sk4KRGvocPD9cX2 .marker.cross{stroke:#333333;}#mermaid-svg-9Sk4KRGvocPD9cX2 svg{font-family:"trebuchet ms",verdana,arial,sans-serif;font-size:16px;}#mermaid-svg-9Sk4KRGvocPD9cX2 .label{font-family:"trebuchet ms",verdana,arial,sans-serif;color:#333;}#mermaid-svg-9Sk4KRGvocPD9cX2 .cluster-label text{fill:#333;}#mermaid-svg-9Sk4KRGvocPD9cX2 .cluster-label span{color:#333;}#mermaid-svg-9Sk4KRGvocPD9cX2 .label text,#mermaid-svg-9Sk4KRGvocPD9cX2 span{fill:#333;color:#333;}#mermaid-svg-9Sk4KRGvocPD9cX2 .node rect,#mermaid-svg-9Sk4KRGvocPD9cX2 .node circle,#mermaid-svg-9Sk4KRGvocPD9cX2 .node ellipse,#mermaid-svg-9Sk4KRGvocPD9cX2 .node polygon,#mermaid-svg-9Sk4KRGvocPD9cX2 .node path{fill:#ECECFF;stroke:#9370DB;stroke-width:1px;}#mermaid-svg-9Sk4KRGvocPD9cX2 .node .label{text-align:center;}#mermaid-svg-9Sk4KRGvocPD9cX2 .node.clickable{cursor:pointer;}#mermaid-svg-9Sk4KRGvocPD9cX2 .arrowheadPath{fill:#333333;}#mermaid-svg-9Sk4KRGvocPD9cX2 .edgePath .path{stroke:#333333;stroke-width:2.0px;}#mermaid-svg-9Sk4KRGvocPD9cX2 .flowchart-link{stroke:#333333;fill:none;}#mermaid-svg-9Sk4KRGvocPD9cX2 .edgeLabel{background-color:#e8e8e8;text-align:center;}#mermaid-svg-9Sk4KRGvocPD9cX2 .edgeLabel rect{opacity:0.5;background-color:#e8e8e8;fill:#e8e8e8;}#mermaid-svg-9Sk4KRGvocPD9cX2 .cluster rect{fill:#ffffde;stroke:#aaaa33;stroke-width:1px;}#mermaid-svg-9Sk4KRGvocPD9cX2 .cluster text{fill:#333;}#mermaid-svg-9Sk4KRGvocPD9cX2 .cluster span{color:#333;}#mermaid-svg-9Sk4KRGvocPD9cX2 div.mermaidTooltip{position:absolute;text-align:center;max-width:200px;padding:2px;font-family:"trebuchet ms",verdana,arial,sans-serif;font-size:12px;background:hsl(80, 100%, 96.2745098039%);border:1px solid #aaaa33;border-radius:2px;pointer-events:none;z-index:100;}#mermaid-svg-9Sk4KRGvocPD9cX2 :root{--mermaid-font-family:"trebuchet ms",verdana,arial,sans-serif;} 状态变量改变 Watch监听 触发回调函数 执行自定义逻辑 更新UI/处理数据 4.5.2 基础用法
// 顶层组件
Entry
Component
struct TestCase {State Watch(onCountChange) count: number 0State message: string onCountChange() {this.message 计数变为 ${this.count.toString()}}build() {Column({ space: 20 }) {Text(Current count: ${this.count})Text(this.message)Button(Increment).onClick(() {this.count})}}
}
4.5.3 高级用法
监听多个属性
Component
struct MultiWatchDemo {State Watch(onScoreChange) score: number 0State Watch(onScoreChange) bonus: number 0// 监听多个数值变化onScoreChange() {console.info(Total: ${this.score this.bonus})}build() {Column() {// UI实现}}
}条件监听
Component
struct ConditionalWatchDemo {State Watch(onValueChange) value: number 0State isEnabled: boolean trueonValueChange(newValue: number, oldValue: number) {if (this.isEnabled) {// 只在启用状态下处理变化this.handleValueChange(newValue, oldValue)}}private handleValueChange(newVal: number, oldVal: number) {// 处理逻辑}build() {Column() {Switch().checked(this.isEnabled).onChange((value: boolean) {this.isEnabled value})}}
}4.5.4 Watch使用场景
表单验证
Component
struct FormValidationDemo {State Watch(validateEmail) email: string State emailError: string validateEmail(newValue: string) {const emailRegex /^[^\s][^\s]\.[^\s]$/if (!emailRegex.test(newValue)) {this.emailError 请输入有效的邮箱地址} else {this.emailError }}build() {Column({ space: 10 }) {TextInput({ placeholder: 请输入邮箱 }).onChange((value: string) {this.email value})if (this.emailError) {Text(this.emailError).fontSize(12).fontColor(Color.Red)}}}
}数据同步
Component
struct DataSyncDemo {State Watch(syncToServer) localData: IUser {}async syncToServer(newValue: IUser) {try {await this.saveToServer(newValue)console.info(Data synced successfully)} catch (error) {console.error(Sync failed:, error)}}private async saveToServer(data: object) {// 实现服务器同步逻辑}build() {Column() {// UI实现}}
}4.5.5 最佳实践
性能优化 Component
struct WatchOptimizationDemo {State Watch(onDataChange) data: IUser {name:tata,role:admin}// ✅ 优化添加防抖处理private debounceTimer: number -1onDataChange() {if (this.debounceTimer ! -1) {clearTimeout(this.debounceTimer)}this.debounceTimer setTimeout(() {this.processDataChange(this.data)this.debounceTimer -1}, 300)}private processDataChange(data: IUser) {// 处理数据变化}build() {Column() {// UI实现}}
}
错误处理
Component
struct WatchErrorHandlingDemo {State Watch(onDataChange) data: IUser {name:tata,role:admin}onDataChange() {try {// 数据验证if (!this.isValidData(this.data)) {throw new Error(Invalid data format)}// 处理数据this.processData(this.data)} catch (error) {console.error(Error in watch handler:, error)// 恢复到之前的值// 显示错误提示this.showError(error.message)}}private isValidData(data: IUser): boolean {// 实现数据验证逻辑return true}private processData(data: IUser) {// 处理数据}private showError(message: string) {// 显示错误提示}build() {Column() {// UI实现}}
}4.5.6 Watch注意事项
避免无限循环
Component
struct WatchCycleDemo {State Watch(onValueChange) value1: number 0State Watch(onValue2Change) value2: number 0// ❌ 错误可能导致无限循环onValueChange() {this.value2 // 触发value2的watch}onValue2Change() {this.value1 // 触发value1的watch}// ✅ 正确添加循环保护private updateCount: number 0private readonly MAX_UPDATES: number 3onSafeValueChange() {if (this.updateCount this.MAX_UPDATES) {this.updateCountthis.value2} else {this.updateCount 0}}
}同步与异步处理
Component
struct WatchAsyncDemo {State Watch(onDataChange) data: object {}// ✅ 处理异步操作async onDataChange(newValue: object) {try {await this.validateData(newValue)await this.saveData(newValue)} catch (error) {console.error(Async operation failed:, error)}}private async validateData(data: object): Promisevoid {// 异步数据验证}private async saveData(data: object): Promisevoid {// 异步保存数据}build() {Column() {// UI实现}}
}Watch 回调函数实际上不支持有效的参数传递回调函数中第一个参数是被监听属性的名称字符串 4.6 Observed/ObjectLink修饰符
4.6.1 基本概念
Observed和ObjectLink是用于对象类型数据的响应式管理修饰符
Observed将一个类标记为可观察对象ObjectLink用于在组件间建立对象的引用关系实现对象级别的双向同步 #mermaid-svg-5eOoV8UH75sXcGU5 {font-family:"trebuchet ms",verdana,arial,sans-serif;font-size:16px;fill:#333;}#mermaid-svg-5eOoV8UH75sXcGU5 .error-icon{fill:#552222;}#mermaid-svg-5eOoV8UH75sXcGU5 .error-text{fill:#552222;stroke:#552222;}#mermaid-svg-5eOoV8UH75sXcGU5 .edge-thickness-normal{stroke-width:2px;}#mermaid-svg-5eOoV8UH75sXcGU5 .edge-thickness-thick{stroke-width:3.5px;}#mermaid-svg-5eOoV8UH75sXcGU5 .edge-pattern-solid{stroke-dasharray:0;}#mermaid-svg-5eOoV8UH75sXcGU5 .edge-pattern-dashed{stroke-dasharray:3;}#mermaid-svg-5eOoV8UH75sXcGU5 .edge-pattern-dotted{stroke-dasharray:2;}#mermaid-svg-5eOoV8UH75sXcGU5 .marker{fill:#333333;stroke:#333333;}#mermaid-svg-5eOoV8UH75sXcGU5 .marker.cross{stroke:#333333;}#mermaid-svg-5eOoV8UH75sXcGU5 svg{font-family:"trebuchet ms",verdana,arial,sans-serif;font-size:16px;}#mermaid-svg-5eOoV8UH75sXcGU5 .label{font-family:"trebuchet ms",verdana,arial,sans-serif;color:#333;}#mermaid-svg-5eOoV8UH75sXcGU5 .cluster-label text{fill:#333;}#mermaid-svg-5eOoV8UH75sXcGU5 .cluster-label span{color:#333;}#mermaid-svg-5eOoV8UH75sXcGU5 .label text,#mermaid-svg-5eOoV8UH75sXcGU5 span{fill:#333;color:#333;}#mermaid-svg-5eOoV8UH75sXcGU5 .node rect,#mermaid-svg-5eOoV8UH75sXcGU5 .node circle,#mermaid-svg-5eOoV8UH75sXcGU5 .node ellipse,#mermaid-svg-5eOoV8UH75sXcGU5 .node polygon,#mermaid-svg-5eOoV8UH75sXcGU5 .node path{fill:#ECECFF;stroke:#9370DB;stroke-width:1px;}#mermaid-svg-5eOoV8UH75sXcGU5 .node .label{text-align:center;}#mermaid-svg-5eOoV8UH75sXcGU5 .node.clickable{cursor:pointer;}#mermaid-svg-5eOoV8UH75sXcGU5 .arrowheadPath{fill:#333333;}#mermaid-svg-5eOoV8UH75sXcGU5 .edgePath .path{stroke:#333333;stroke-width:2.0px;}#mermaid-svg-5eOoV8UH75sXcGU5 .flowchart-link{stroke:#333333;fill:none;}#mermaid-svg-5eOoV8UH75sXcGU5 .edgeLabel{background-color:#e8e8e8;text-align:center;}#mermaid-svg-5eOoV8UH75sXcGU5 .edgeLabel rect{opacity:0.5;background-color:#e8e8e8;fill:#e8e8e8;}#mermaid-svg-5eOoV8UH75sXcGU5 .cluster rect{fill:#ffffde;stroke:#aaaa33;stroke-width:1px;}#mermaid-svg-5eOoV8UH75sXcGU5 .cluster text{fill:#333;}#mermaid-svg-5eOoV8UH75sXcGU5 .cluster span{color:#333;}#mermaid-svg-5eOoV8UH75sXcGU5 div.mermaidTooltip{position:absolute;text-align:center;max-width:200px;padding:2px;font-family:"trebuchet ms",verdana,arial,sans-serif;font-size:12px;background:hsl(80, 100%, 96.2745098039%);border:1px solid #aaaa33;border-radius:2px;pointer-events:none;z-index:100;}#mermaid-svg-5eOoV8UH75sXcGU5 :root{--mermaid-font-family:"trebuchet ms",verdana,arial,sans-serif;} Observed类 创建可观察对象 ObjectLink引用 子组件 响应式更新 父组件 4.6.2 基础用法
// 定义可观察类
Observed
class Student {name: stringage: numberscores: number[]constructor(name: string, age: number) {this.name namethis.age agethis.scores []}
}// 父组件
Component
struct ParentComponent {// 创建可观察对象实例State student: Student new Student(tata, 18)build() {Column() {// 传递给子组件StudentCard({ studentInfo: this.student })Button(修改信息).onClick(() {this.student.agethis.student.scores.push(100)})}}
}// 子组件
Component
struct StudentCard {// 使用ObjectLink引用父组件的对象ObjectLink studentInfo: Studentbuild() {Column() {Text(姓名: ${this.studentInfo.name})Text(年龄: ${this.studentInfo.age})ForEach(this.studentInfo.scores, (score:number) {Text(分数: ${score})})}}
}4.6.3 关键点
类级别装饰器
// ✅ 正确整个类使用 Observed
Observed
class Model {property1: stringproperty2: number
}// ❌ 错误不能装饰属性
class WrongModel {Observed property: string // 这是错误的用法
}嵌套对象处理
Observed
class Parent {child: Child // 如果 Child 需要观察Child 类也需要使用 Observed 装饰器
}Observed
class Child {name: string
}数组处理
Observed
class TodoList {items: ArrayTodoItem // TodoItem 类需要使用 ObservedaddItem(item: TodoItem) {this.items.push(item)}
}Observed
class TodoItem {content: stringcompleted: boolean
}4.6.4 实际应用示例
// 定义观察类
Observed
class Profile {name: stringage: numberconstructor(name: string, age: number) {this.name namethis.age age}
}// 父组件
Component
struct ProfileManager {State profile: Profile new Profile(tata, 25)build() {Column() {// 传递给子组件ProfileEditor({ userProfile: this.profile })ProfileDisplay({ userProfile: this.profile })}}
}// 编辑组件
Component
struct ProfileEditor {ObjectLink userProfile: Profilebuild() {Column() {Button(修改年龄).onClick(() {this.userProfile.age // 直接修改将触发更新})}}
}// 显示组件
Component
struct ProfileDisplay {ObjectLink userProfile: Profilebuild() {Column() {Text(姓名: ${this.userProfile.name})Text(年龄: ${this.userProfile.age})}}
}4.6.5 注意事项
Observed 只能用于类声明不能用于装饰类的属性嵌套对象如需响应式需要分别使用 Observed 装饰器配合 ObjectLink 使用来实现组件间的数据同步观察对象的属性修改会自动触发相关组件的更新
对比
让我详细对比这些修饰符的区别 #mermaid-svg-2XemuPfPnJJuGk31 {font-family:"trebuchet ms",verdana,arial,sans-serif;font-size:16px;fill:#333;}#mermaid-svg-2XemuPfPnJJuGk31 .error-icon{fill:#552222;}#mermaid-svg-2XemuPfPnJJuGk31 .error-text{fill:#552222;stroke:#552222;}#mermaid-svg-2XemuPfPnJJuGk31 .edge-thickness-normal{stroke-width:2px;}#mermaid-svg-2XemuPfPnJJuGk31 .edge-thickness-thick{stroke-width:3.5px;}#mermaid-svg-2XemuPfPnJJuGk31 .edge-pattern-solid{stroke-dasharray:0;}#mermaid-svg-2XemuPfPnJJuGk31 .edge-pattern-dashed{stroke-dasharray:3;}#mermaid-svg-2XemuPfPnJJuGk31 .edge-pattern-dotted{stroke-dasharray:2;}#mermaid-svg-2XemuPfPnJJuGk31 .marker{fill:#333333;stroke:#333333;}#mermaid-svg-2XemuPfPnJJuGk31 .marker.cross{stroke:#333333;}#mermaid-svg-2XemuPfPnJJuGk31 svg{font-family:"trebuchet ms",verdana,arial,sans-serif;font-size:16px;}#mermaid-svg-2XemuPfPnJJuGk31 .label{font-family:"trebuchet ms",verdana,arial,sans-serif;color:#333;}#mermaid-svg-2XemuPfPnJJuGk31 .cluster-label text{fill:#333;}#mermaid-svg-2XemuPfPnJJuGk31 .cluster-label span{color:#333;}#mermaid-svg-2XemuPfPnJJuGk31 .label text,#mermaid-svg-2XemuPfPnJJuGk31 span{fill:#333;color:#333;}#mermaid-svg-2XemuPfPnJJuGk31 .node rect,#mermaid-svg-2XemuPfPnJJuGk31 .node circle,#mermaid-svg-2XemuPfPnJJuGk31 .node ellipse,#mermaid-svg-2XemuPfPnJJuGk31 .node polygon,#mermaid-svg-2XemuPfPnJJuGk31 .node path{fill:#ECECFF;stroke:#9370DB;stroke-width:1px;}#mermaid-svg-2XemuPfPnJJuGk31 .node .label{text-align:center;}#mermaid-svg-2XemuPfPnJJuGk31 .node.clickable{cursor:pointer;}#mermaid-svg-2XemuPfPnJJuGk31 .arrowheadPath{fill:#333333;}#mermaid-svg-2XemuPfPnJJuGk31 .edgePath .path{stroke:#333333;stroke-width:2.0px;}#mermaid-svg-2XemuPfPnJJuGk31 .flowchart-link{stroke:#333333;fill:none;}#mermaid-svg-2XemuPfPnJJuGk31 .edgeLabel{background-color:#e8e8e8;text-align:center;}#mermaid-svg-2XemuPfPnJJuGk31 .edgeLabel rect{opacity:0.5;background-color:#e8e8e8;fill:#e8e8e8;}#mermaid-svg-2XemuPfPnJJuGk31 .cluster rect{fill:#ffffde;stroke:#aaaa33;stroke-width:1px;}#mermaid-svg-2XemuPfPnJJuGk31 .cluster text{fill:#333;}#mermaid-svg-2XemuPfPnJJuGk31 .cluster span{color:#333;}#mermaid-svg-2XemuPfPnJJuGk31 div.mermaidTooltip{position:absolute;text-align:center;max-width:200px;padding:2px;font-family:"trebuchet ms",verdana,arial,sans-serif;font-size:12px;background:hsl(80, 100%, 96.2745098039%);border:1px solid #aaaa33;border-radius:2px;pointer-events:none;z-index:100;}#mermaid-svg-2XemuPfPnJJuGk31 :root{--mermaid-font-family:"trebuchet ms",verdana,arial,sans-serif;} 状态管理修饰符 State Prop Link Observed/ObjectLink 组件内状态管理 单向数据流 双向数据绑定 对象级响应式 1. 使用场景对比
修饰符使用对象数据流向使用场景State基本类型/对象/数组组件内部管理组件内部状态Prop基本类型/对象/数组父 - 子父组件向子组件传递数据Link基本类型/对象/数组双向父子组件双向数据同步Observed/ObjectLink类实例多组件共享复杂对象的响应式管理
2. 具体示例对比
// State组件内部状态管理
Component
struct StateExample {State count: number 0 // 组件内部状态build() {Column() {Text(Count: ${this.count})Button(Add).onClick(() this.count)}}
}// Prop单向数据流
Component
struct PropExample {Prop title: string // 从父组件接收数据build() {Text(this.title)}
}// Link双向数据绑定
Component
struct LinkExample {Link message: string // 与父组件双向绑定build() {TextInput({ text: this.message }).onChange((value: string) {this.message value // 修改会影响父组件})}
}// Observed对象响应式
Observed
class User {name: stringage: numberconstructor(name: string, age: number) {this.name namethis.age age}
}Component
struct ObservedExample {State user: User new User(tata, 25)build() {Column() {UserCard({ userInfo: this.user }) // 传递给子组件}}
}Component
struct UserCard {ObjectLink userInfo: User // 引用观察对象build() {Column() {Text(Name: ${this.userInfo.name})Button(Age).onClick(() {this.userInfo.age // 直接修改对象属性})}}
}3. 特点对比
State
用于组件内部状态管理值变化会触发组件重新渲染可以管理任何类型的数据
State count: number 0
State user: Object {}
State list: string[] []Prop
实现单向数据流子组件不能直接修改父组件数据父组件数据变化会更新子组件
// 父组件
State title: string Hello
// 子组件使用
Prop title: stringLink
实现双向数据绑定子组件可以直接修改数据数据变化双向同步
// 父组件
State message: string
// 子组件使用
Link message: stringObserved/ObjectLink
用于复杂对象的响应式管理自动跟踪对象属性变化支持多组件共享和同步
Observed
class Model {// 整个类的属性都会被观察
}ObjectLink model: Model // 引用观察对象4. 数据同步方式对比
// State组件内直接修改
State value: number 0
this.value 1 // 直接赋值// Prop不能直接修改
Prop title: string
this.title new // ❌ 错误// Link双向同步
Link count: number
this.count // ✅ 会同步到父组件// Observed对象属性修改
ObjectLink user: User
this.user.name new name // ✅ 自动触发更新
