HarmonyOS Next面试题之装饰器@Prop与@Link的区别和使用

一、核心区别特性PropLink数据流向单向父 → 子双向父 ⇄ 子子组件能否修改可以修改但不会同步回父组件修改会立即同步回父组件初始值来源父组件传递的值或本地默认值必须由父组件传递 $ 绑定的变量传递方式值拷贝深拷贝对对象类型会递归复制引用传递建立双向绑定性能父组件变化时子组件会重新渲染任意一端变化两端都会重新渲染适用场景子组件仅需展示父组件数据或内部临时修改不影响外部子组件需要修改父组件数据如表单、开关Prop 装饰器的作用父组件将数据单向传递给子组件子组件通过 Prop 接收后可以将其视为自己的局部状态进行修改但这些修改不会影响父组件。当父组件的源数据变化时子组件的 Prop 会自动更新重新赋值并触发渲染。Prop 装饰器的使用规则子组件中 Prop 变量可以初始化默认值如果父组件未传则使用默认值。父组件在子组件标签中直接传递普通变量无需 $ 符号。对于对象类型Prop 会进行深拷贝因此子组件内部修改对象的属性不会影响父组件对象。Link 装饰器的作用建立父子组件之间的双向同步子组件通过 Link 接收父组件的状态无论哪一方修改该值另一方都会自动更新。Link 的使用规则子组件中 Link 变量不能初始化默认值必须由父组件传递。父组件在子组件标签中必须传递被 $ 符号包裹的变量如 $parentState表示建立双向绑定。Link 传递的是引用因此子组件内修改对象的属性会直接反映到父组件。二、场景使用场景示例父组件有一个计数器子组件可以显示并修改它。使用 Prop单向// 父组件Entry Component struct Parent{State count:number10;build(){Column(){Text(父组件 count:${this.count}).fontSize(20).margin(10)Button(父组件 1).onClick((){this.count;})Divider()ChildProp({childCount:this.count})}.width(100%).padding(20)}}// 子组件Component struct ChildProp{Prop childCount:number;// 单向接收build(){Column(){Text(子组件 childCount:${this.childCount}).fontSize(20).margin(10)Button(子组件 1仅本地修改).onClick((){// 修改 Prop 变量不会影响父组件的 countthis.childCount;})}}}运行效果父组件点击按钮父组件的 count 和子组件的 childCount 都会增加。子组件点击按钮子组件的 childCount 会增加但父组件的 count 保持不变。父组件再次点击子组件的值会被父组件覆盖因为单向同步。使用 Link双向// 父组件Entry Component struct Parent{State count:number10;build(){Column(){Text(父组件 count:${this.count}).fontSize(20).margin(10)Button(父组件 1).onClick((){this.count;})Divider()ChildLink({childCount:$count})// 注意 $ 符号}.width(100%).padding(20)}}// 子组件Component struct ChildLink{Link childCount:number;// 双向绑定build(){Column(){Text(子组件 childCount:${this.childCount}).fontSize(20).margin(10)Button(子组件 1同步父组件).onClick((){this.childCount;// 修改会同步回父组件})}}}运行效果父组件或子组件任意一方点击按钮两边的数字都会同步增加。三、说明① 对象类型Prop 对对象进行深拷贝子组件内修改对象属性不会影响父组件。Link 对对象进行引用传递子组件内修改对象属性会直接影响父组件对象。② 嵌套深度对于深层嵌套的组件通信Prop 和 Link 需要逐层传递代码冗余。此时可考虑使用 Provide / Consume 或全局状态管理。③ V2 版本变化在 ArkUI V2ComponentV2中Prop 被 Param 替代单向Link 被 Param Event 的组合替代通过回调实现双向不再直接使用 Link。四、总结使用 Prop单向数据流当子组件只需要展示父组件传递的数据并且内部修改不影响父组件时如纯展示组件、临时编辑但最终不保存它传递的是深拷贝。使用 Link双向数据流当子组件需要修改父组件的数据并希望父组件实时感知变化时如表单输入、开关切换、滑块控制。父子组件中任一方的修改都会同步给另一方它传递的是引用子组件中通过Link装饰的变量可以像普通变量一样直接修改。为什么 V2 要取消 Link改用 Param Event 为了数据流向更清晰、更可预测。Link 虽然方便但子组件可以直接修改父组件的数据在复杂应用中可能导致数据流难以追踪V2 的方案强制子组件通过 Event 回调来“通知”父组件修改符合“数据向下流动事件向上传递”的单向数据流最佳实践让状态变化更可控。