根据提供的详细技术文档,我整理了 ArkUI V2 状态管理的核心知识点与最佳实践指南,重点突出核心特性与版本差异:
🧩 ArkUI V2 状态管理深度解析
一、组件内部状态管理 (@Local)
定位:取代 V1 的 @State,用于组件私有状态
核心特性:
-
不接受外部传值
// 父组件调用报错 ↓ Child({ str: '外部赋值' }) -
观测规则:
-
基本类型:赋值即刷新(
message = '新值') -
对象类型:
-
整体替换可观测(
info = new InfoType()) -
成员修改需配合装饰器 ⚠️:
@ObservedV2 // 类装饰器 class User { @Trace age: number // 被追踪属性 }
-
-
数组类型:
- 基本类型数组:任意修改可观测(
arr[0]=1或arr.push()) - 对象数组:替换元素可观测,修改元素属性需
@ObservedV2 + @Trace
- 基本类型数组:任意修改可观测(
-
-
内置类型支持
Date/Set/Map等调用原生 API 修改可观测(如setFullYear())
二、组件间数据流 (@Param, @Event, @Once)
-
@Param外部输入- 必须初始化或配合
@Require(避免未赋值错误) - 只读属性 → 修改需通过
@Event向上传递
// 子组件 @Param str: string = '' @Event onChange: (val: string) => void Button('改值').onClick(() => this.onChange('新值')) - 必须初始化或配合
-
@Once一次性初始化- 等同于
@Local+ 单次父组件传值 - 后续父组件数据变化不同步
@Once @Param str: string = '' // 仅首次从父组件接收 - 等同于
三、跨组件通信 (@Provider, @Consumer)
VS V1 @Provide/@Consume:
| 特性 | V2 | V1 |
|---|---|---|
| 本地初始化 | ✅ (找不到 provider 时使用) | ❌ (直接报错) |
| 函数类型支持 | ✅ | ❌ |
| 嵌套属性观测 | 需 @Trace | 需 @ObjectLink |
示例:
// 祖先组件
@Provider('userData') data: User[] = []
// 后代组件
@Consumer('userData') localData: User[] = []
四、高级能力 (@Computed, @Monitor)
-
@Computed计算属性@Computed get fullName() { return `${firstName}${lastName}` // 依赖项变更时自动更新 } -
@Monitor监听器(强化版@Watch)-
集中监听多变量:
@Monitor('var1', 'var2') -
对象属性级监听:
@Monitor('obj.name') -
获取变更详情:
@Monitor('info.age') handler(monitor: IMonitor) { console.log(monitor.value('info.age')?.before) // 旧值 console.log(monitor.value('info.age')?.now) // 新值 }
-
⚡ 实战场景建议
-
状态管理选型
- 组件私有状态 →
@Local - 接收父组件参数 →
@Param+@Event修改 - 避免重复计算 →
@Computed - 深度监听对象 →
@ObservedV2+@Trace
- 组件私有状态 →
-
性能关键点
- 嵌套对象属性修改 必须用
@Trace,否则无法触发 UI 更新 - 数组内对象建议整体替换而非修改属性
- 嵌套对象属性修改 必须用
-
版本迁移
V2 状态管理更精细化,但需注意:@Local不可替代 V1@State的传值能力@Monitor功能远强于 V1@Watch
架构设计理念:V2 通过 显式声明观测能力(如
@Trace)和 精准监听(@Monitor)解决了 V1 在复杂对象监听上的性能瓶颈,同时提升跨组件通信灵活性。掌握装饰器组合使用是高效开发的关键!
本文已整合核心知识点并优化逻辑结构,完整示例代码请参考原文档链接。建议开发中结合装饰器特性设计组件状态流,以充分发挥 ArkUI V2 响应式优势。