本文同步发表于我的微信公众号,微信搜索 程语新视界 即可关注,每个工作日都有文章更新
一、架构设计对比
设计维度 | V1版本 | V2版本 |
---|---|---|
观察机制 | 基于代理的观察模式(Proxy Observation) | 基于数据本身的观察能力(Native Observation) |
状态独立性 | 状态与UI强耦合 | 状态独立于UI存在 |
更新触发方式 | 通过代理检测变化 | 数据变更直接触发更新 |
组件通信模型 | 隐式输入输出 | 显式定义输入(@Param)输出(@Event) |
二、核心能力对比
1. 数据观察能力
观察深度 | V1实现方式 | V2实现方式 |
---|---|---|
第一层属性 | @State /@Link 默认支持 | @Local /@Param 默认支持 |
嵌套属性 | 需配合@Observed +@ObjectLink | 使用@ObservedV2 +@Trace 装饰 |
数组元素 | 整体数组更新 | 元素级最小化更新 |
class内部 | 仅能观察class实例替换 | 可深度跟踪class内部属性变化 |
代码示例:
// V1嵌套对象观察
@Observed
class User {
name: string;
constructor(name: string) { this.name = name; }
}
@Component
struct MyComponent {
@ObjectLink user: User;
// 只能观察user实例变化,不能单独观察name变化
}
// V2深度观察
@ObservedV2
class UserV2 {
@Trace name: string; // 可单独观察name变化
constructor(name: string) { this.name = name; }
}
2. 性能表现对比
性能指标 | V1表现 | V2优化 |
---|---|---|
更新范围 | 对象/数组整体更新 | 属性/元素级精准更新 |
渲染次数 | 相同数据多次修改触发多次渲染 | 单次事件循环内合并更新 |
内存占用 | 每个状态变量需要维护代理对象 | 直接观察数据本身,内存占用更低 |
CPU消耗 | 需要递归遍历代理对象 | 基于依赖追踪的精确计算 |
三、装饰器对照表
1. 组件级状态管理
V1装饰器 | V2等效方案 | 差异说明 |
---|---|---|
@State | @Local 或 @Param +@Once | V2明确区分内部状态和外部传入 |
@Prop | @Param | V2默认引用传递而非深拷贝 |
@Link | @Param +@Event | V2通过显式事件实现双向同步 |
@Observed | @ObservedV2 | V2需配合@Trace 才能实现观察 |
@ObjectLink | @Param | V2取消特殊限制,任何对象都可传递 |
@Provide | @Provider | 功能基本一致 |
@Consume | @Consumer | 功能基本一致 |
2. 辅助功能对比
功能点 | V1实现 | V2实现 |
---|---|---|
状态监听 | @Watch | @Monitor |
双向绑定 | $$ 语法 | !! 语法 |
- 深度观察对象添加
@Trace
装饰器
- 状态监听:
- 将
@Watch
替换为@Monitor
- 注意V2的监听触发时机差异
- 将
2. 混用注意事项
-
层级隔离:
- V1组件可以包含V2组件
- V2组件不能包含V1组件
-
数据传递:
- 通过AppStorage/LocalStorage进行版本间数据共享
- 复杂对象建议转换为简单类型传递
-
生命周期:
- 混用时注意V1/V2生命周期执行顺序差异
- 避免在生命周期中做交叉版本的状态操作
六、版本选择
通过以上对比可以看出,V2版本在状态管理的精确性、性能表现和开发体验上都有显著提升。建议新项目直接采用V2架构,现有项目可根据实际需求逐步迁移。