鸿蒙HarmonyOS装饰器详解

✍️作者简介：小北编程（专注于HarmonyOS、Android、Java、Web、TCP/IP等技术方向）
🐳博客主页： 开源中国、稀土掘金、51cto博客、博客园、知乎、简书、慕课网、CSDN
🔔如果文章对您有一定的帮助请👉关注✨、点赞👍、收藏📂、评论💬。
🔥如需转载请参考【转载须知】

在 HarmonyOS 的开发中，装饰器是一种非常强大的工具，用于声明组件的行为和数据管理。以下是几个关键装饰器的介绍及其用法。

一. @Entry

• 这个装饰器用于标记页面的入口点，必须声明在页面的主结构上。
• 示例：

@Entry
@Component
struct Index {
    aboutToAppear() {
        console.log('页面初始化：Index');
    }

    build() {
        // 页面构建逻辑
        Column() {
            Text('这是主页')
                .fontSize(24)
                .margin(10)
        }
    }
}

日志输出:

页面初始化：Index

二. @Component

• 该装饰器用于声明页面或子组件的构建结构。
• 示例：

@Component
struct MyComponent {
    aboutToAppear() {
        console.log('组件初始化：MyComponent');
    }

    build() {
        Row() {
            Text('Hello World')
        }
    }
}

日志输出:

组件初始化：MyComponent

三. @State

• @State 用于声明组件内的可变状态。当状态值改变时，UI 将自动重新渲染。
• 示例：

@Entry
@Component
struct Index {
    @State message: string = 'Hello World'

    aboutToAppear() {
        console.log(`初始消息: ${this.message}`);
    }

    build() {
        Column() {
            Button('修改消息')
                .onClick(() => {
                    this.message = '消息已修改';
                })
            Text(this.message)
        }
    }
}

日志输出:

初始消息: Hello World
消息更新为: 消息已修改

四. @Link

• 用于父组件与子组件之间的双向绑定，允许子组件更新父组件中的数据。
• 示例：

@Component
struct ParentComponent {
    @State parentMessage: string = '父组件消息'

    aboutToAppear() {
        console.log('父组件初始化');
    }

    build() {
        Column() {
            ChildComponent({ m: $parentMessage })
            Button('更新父组件消息')
                .onClick(() => {
                    this.parentMessage = '父组件消息已更新';
                })
        }
    }
}

@Component
struct ChildComponent {
    @Link m: string

    aboutToAppear() {
        console.log(`子组件接收到的消息: ${this.m}`);
    }

    build() {
        Text(`子组件显示: ${this.m}`)
    }
}

日志输出:

父组件初始化
子组件接收到的消息: 父组件消息
子组件接收到的消息: 父组件消息已更新

五. @Prop

• 用于父组件向子组件传递数据，但子组件不能修改父组件的数据（单向绑定）。
• 示例：

@Component
struct ParentComponent {
    @State parentData: string = '父组件数据'

    aboutToAppear() {
        console.log('父组件初始化');
    }

    build() {
        Column() {
            ChildComponent({ data: this.parentData })
            Button('更新父组件数据')
                .onClick(() => {
                    this.parentData = '父组件数据已更新';
                })
        }
    }
}

@Component
struct ChildComponent {
    @Prop data: string

    aboutToAppear() {
        console.log(`子组件接收到的数据: ${this.data}`);
    }

    build() {
        Text(`子组件显示: ${this.data}`)
    }
}

日志输出:

父组件初始化
子组件接收到的数据: 父组件数据
子组件接收到的数据: 父组件数据已更新

六. @Provide 和 @Consume

• @Provide 用于在父组件中提供数据，@Consume 用于后代组件获取数据，形成双向数据同步。
• 示例：

@Component
struct ParentComponent {
    @Provide msg: string = '父组件提供的数据'

    aboutToAppear() {
        console.log('父组件初始化，提供数据');
    }

    build() {
        Column() {
            ChildComponent()
        }
    }
}

@Component
struct ChildComponent {
    @Consume msg: string

    aboutToAppear() {
        console.log(`子组件接收到的共享数据: ${this.msg}`);
    }

    build() {
        Text(`共享数据: ${this.msg}`)
    }
}

日志输出:

父组件初始化，提供数据
子组件接收到的共享数据: 父组件提供的数据

七. @Observed 和 @ObjectLink

• @Observed 用于观察类实例的变化，@ObjectLink 允许子组件与父组件中的对象建立双向绑定。
• 示例：

@Observed
class MyData {
    value: number = 0
}

@Component
struct ParentComponent {
    @State myData: MyData = new MyData()

    aboutToAppear() {
        console.log('父组件初始化');
    }

