
鸿蒙状态管理中V1和V2的区别(2)(HarmonyOS API14版本)
上篇文章讲了状态管理是什么,还有状态管理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'
…
还有很多种情况就不一一列举了,详情可以自行查看官方文档。
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%')
}
}
