ArkUI V2 装饰器深度解析

175 阅读2分钟

根据提供的详细技术文档,我整理了 ArkUI V2 状态管理的核心知识点与最佳实践指南,重点突出核心特性与版本差异:


🧩 ArkUI V2 状态管理深度解析

一、组件内部状态管理 (@Local)

​定位​​:取代 V1 的 @State,用于组件私有状态
​核心特性​​:

  1. ​不接受外部传值​

    // 父组件调用报错 ↓
    Child({ str: '外部赋值' }) 
    
  2. ​观测规则​​:

    • ​基本类型​​:赋值即刷新(message = '新值'

    • ​对象类型​​:

      • 整体替换可观测(info = new InfoType()

      • ​成员修改需配合装饰器​​ ⚠️:

        @ObservedV2 // 类装饰器
        class User {
          @Trace age: number // 被追踪属性
        }
        
    • ​数组类型​​:

      • 基本类型数组:任意修改可观测(arr[0]=1arr.push()
      • 对象数组:替换元素可观测,修改元素属性需 @ObservedV2 + @Trace
  3. ​内置类型支持​
    Date/Set/Map 等调用原生 API 修改可观测(如 setFullYear()


二、组件间数据流 (@Param, @Event, @Once)

  1. @Param 外部输入​

    • 必须初始化或配合 @Require(避免未赋值错误)
    • ​只读属性​​ → 修改需通过 @Event 向上传递
    // 子组件
    @Param str: string = ''
    @Event onChange: (val: string) => void
    
    Button('改值').onClick(() => this.onChange('新值'))
    
  2. @Once 一次性初始化​

    • 等同于 @Local + ​​单次父组件传值​
    • 后续父组件数据变化不同步
    @Once @Param str: string = '' // 仅首次从父组件接收
    

三、跨组件通信 (@Provider, @Consumer)

​VS V1 @Provide/@Consume​:

特性V2V1
本地初始化✅ (找不到 provider 时使用)❌ (直接报错)
函数类型支持
嵌套属性观测@Trace@ObjectLink

​示例​​:

// 祖先组件
@Provider('userData') data: User[] = []

// 后代组件
@Consumer('userData') localData: User[] = []

四、高级能力 (@Computed, @Monitor)

  1. @Computed 计算属性​

    @Computed
    get fullName() {
      return `${firstName}${lastName}` // 依赖项变更时自动更新
    }
    
  2. @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)   // 新值
      }
      

⚡ 实战场景建议

  1. ​状态管理选型​

    • 组件私有状态 → @Local
    • 接收父组件参数 → @Param + @Event 修改
    • 避免重复计算 → @Computed
    • 深度监听对象 → @ObservedV2 + @Trace
  2. ​性能关键点​

    • 嵌套对象属性修改 ​​必须用 @Trace​,否则无法触发 UI 更新
    • 数组内对象建议整体替换而非修改属性
  3. ​版本迁移​
    V2 状态管理更精细化,但需注意:

    • @Local 不可替代 V1 @State 的传值能力
    • @Monitor 功能远强于 V1 @Watch

​架构设计理念​​:V2 通过 ​​显式声明观测能力​​(如 @Trace)和 ​​精准监听​​(@Monitor)解决了 V1 在复杂对象监听上的性能瓶颈,同时提升跨组件通信灵活性。掌握装饰器组合使用是高效开发的关键!


本文已整合核心知识点并优化逻辑结构,完整示例代码请参考原文档链接。建议开发中结合装饰器特性设计组件状态流,以充分发挥 ArkUI V2 响应式优势。