    build() {
        Column() {
            ChildComponent({ obj: $myData })
            Button('增加数据值')
                .onClick(() => {
                    this.myData.value += 1;
                    console.log(`父组件数据值更新: ${this.myData.value}`);
                })
        }
    }
}

@Component
struct ChildComponent {
    @ObjectLink obj: MyData

    aboutToAppear() {
        console.log(`子组件接收到的数据值: ${this.obj.value}`);
    }

    build() {
        Text(`数据值: ${this.obj.value}`)
    }
}

日志输出:

父组件初始化
子组件接收到的数据值: 0
父组件数据值更新: 1
子组件接收到的数据值: 1

在 HarmonyOS 的开发中，除了你已经列出的装饰器，还有一些其他重要的装饰器和属性，用于进一步增强组件的功能和数据管理。以下是一些额外的装饰器及其用法：

八. @ObjectLink

• 功能: 允许子组件与父组件中的对象建立双向绑定。
• 示例：

@Observed
class MyData {
    value: number = 0
}

@Component
struct ParentComponent {
    @State myData: MyData = new MyData()

    build() {
        Column() {
            ChildComponent({ obj: $myData })
            Button('增加数据值')
                .onClick(() => {
                    this.myData.value += 1;
                })
        }
    }
}

@Component
struct ChildComponent {
    @ObjectLink obj: MyData

    build() {
        Text(`数据值: ${this.obj.value}`)
    }
}

九. @Watch

• 功能: 观察状态变化并触发回调函数。
• 示例：

@Component
struct WatchExample {
    @State count: number = 0

    @Watch('count')
    onCountChange(newValue: number) {
        console.log(`Count has changed to: ${newValue}`);
    }

    build() {
        Button('Increase Count')
            .onClick(() => {
                this.count += 1;
            })
    }
}

十. @Styles

• 功能: 定义组件的样式。
• 示例：

@Component
@Styles({
    container: {
        backgroundColor: 'lightblue',
        padding: '10px',
    }
})
struct StyledComponent {
    build() {
        Column({ class: 'container' }) {
            Text('这是一个带样式的组件')
        }
    }
}

十一. @StorageProp

• 功能: 允许将组件的属性值存储到本地存储。
• 示例：

@Component
struct StorageExample {
    @StorageProp myData: string = '默认数据'

    build() {
        Column() {
            Text(`存储的数据: ${this.myData}`)
            Button('保存数据')
                .onClick(() => {
                    this.myData = '新数据';
                })
        }
    }
}

十二. @StorageLink

• 功能: 允许将组件的属性与本地存储中的数据进行双向绑定。
• 示例：

@Component
struct StorageLinkExample {
    @StorageLink myData: string = '默认数据'

    build() {
        Column() {
            Text(`存储的数据: ${this.myData}`)
            Button('更新数据')
                .onClick(() => {
                    this.myData = '更新后的数据';
                })
        }
    }
}

十三. @LocalStorageProp

• 功能: 允许将组件的属性存储在本地存储中，类似于 @StorageProp，但用于局部存储。
• 示例：

@Component
struct LocalStorageExample {
    @LocalStorageProp myLocalData: string = '默认本地数据'

    build() {
        Column() {
            Text(`本地存储的数据: ${this.myLocalData}`)
            Button('保存本地数据')
                .onClick(() => {
                    this.myLocalData = '新本地数据';
                })
        }
    }
}

十四. @LocalStorageLink

• 功能: 允许将组件的属性与本地存储中的数据进行双向绑定。
• 示例：

@Component
struct LocalStorageLinkExample {
    @LocalStorageLink myLocalData: string = '默认本地数据'

    build() {
        Column() {
            Text(`本地存储的数据: ${this.myLocalData}`)
            Button('更新本地数据')
                .onClick(() => {
                    this.myLocalData = '更新后的本地数据';
                })
        }
    }
}

十五. @Extend

• 功能: 用于扩展现有的组件或功能，允许自定义扩展。
• 示例：

@Extend(MyComponent)
@Component
struct ExtendedComponent {
    build() {
        // 扩展现有组件的功能
        Column() {
            Text('扩展功能组件')
        }
    }
}

十六. @Concurrent

• 功能: 用于标记组件的并发执行，允许组件的并发操作。
• 示例：

@Concurrent
@Component
struct ConcurrentComponent {
    build() {
        Column() {
            Text('并发组件示例')
        }
    }
}

---

以上示例展示了如何在 HarmonyOS ArkUI 中使用装饰器来声明组件行为和数据管理，并通过生命周期钩子代替 build() 中的日志输出，以确保不会影响 UI 的性能。这样不仅能确保调试日志的输出，也能保持代码的清晰和可维护性。

👍 点赞，是我创作的动力！
⭐️ 收藏，是我努力的指引！
✏️ 评论，是我进步的宝藏！
💖 衷心感谢你的阅读以及支持！