ArkTS框架深度解析：@Prop、@Link、@ObjectLink装饰器的应用与同步机制

已于 2023-12-27 15:56:20 修改
阅读量2.3k 收藏 26
点赞数 29
CC 4.0 BY-SA版权
分类专栏： 鸿蒙HarmonyOS从基础到深入实战 文章标签： ArkTS 鸿蒙开发 鸿蒙北向开发 harmonyOS
于 2023-11-27 18:49:50 首次发布
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.youkuaiyun.com/weixin_52908342/article/details/134652022
本文详细介绍了ArkTS框架中的@Prop和@Link装饰器，用于HarmonyOS开发。@Prop支持单向同步，@Link则实现双向同步。文中探讨了它们的限制、使用规则、场景以及高级用法，强调了避免循环引用和合理选择装饰器的重要性。

摘要生成于 C知道 ，由 DeepSeek-R1 满血版支持， 前往体验 >

文章目录

ArkTS框架深度解析：@Prop、@Link、@ObjectLink装饰器的应用与同步机制【HarmonyOS开发】

ARKTS是一个功能强大的前端框架，提供了丰富的装饰器来简化组件之间的数据传递和同步。在本文中，我们将深入探讨两个关键装饰器：@Prop和@Link。

@Prop装饰器

概述

@Prop装饰的变量允许与父组件建立单向的同步关系。这意味着@Prop装饰的变量可以在本地修改，但修改后的变化不会同步回其父组件。

限制条件

  • 复杂类型时是深拷贝，在拷贝的过程中除了基本类型、Map、Set、Date、Array外，都会丢失类型。
  • 不能在@Entry装饰的自定义组件中使用。

使用规则说明

  • @Prop变量装饰器

    • 参数：无
    • 同步类型：单向同步
    • 允许装饰的变量类型：string、number、boolean、enum类型
    • 不支持any，不允许使用undefined和null
    • 必须指定类型

  • 被装饰变量的初始值

