HarmonyOS NEXT开发条记：类属性变革观测详解@ObservedV2与@Trace

  鸿蒙开发往期必看：
一分钟相识”纯血版！鸿蒙HarmonyOS Next应用开发！
“非常具体的” 鸿蒙HarmonyOS Next应用开发学习门路！（从零底子入门到夺目）
“一杯冰美式的时间” 相识鸿蒙HarmonyOS Next应用开发路径！
<hr> 为了增强状态管理框架对类对象中属性的观测本事，开发者可以使用@ObservedV2装饰器和@Trace装饰器装饰类以及类中的属性。
   分析
  @ObservedV2与@Trace装饰器从API version 12开始支持。
  当前状态管理（V2试用版）仍在渐渐开发中，干系功能尚未成熟，发起开发者尝鲜试用。
  概述

@ObservedV2装饰器与@Trace装饰器用于装饰类以及类中的属性，使得被装饰的类和属性具有深度观测的本事：

  

• @ObservedV2装饰器与@Trace装饰器须要共同使用，单独使用@ObservedV2装饰器或@Trace装饰器没有任何作用。  
  
• 被@Trace装饰器装饰的属性property变革时，仅会关照property关联的组件举行革新。  
  
• 在嵌套类中，嵌套类中的属性property被@Trace装饰且嵌套类被@ObservedV2装饰时，才具有触发UI革新的本事。  
  
• 在继承类中，父类或子类中的属性property被@Trace装饰且该property地点类被@ObservedV2装饰时，才具有触发UI革新的本事。  
  
• 未被@Trace装饰的属性用在UI中无法感知到变革，也无法触发UI革新。  
  
• @ObservedV2的类实例现在不支持使用JSON.stringify举行序列化。
  

状态管理V1版本对嵌套类对象属性变革直接观测的范围性

现有状态管理V1版本无法实现对嵌套类对象属性变革的直接观测。

1. @Observed
2. class Father {
3.   son: Son;
5.   constructor(name: string, age: number) {
6.     this.son = new Son(name, age);
7.   }
8. }
9. @Observed
10. class Son {
11.   name: string;
12.   age: number;
14.   constructor(name: string, age: number) {
15.     this.name = name;
16.     this.age = age;
17.   }
18. }
19. @Entry
20. @Component
21. struct Index {
22.   @State father: Father = new Father("John", 8);
24.   build() {
25.     Row() {
26.       Column() {
27.         Text(`name: ${this.father.son.name} age: ${this.father.son.age}`)
28.           .fontSize(50)
29.           .fontWeight(FontWeight.Bold)
30.           .onClick(() => {
31.             this.father.son.age++;
32.           })
33.       }
34.       .width('100%')
35.     }
36.     .height('100%')
37.   }
38. }

复制代码

上述代码中，点击Text组件增长age的值时，不会触发UI革新。由于在现有的状态管理框架下，无法观测到嵌套类中属性age的值变革。V1版本的办理方案是使用@ObjectLink装饰器与自界说组件的方式实现观测。

1. @Observed
2. class Father {
3.   son: Son;
5.   constructor(name: string, age: number) {
6.     this.son = new Son(name, age);
7.   }
8. }
9. @Observed
10. class Son {
11.   name: string;
12.   age: number;
14.   constructor(name: string, age: number) {
15.     this.name = name;
16.     this.age = age;
17.   }
18. }
19. @Component
20. struct Child {
21.   @ObjectLink son: Son;
23.   build() {
24.     Row() {
25.       Column() {
26.         Text(`name: ${this.son.name} age: ${this.son.age}`)
27.           .fontSize(50)
28.           .fontWeight(FontWeight.Bold)
29.           .onClick(() => {
30.             this.son.age++;
31.           })
32.       }
33.       .width('100%')
34.     }
35.     .height('100%')
36.   }
37. }
38. @Entry
39. @Component
40. struct Index {
41.   @State father: Father = new Father("John", 8);
43.   build() {
44.     C

复制代码

免责声明：如果侵犯了您的权益，请联系站长，我们会及时删除侵权内容，谢谢合作！qidao123.com:ToB企服之家，中国第一个企服评测及软件市场,开放入驻,技术点评得现金