鸿蒙状态管理中V1和V2的区别（2）（HarmonyOS API14版本）

Kratos1023

发布于 2025-3-22 17:41

780浏览

0收藏

上篇文章讲了状态管理是什么，还有状态管理V1和状态管理V2分别用了什么装饰器，以及相对于V1来讲，V2的优点是什么，V1自身有什么缺点。那这篇文章就来讲一下他们各个装饰器之间的区别。

自定义组件：对UI和业务逻辑进行封装，从而复用组件。

V1:@Component 仅能装饰struct关键字声明的数据结构。

截图漏了个大括号，记得加上。

V2:@ComponentV2 从API12版本才开始支持。在ComponentV2中，只能使用全新的的状态变量修饰器，包括但不限于@Local，@Param等。在同一个struct结构中，不能同时用@Component和@ComponentV2去修饰。

状态变量（即Vue中的响应式变量）：需要装饰器装饰，改变会引起UI界面的渲染刷新。（必须设置类型和初始值。）

V1：@State 必须使用@State装饰的变量才是状态变量。注意嵌套属性的赋值观察不到。(从API version 9开始，该装饰器支持在ArkTS卡片中使用。从API version 11开始，该装饰器支持在元服务中使用。)

class Person {
  public value: string

  constructor(value: string) {
    this.value = value
  }
}

class Model {
  public value: string
  public name: Person
  constructor(value: string, person: Person) {
    this.value = value
    this.name = person
  }
}

// class类型
@State title: Model = new Model('Hello', new Person('World'))

// class类型赋值
this.title = new Model('Hi', new Person('ArkUI'))

// class属性的赋值
this.title.value = 'Hi'

// 嵌套的属性赋值观察不到
this.title.name.value = 'ArkUI'
1.
2.
3.
4.
5.
6.
7.
8.
9.
10.
11.
12.
13.
14.
15.
16.
17.
18.
19.
20.
21.
22.
23.
24.
25.
26.
27.
28.

…

还有很多种情况就不一一列举了，详情可以自行查看官方文档。

V2：@Local装饰器作用与V1中的@State装饰器对应。但由于@State装饰器能够从外部初始化，因此@State无法准确表达组件内部中的状态不能被外面修改的语义。注意：1.被@Local装饰的变量无法从外部初始化，因此必须要在组件内部进行初始化。2.@Local装饰器只能在@ComponentV2装饰的自定义组件中使用。3.@Local装饰的变量表示组件内部状态，不允许从外部传入初始化。4.装饰的变量类型为boolean、string、number时，可以观察到对变量赋值的变化。5.装饰的变量类型为对象时，仅可以观察到对对象整体赋值的变化，无法直接观察到对成员属性赋值的变化。对对象成员属性的观察依赖于@ObservedV2和@Trace装饰器。

@Entry
@ComponentV2
struct Index {
  build() {
    Column() {
      ChildCom()
    }
    .height('100%')
    .width('100%')
  }
}

interface iPerson {
  name: string;
  toy: iToy
}

interface iToy {
  name: string;
}

@ComponentV2
struct ChildCom {
  @Local count: number = 100
  @Local person: iPerson = { name: '靓仔', toy: { name: '靓仔的玩具' } }

  build() {
    Column() {

      Text(this.count.toString())
      Text(this.person.name)
      Text(this.person.toy.name)

      Button('修改count的值')
        .onClick(()=>{
          this.count++
        })

      Button('修改person变量')
        .onClick(()=>{
          this.person={name:'靓仔2',toy:{name:'靓仔的玩具1'}}
        })
      Button('修改person.name变量')
        .onClick(()=>{
          // 不会更新UI
          this.person.name = '靓仔3'
        })

    }
    .height('100%')
    .width('100%')
  }
}
1.
2.
3.
4.
5.
6.
7.
8.
9.
10.
11.
12.
13.
14.
15.
16.
17.
18.
19.
20.
21.
22.
23.
24.
25.
26.
27.
28.
29.
30.
31.
32.
33.
34.
35.
36.
37.
38.
39.
40.
41.
42.
43.
44.
45.
46.
47.
48.
49.
50.
51.
52.
53.