了解本专栏 订阅专栏 解锁全文
HarmonyOS—ArkTS中@Observed和@ObjectLink装饰器的嵌套类对象属性变化
一键难忘的博客
11-27 2086
HarmonyOS—ArkTS中@Observed和@ObjectLink装饰器的嵌套类对象属性变化【鸿蒙应用开发】 在ARKTS的开发中，为了更好地支持嵌套类对象的属性变化，引入了`@Observed`和`@ObjectLink`两个装饰器。这两个装饰器允许在涉及嵌套对象或数组的情境中进行双向数据同步，特别是在二维数组、数组项class、或者class的属性是class等多层嵌套的情况下。
构建第一个ArkTS应用之@Prop装饰器：父子单向同步
二当家的
04-29 906
Prop变量允许在本地修改，但修改后的变化不会同步回父组件。当父组件中的数据源更改时，与之相关的@Prop装饰的变量都会自动更新。如果子组件已经在本地修改了@Prop装饰的相关变量值，而在父组件中对应的@State装饰的变量被修改后，子组件本地修改的@Prop装饰的相关变量值将被覆盖。
第四讲_ArkTS装饰器（一）
wenqi1992的博客
01-18 1068
介绍@Builder和@BuilderParam装饰器
ArkTS - @Prop、@Link
记录点滴
01-01 1888
@Prop 装饰器 和@Link装饰器都是父组件向子组件传递参数，子组件接收父组件参数的时候用的，变量前边需要加上@Prop或者@Link装饰器即可。（跟前端vue中父组件向子组件传递参数类似）
鸿蒙5.0开发【如何在ArkTS中实现自定义装饰器能力】应用运维
最新发布
鸿蒙的技术博客
05-06 113
ArkTS支持TS5.0之前的TS装饰器语法。
arkts状态管理使用（@State、@Prop、@Link、@Provide、@Consume、@objectLink和@observed）
qq_72760247的博客
12-31 2224
arkts状态管理使用（@State、@Prop、@Link、@Provide、@Consume、@objectLink和@observed）
ArkTs-装饰器
qq_36859035的博客
04-12 491
详情点击链接： 添加链接描述
ArkTS 状态管理@Prop、@Link
a_strong_pig的博客
12-19 1570
ArkTS中@Prop、@Link、@Provide、@Consume装饰器的使用
ArkTS状态管理装饰器V1版本（@State、@Prop、@Link、@ObjectLink、@Provide、@Consume、@StorageProp、@StorageLink等）
AIWWY的博客
03-27 1158
Component装饰器仅能装饰struct关键字声明的数据结构。struct被@Component装饰后具备组件化的能力，需要实现build方法描述UI，一个struct只能被一个@Component装饰。@Component可以接受一个可选的bool类型参数，用来冻结自定义组件（冻结的组件不会随@state变量更新变化UI）。组件冻结选项。名称类型必填说明bool否是否开启组件冻结。
HarmonyOS NEXT应用开发：ArkTS语言状态管理-@Observed装饰器和@ObjectLink装饰器：嵌套类对象属性变化
ZPYQAQ的博客
01-16 795
上文所述的装饰器仅能观察到第一层的变化，但是在实际应用开发中，应用会根据开发需要，封装自己的数据模型。
ArkTs 语法学习 ---- 装饰器
weixin_45222417的博客
03-21 1035
允许父组件中常规变量、@State、@Link、@Prop、@Provide、@Consume、@ObjectLink、@StorageLink、@StorageProp、@LocalStorageLink和@LocalStorageProp装饰的变量装饰变量更新绑定子组件@Provide。不支持Length、ResourceStr、ResourceColor类型，Length、ResourceStr、ResourceColor为简单类型和复杂类型的联合类型。
HarmonyOS NEXT开发（Beta6）自定义组件@BuilderParam装饰器详解
wewqeqwrqw的博客
09-08 1216
​ @BuilderParam装饰的方法只能被自定义构建函数（@Builder装饰的方法）初始化。如果在API 11中和@Require结合使用，则必须父组件构造传参。 ​
ArkTs 状态管理装饰器
2301_80107415的博客
01-06 916
2.@State装饰的变量的特点。
第八讲_ArkTS装饰器（五）
wenqi1992的博客
01-20 638
介绍@Watch装饰器，以及接下来博客内容的预告
鸿蒙Harmony应用开发—ArkTS（@Styles装饰器：定义组件重用样式）
m0_64420071的博客
03-22 1941
@Styles装饰器：定义组件重用样式
鸿蒙Harmony应用开发—ArkTS（@State装饰器：组件内状态）
m0_64420071的博客
03-22 2559
@State装饰器：组件内状态
鸿蒙Harmony应用开发—ArkTS（@Link装饰器：父子双向同步）
m0_64420071的博客
03-22 2823
@Link装饰器：父子双向同步
鸿蒙Harmony应用开发—ArkTS（@Prop装饰器：父子单向同步）
m0_64420071的博客
03-22 1646
@Prop装饰器：父子单向同步
HarmonyOS ArkTS学习-状态管理-@Link
weixin_43725192的博客
06-03 667
鸿蒙系统应用开发ArkTS 状态管理 @Link使用
@Prop改为@Objectlink
03-24
### 更改 `@Prop` 注解为 `@ObjectLink` 的相关用法 当考虑将注解从 `@Prop` 替换为 `@ObjectLink` 时，主要关注的是两者之间的功能差异以及如何实现相同的目标。以下是详细的说明： #### 功能对比 - **`@Prop`**: 这种注解通常用于声明组件的输入属性，类似于 Vue.js 中的 props 或 React 中的 props 属性[^1]。 - **`@ObjectLink`**: 基于上下文推测，这种注解可能具有双向绑定的功能特性，允许父子组件之间共享状态并保持同步[^4]。 如果目标是从单向数据流切换到双向绑定，则需要调整代码逻辑以支持这一变化。 --- ### 实现方式 假设我们有一个场景，在该场景下原本通过 `@Prop` 定义的数据现在需要用 `@ObjectLink` 来替代。下面是一个具体的例子来展示转换过程。 #### 示例代码：原始版本（使用 `@Prop`） ```typescript import { Component } from 'some-framework'; @Component({ selector: 'child-component', }) export class ChildComponent { @Prop() data!: string; updateData(newData: string): void { console.log('Updated Data:', newData); } } ``` 在这个例子中，`data` 是由父组件传递给子组件的一个只读属性。 --- #### 转换后的版本（使用 `@ObjectLink`） 为了使 `@ObjectLink` 支持双向绑定，我们需要确保它不仅能够接收来自父组件的状态，还能够在子组件内部对其进行修改并将更改反映回父组件。 ```typescript import { Component, ObjectLink } from 'some-framework'; @Component({ selector: 'child-component', }) export class ChildComponent { @ObjectLink() data!: string; // 双向绑定 updateData(newData: string): void { this.data = newData; // 修改会自动同步到父组件 console.log('Updated Data via ObjectLink:', newData); } } ``` 在此情况下，`@ObjectLink` 不仅接受初始值，还会监听任何对该变量所做的变更，并将其传播至关联的对象或组件实例。 --- ### 关键点分析 1. **元数据管理** 如果需要进一步扩展功能，比如附加额外的行为或者验证机制，可以通过反射 API 设置自定义元数据: ```typescript Reflect.defineMetadata('isEditable', true, ChildComponent.prototype, 'data'); const isEditable = Reflect.getMetadata('isEditable', ChildComponent.prototype, 'data'); ``` 2. **图像语法的支持** 对某些框架而言，注册自定义属性后可启用特定标记语言解析能力[^2]。例如： ```html <custom-element image="path/to/image.png"></custom-element> ``` 3. **依赖注入与自动化装配** 类似 Spring 框架中的依赖注入概念[^3]，也可以引入类似的容器化解决方案简化复杂关系处理流程。不过这取决于具体技术栈的选择。 --- ### 总结 上述讨论展示了如何利用 `@ObjectLink` 替代传统意义上的 `@Prop` 注解完成更加灵活的任务需求。需要注意实际开发过程中应当仔细评估两者的适用范围及其潜在影响因素。
评论 2
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包

打赏作者

一键难忘

你的鼓励将是我创作的最大动力

¥1 ¥2 ¥4 ¥6 ¥10 ¥20
扫码支付：¥1
获取中
扫码支付

您的余额不足，请更换扫码支付或充值

打赏作者

实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值