鸿蒙开发-ArkTS 语言-状态管理

[写在前面: 文章多处用到gif动图，如未自动播放，请点击图片]
衔接上一篇:鸿蒙开发-ArkTS 语言-基础语法

3. 状态管理

变量必须被装饰器装饰才能成为状态变量，状态变量的改变才能导致 UI 界面重新渲染

概念描述
状态变量被状态装饰器装饰的变量，改变会引起UI的渲染更新。
常规变量没有状态的变量，通常应用于辅助计算。它的改变永远不会引起UI的刷新。
数据源/同步源状态变量的原始来源，可以同步给不同的状态数据。通常意义为父组件传给子组件的数据。
命名参数机制父组件通过指定参数传递给子组件的状态变量，为父子传递同步参数的主要手段。示例：CompA: ({ aProp: this.aProp }）。
从父组件初始化父组件使用命名参数机制，将指定参数传递给子组件。本地初始化的默认值在有父组件传值的情况下，会被覆盖。

Components部分的装饰器为组件级别的状态管理，Application部分为应用的状态管理。可以通@StorageLink/@LocalStorageLink和@StorageProp/@LocalStorageProp实现应用和组件状态的双向和单向同步。图中箭头方向为数据同步方向，单箭头为单向同步，双箭头为双向同步。

图片来源：https://developer.huawei.com/consumer/cn/doc/harmonyos-guides-V2/arkts-state-management-overview-0000001524537145-V2

img03

状态管理分三种：

  1. 组件级别，即components级别：

    • @State：@State装饰的变量拥有其所属组件的状态，可以作为其子组件单向和双向同步的数据源。当其数值改变时，会引起相关组件的渲染刷新。
    • @Prop：@Prop装饰的变量可以和父组件建立单向同步关系，@Prop装饰的变量是可变的，但修改不会同步回父组件。
    • @Link：@Link装饰的变量和父组件构建双向同步关系的状态变量，父组件会接受来自@Link装饰的变量的修改的同步，父组件的更新也会同步给@Link装饰的变量。
    • @Provide/@Consume：@Provide/@Consume装饰的变量用于跨组件层级（多层组件）同步状态变量，可以不需要通过参数命名机制传递，通过alias（别名）或者属性名绑定。
    • @Observed：@Observed装饰class，需要观察多层嵌套场景的class需要被@Observed装饰。单独使用@Observed没有任何作用，需要和@ObjectLink、@Prop连用。
    • @ObjectLink：@ObjectLink装饰的变量接收@Observed装饰的class的实例，应用于观察多层嵌套场景，和父组件的数据源构建双向同步。

  2. 应用级别，即 Application 级别：

    • AppStorage是应用程序中的一个特殊的单例LocalStorage对象，是应用级的数据库，和进程绑定，通过@StorageProp和@StorageLink装饰器可以和组件联动。
    • AppStorage是应用状态的“中枢”，需要和组件（UI）交互的数据存入AppStorage，比如持久化数据PersistentStorage和环境变量Environment。UI再通过AppStorage提供的装饰器或者API接口，访问这些数据；
    • 框架还提供了LocalStorage，AppStorage是LocalStorage特殊的单例。LocalStorage是应用程序声明的应用状态的内存“数据库”，通常用于页面级的状态共享，通过@LocalStorageProp和@LocalStorageLink装饰器可以和UI联动。

  3. 其他状态管理功能

    • @Watch用于监听状态变量的变化。

    • $$ 运算符：给内置组件提供TS变量的引用，使得TS变量和内置组件的内部状态保持同步。

3.1 组件级别的状态管理

3.1.1 @State 组件内状态

@State装饰的变量，是私有的，只能从组件内部访问，在声明时必须指定其类型和本地初始化。初始化也可选择使用命名参数机制从父组件完成初始化。

示例如下：

@Entry
@Component
struct Index {build() {Column() {Parent()}}
}@Component
struct MyComponent {@State count: number = 0;private increaseBy: number = 1;build() {Column(){Row() {Text(`${this.count}`).fontSize(108)}Row() {Button('click me hh').onClick(() => {this.count += this.increaseBy})}}}
}@Component
struct Parent {build() {Column() {// 从父组件初始化，覆盖本地定义的默认值MyComponent({ count: 2, increaseBy: 2 })}}
}

效果如下：

gif06

3.1.2 能观察的数据类型

  1. 观察简单类型的变化：
    • 当状态变量是boolean、string、number类型时，修改这些变量的数值可以被观察到，从而引起UI的刷新。
@State count: number = 0;
this.count = 1; // 这种修改可以被观察到
  1. 观察类和对象类型的变化：
    • 对于class或Object类型，可以观察到自身的赋值变化以及其属性的赋值变化。但是嵌套属性的赋值观察不到。
class ClassA {public value: string;constructor(value: string) {this.value = value;}
}class Model {public value: string;public name: ClassA;constructor(value: string, a: ClassA) {this.value = value;this.name = a;}
}@State title: Model = new Model('Hello', new ClassA('World'));// class类型赋值可以观察到
this.title = new Model('Hi', new ClassA('ArkUI'));// class属性的赋值可以观察到
this.title.value = 'Hi';// 嵌套属性的赋值观察不到
this.title.name.value = 'ArkUI';
  1. 观察数组类型的变化：
    • 当状态变量是数组时，可以观察到数组本身的赋值以及对数组的添加、删除、更新操作。
class Model {public value: number;constructor(value: number) {this.value = value;}
}@State title: Model[] = [new Model(11), new Model(1)];// 数组自身的赋值可以观察到
this.title = [new Model(2)];// 数组项的赋值可以观察到
this.title[0] = new Model(2);// 删除数组项可以观察到
this.title.pop();// 新增数组项可以观察到
this.title.push(new Model(12));
3.1.2 @Prop装饰器：父子单向通信

可以使用 @Prop 定义要从父级接受的变量。注意以下两点：

  1. @Prop变量可以在子组件内修改，但修改后的变化不会同步回父组件中。

  2. 但当父组件中的数据源更改时，与之相关的@Prop装饰的变量都会自动更新。如果子组件已经在本地修改了@Prop装饰的相关变量值，而在父组件中对应的@State装饰的变量被修改后，子组件本地修改的@Prop装饰的相关变量值将被覆盖。

  3. 允许装饰的变量的类型：string、number、boolean、enum类型。

  4. 不允许的类型：any，undefined和null。

@Prop 初始化规则：

图示：

图片来源：https://developer.huawei.com/consumer/cn/doc/harmonyos-guides-V2/arkts-prop-0000001473537702-V2

img04

代码示例：

@Component
struct CountDownComponent {@Prop count: number;costOfOneAttempt: number = 1;build() {Column() {if (this.count > 0) {Text(`儿子还有 ${this.count} 个萝卜头`)} else {Text('吃完了，要挨打了')}// @Prop装饰的变量不会同步给父组件Button(`儿子偷吃了${this.costOfOneAttempt}个萝卜头`).onClick(() => {this.count -= this.costOfOneAttempt;})}}
}@Entry
@Component
struct ParentComponent {@State countDownStartValue: number = 10;build() {Column() {Text(`老爸还有 ${this.countDownStartValue} 个萝卜头`)// 父组件的数据源的修改会同步给子组件Button(`一起买了1个萝卜头`).onClick(() => {this.countDownStartValue += 1;})// 父组件的修改会同步给子组件Button(`一起吃了1个萝卜头`).onClick(() => {this.countDownStartValue -= 1;})CountDownComponent({ count: this.countDownStartValue, costOfOneAttempt: 2 })}}
}

效果如下：

gif07

3.1.3 @Link: 父子双向通信

可以使用 @Link 装饰器进行数据双向同步：

  • @Link 是双向同步的装饰器，父组件中@State, @StorageLink和@Link 和子组件@Link可以建立双向数据同步，反过来也是可以的。
  • 允许装饰的类型有：Object、class、string、number、boolean、enum类型，同时类型必须被指定，且和双向绑定状态变量的类型相同。不支持any，不支持简单类型和复杂类型的联合类型，不允许使用undefined和null。
  • 当装饰的数据类型为boolean、string、number时，可以同步观察到数值的变化；为class或Object时，可以观察到赋值和属性赋值的变化；为array时，可以观察到数组添加、删除、更新数组单元的变化。

@Link初识化规则：

图示：

图片来源：https://developer.huawei.com/consumer/cn/doc/harmonyos-guides-V2/arkts-link-0000001524297305-V2

img05

代码示例：

class GreenButtonState {width: number = 0;constructor(width: number) {this.width = width;}
}// class类型的子组件GreenButton，通过@Link装饰变量greenButtonState同步到父组件Index中的@State变量greenButtonState@Component
struct GreenButton {@Link greenButtonState: GreenButtonState;build() {Button('绿色按钮').width(this.greenButtonState.width).height(150.0).fontWeight(FontWeight.Bold).backgroundColor('#ff81c123').onClick(() => {if (this.greenButtonState.width < 700) {// 更新class的属性，变化可以被观察到同步回父组件this.greenButtonState.width += 125;} else {// 更新class，变化可以被观察到同步回父组件this.greenButtonState = new GreenButtonState(100);}})}
}// 简单类型的子组件YellowButton，通过@Link装饰变量yellowButtonState同步到父组件Index中的@State变量yellowButtonProp
@Component
struct YellowButton {@Link yellowButtonState: number;build() {Button('黄色按钮').width(this.yellowButtonState).height(150.0).fontWeight(FontWeight.Bold).backgroundColor('#ffdb944d').onClick(() => {// 子组件的简单类型可以同步回父组件this.yellowButtonState += 50.0;})}
}// 父组件Index，初始化并管理子组件的状态变量
@Entry
@Component
struct Index {@State greenButtonState: GreenButtonState = new GreenButtonState(300);@State yellowButtonProp: number = 100;build() {Column() {// 按钮：父组件修改greenButtonState，同步到GreenButton子组件Button('父视图: 设置 绿色按钮').onClick(() => {this.greenButtonState.width = (this.greenButtonState.width < 700) ? this.greenButtonState.width + 100 : 100;})// 按钮：父组件修改yellowButtonProp，同步到YellowButton子组件Button('父视图: 设置 黄色按钮').onClick(() => {this.yellowButtonProp = (this.yellowButtonProp < 700) ? this.yellowButtonProp + 100 : 100;})// 子组件：GreenButton，通过@Link同步更新父组件@State的greenButtonStateGreenButton({ greenButtonState: $greenButtonState })// 子组件：YellowButton，通过@Link同步更新父组件@State的yellowButtonPropYellowButton({ yellowButtonState: $yellowButtonProp })}}
}

图示：

gif08

3.1.4 @Provide/@Consume 装饰器

为了避免在组件中多次传递变量，推出了一种使某些变量能被所有后代组件使用的装饰器 @Provide，后代组件可以使用 @Consume去获取 @Provide 的值，而@State和@Link 只能在父子组件中传递。

// 通过相同的变量名绑定
@Provide a: number = 0;
@Consume a: number;// 通过相同的变量别名绑定
@Provide('a') b: number = 0;
@Consume('a') c: number;

@Provide 和 @Consume 是双向同步的。

代码示例：

@Component
struct CompD {// @Consume装饰的变量通过相同的属性名绑定其祖先组件CompA内的@Provide装饰的变量@Consume tickets: number;build() {Column() {Text(`评审投票数(${this.tickets})`)Button(`评审投票数(${this.tickets})，+1`).onClick(() => this.tickets += 1)}.width('50%')}
}@Component
struct CompC {build() {Row({ space: 5 }) {CompD()CompD()}}
}@Component
struct CompB {build() {CompC()}
}@Entry
@Component
struct Index {// @Provide装饰的变量reviewVotes由入口组件CompA提供其后代组件@Provide tickets: number = 0;build() {Column() {Button(`评审投票数(${this.tickets})，+1`).onClick(() => this.tickets += 1)CompB()}}
}

图示：

img06

3.1.5 @Observed 装饰器和@ObjectLink装饰器

对于多层嵌套的情况，比如二维数组，或者数组项class，或者class的属性是class，他们的第二层的属性变化是无法观察到的。这就引出了@Observed/@ObjectLink装饰器。

@ObjectLink和@Observed类装饰器用于在涉及嵌套对象或数组的场景中进行双向数据同步：

  • 被@Observed装饰的类，可以被观察到属性的变化；
  • 子组件中@ObjectLink装饰器装饰的状态变量用于接收@Observed装饰的类的实例，和父组件中对应的状态变量建立双向数据绑定。这个实例可以是数组中的被@Observed装饰的项，或者是class object中的属性，这个属性同样也需要被@Observed装饰。
  • 单独使用@Observed是没有任何作用的，需要搭配@ObjectLink或者@Prop使用。
  • 不要用@Observed和其他类装饰器装饰同一个class，@Observed会改变class的原型链

初始化图示：

图片来源：https://developer.huawei.com/consumer/cn/doc/harmonyos-guides-V2/arkts-observed-and-objectlink-0000001473697338-V2#section2976114355019

img07

以二维数组监听为例：

@Observed
class StringArray extends Array<String> {
}@Component
struct ItemPage {@ObjectLink itemArr: StringArray;build() {Row() {Text('ItemPage').width(100).height(100)ForEach(this.itemArr,item => {Text(item).width(100).height(100)},item => item)}}
}@Entry
@Component
struct Index {@State arr: Array<StringArray> = [new StringArray(), new StringArray(), new StringArray()];build() {Column() {ItemPage({ itemArr: this.arr[0] })ItemPage({ itemArr: this.arr[1] })ItemPage({ itemArr: this.arr[2] })Divider()ForEach(this.arr,itemArr => {ItemPage({ itemArr: itemArr })},itemArr => itemArr[0])Divider()Button('update').onClick(() => {console.error('Update all items in arr');if (this.arr[0][0] !== undefined) {// 正常情况下需要有一个真实的ID来与ForEach一起使用，但此处没有// 因此需要确保推送的字符串是唯一的。this.arr[0].push(`${this.arr[0].slice(-1).pop()}${this.arr[0].slice(-1).pop()}`);this.arr[1].push(`${this.arr[1].slice(-1).pop()}${this.arr[1].slice(-1).pop()}`);this.arr[2].push(`${this.arr[2].slice(-1).pop()}${this.arr[2].slice(-1).pop()}`);} else {this.arr[0].push('Hello');this.arr[1].push('World');this.arr[2].push('!');}})}}
}

效果如下：

gif09

3.2 App级别的状态管理

ArkTS可以实现多种应用状态管理的能力，具体表现在以下几点：

  • LocalStorage: 是页面级的状态储存，通常用于 UIAblility内，也可以用于页面间状态共享
  • AppStorage: 特殊的单例 LocalStorage 对象，为程序的 UI 状态属性提供中央储存
  • PersistentStorage: 持久化 UI 状态储存，通常于 AppStorage 一起使用，可以把 AppStorage 存储的数据写入磁盘，确保数据在重启前后保持一致
  • Environment: 应用程序运行的设备环境参数，会同步到 AppStorage 中，可以和AppStorage 搭配使用
3.2.1 LocalStorage: 页面级 UI 状态存储

有关 LocalStorage 介绍：

  • 一个应用程序可以创建多个 LocalStorage 实例，这些实例可以在页面内共享，也可以通过 GetShared 接口在 UIAbility 中创建的实例实现跨页面和 UIAbility 内的共享。
  • 根据组件树的结构，被 @Entry 装饰的 @Component 实例可以被分配一个 LocalStorage 实例，而该组件的所有子组件实例将自动获得对该 LocalStorage 实例的访问权限。
  • 被 @Component 装饰的组件最多可以访问一个 LocalStorage 实例和 AppStorage，而未被 @Entry 装饰的组件无法独立分配 LocalStorage 实例，只能接受父组件通过 @Entry 传递来的 LocalStorage 实例。
  • 一个 LocalStorage 实例在组件树上可以被分配给多个组件，而其中的所有属性都是可变的。
  • 当应用释放最后一个指向LocalStorage的引用时，比如销毁最后一个自定义组件，LocalStorage将被JS Engine垃圾回收。
  • 被绑定的属性值变化（无论父子级关系如何），都会引起依赖此变量的 UI 刷新渲染。

装饰器：

  • @LocalStorageProp: @LocalStorageProp(key) 是一个装饰器，用于在 ArkUI 组件框架中建立自定义组件的属性与 LocalStorage 中特定键对应属性之间的单向数据同步。

    • 初始化与绑定： 在自定义组件初始化时，被 @LocalStorageProp(key) 装饰的变量通过给定的 key 绑定到相应的 LocalStorage 属性上，完成初始化。本地初始化是必要的，因为不能保证在组件初始化之前 LocalStorage 中是否存在给定的 key。

    • 本地修改和同步： 对于使用 @LocalStorageProp(key) 装饰的变量，本地的修改是允许的。但是需要注意，本地的修改永远不会同步回 LocalStorage 中。相反，如果 LocalStorage 中给定 key 的属性发生改变，这个改变会被同步给被 @LocalStorageProp(key) 装饰的变量，并覆盖本地的修改。

  • @LocalStorageLink：@LocalStorageLink 是一个装饰器，用于在 ArkUI 组件框架中建立自定义组件的状态变量与 LocalStorage 中特定键对应属性之间的双向数据同步。以下是相关信息的概述：
    • 同步规则： @LocalStorageLink(key) 与 LocalStorage 中给定 key 对应的属性建立双向数据同步。这包括本地的修改会同步回 LocalStorage 中，以及 LocalStorage 中的修改会被同步到所有绑定了相同 key 的属性上。
    • 初始化规则@LocalStorageLink 不支持从父节点初始化，只能从 LocalStorage 中的 key 对应的属性初始化。如果没有对应的 key，则使用本地默认值初始化。可用于初始化 @State、@Link、@Prop、@Provide，但不支持组件外访问

语法示例：

let storage = new LocalStorage({ 'KeyA': 47 }); // 创建新实例并使用给定对象初始化
let keyA = storage.get('KeyA'); // keyA == 47let link1 = storage.link('KeyA'); // link1.get() == 47
let link2 = storage.link('KeyA'); // link2.get() == 47let prop = storage.prop('KeyA'); // prop.get() == 47link1.set(48); // 双向绑定 link1.get() == link2.get() == prop.get() == 48prop.set(1); // 单向绑定 prop.get() == 1；但是 link1.get() == link2.get() == 48link1.set(49); // 双向绑定 link1.get() == link2.get() == prop.get() == 49

案例理解：

// 创建新实例并使用给定对象初始化
let localStorageInstance = new LocalStorage({ 'PropertyA': 47 });@Component
struct ChildComponent {// 与LocalStorage中的'PropertyA'属性建立双向绑定@LocalStorageLink('PropertyA') linkedProperty2: number = 1;// 与LocalStorage中的'PropertyA'属性建立单向绑定@LocalStorageProp('PropertyA') linkedProperty3: number = 1;build() {Row() {Button(`子组件的值 ${this.linkedProperty2}`)// 更改将同步至LocalStorage中的'PropertyA'以及ParentComponent.linkedProperty1.onClick(() => this.linkedProperty2 += 1)// Local 中值变化，linkedProperty3 也会变，反之不会Button(`子组件的值-单向 Prop ${this.linkedProperty3}`).onClick(() => this.linkedProperty3 += 1)}}
}// 使LocalStorage可被@Component组件访问
@Entry(localStorageInstance)
@Component
struct ParentComponent {// @LocalStorageLink变量装饰器与LocalStorage中的'PropertyA'属性建立双向绑定@LocalStorageLink('PropertyA') linkedProperty1: number = 1;build() {Column({ space: 15 }) {Button(`父组件的值 ${this.linkedProperty1}`) // 初始化值从LocalStorage中获取，因为'PropertyA'已经初始化为47.onClick(() => this.linkedProperty1 += 1)// @Component子组件自动获得对ParentComponent LocalStorage实例的访问权限。ChildComponent()}}
}

效果如下：

gif10

3.2.2 AppStorage：应用全局的UI状态存储

概述

AppStorage是应用全局的UI状态存储，是和应用的进程绑定的，由UI框架在应用程序启动时创建，为应用程序UI状态属性提供中央存储。AppStorage是应用级的全局状态共享，相当于整个应用的“中枢”，持久化数据PersistentStorage和 环境变量Environment都是通过AppStorage的中转，才可以和UI交互。AppStorage中的属性可以被双向同步，数据可以是存在于本地或远程设备上，并具有不同的功能，比如数据持久化。

基本用法：

// 在AppStorage中设置或创建 'PropA' 属性，初始值为 47
AppStorage.SetOrCreate('PropA', 47);let localStorageInstance: LocalStorage = new LocalStorage({ 'PropA': 17 });// 从AppStorage中获取 'PropA' 的值，此时 propA 在 AppStorage 中为 47，在 LocalStorage 中为 17
let propAFromAppStorage: number = AppStorage.Get('PropA');// 使用AppStorage的Link方法创建两个链接（link1和link2），以同步 'PropA' 的值
let link1: SubscribedAbstractProperty<number> = AppStorage.Link('PropA');
let link2: SubscribedAbstractProperty<number> = AppStorage.Link('PropA');// 使用AppStorage的Prop方法创建一个属性（prop），以单向同步 'PropA' 的值
let prop: SubscribedAbstractProperty<number> = AppStorage.Prop('PropA');// 修改 link1，演示双向绑定的效果，所有其他绑定到相同键的变量都同步更新
link1.set(48); // link1.get() == link2.get() == prop.get() == 48// 修改属性 prop，演示单向绑定的效果，只有属性本身更新，其他变量不受影响
prop.set(1); // prop.get() == 1；但是 link1.get() == link2.get() == 48// 再次修改 link1，验证双向绑定，所有绑定到相同键的变量都同步更新
link1.set(49); // link1.get() == link2.get() == prop.get() == 49// 使用 'PropA' 的值从 LocalStorage 中获取，此时为 17 
let valueFromLocalStorage: number = localStorageInstance.get('PropA');// 设置 'PropA' 的值为 101
localStorageInstance.set('PropA', 101);// 从 LocalStorage 中获取 'PropA' 的值，此时为 101
let valueFromLocalStorageAfterSet: number = localStorageInstance.get('PropA');// 从 AppStorage 中获取 'PropA' 的值，此时为 49
let valueFromAppStorage: number = AppStorage.Get('PropA');// 获取 link1 的值，此时为 49
let valueFromLink1: number = link1.get();// 获取 link2 的值，此时为 49
let valueFromLink2: number = link2.get();// 获取 prop 的值，此时为 49
let valueFromProp: number = prop.get();
3.2.3 PersistentStorage：持久化存储UI状态

LocalStorage和AppStorage都是运行时的内存，但是在应用退出再次启动后，依然能保存选定的结果，是应用开发中十分常见的现象，这就需要用到PersistentStorage。

注意：

  • 持久化数据操作相对较慢，应避免持久化大型数据集和经常变化的变量。
  • PersistentStorage的持久化变量最好是小于2kb的数据，以避免影响UI渲染性能。
  • PersistentStorage只能在UI页面内使用，否则无法持久化数据。
  • 不在调用 PersistentStorage 前调用 AppStorage，会导致上次退出应用保存的值丢失。

代码示例：

PersistentStorage.PersistProp('userScore', 100);@Entry
@Component
struct Game {@State message: string = 'Welcome to the Game'@StorageLink('userScore') userScore: number = 50build() {Row() {Column() {Text(this.message)Text(`你的得分: ${this.userScore}`).onClick(() => {this.userScore += 10;})}}}
}
3.2.4 Environment：设备环境查询

Environment设备环境查询用于查询设备运行环境参数，是ArkUI框架在应用程序启动时创建的单例对象，它为AppStorage提供了一系列描述应用程序运行状态的属性。Environment的所有属性都是不可变的（即应用不可写入），所有的属性都是简单类型。

使用场景

Environment.EnvProp将设备的语言设置为英语 'zh'。然后，@StorageProp将设备语言与AppStorage中的 deviceLanguage 建立了单向同步。

// 将设备的语言code存入AppStorage
Environment.EnvProp('deviceLanguage', 'zh');@Entry
@Componentstruct Main {// 使用@StorageProp链接到Component中@StorageProp('deviceLanguage') selectedLanguage: string = 'en';build() {Row() {Column() {Text('Device Language:')Text(this.selectedLanguage)}}}
}// 应用逻辑使用Environment
// 从AppStorage获取单向绑定的languageCode的变量
const lang: SubscribedAbstractProperty<string> = AppStorage.Prop('deviceLanguage');
if (lang.get() === 'zh') {console.info('你好');
} else {console.info('Hello!');
}

3.3 其他状态管理

3.3.1 @Watch 监听

@Watch用于监听状态变量的变化，当状态变量变化时，@Watch的回调方法将被调用。@Watch在ArkUI框架内部判断数值有无更新使用的是严格相等（===），遵循严格相等规范。当在严格相等为false的情况下，就会触发@Watch的回调。

注意：

  1. 当观察到状态变量的变化（包括双向绑定的AppStorage和LocalStorage中对应的key发生的变化）的时候，对应的@Watch的回调方法将被触发；
  2. 如果在@Watch的方法里改变了其他的状态变量，也会引起状态变更和@Watch的执行，要避免无限循环
  3. 在第一次初始化的时候，@Watch装饰的方法不会被调用，即认为初始化不是状态变量的改变。

示例：

@Component
struct TotalView {@Prop @Watch('onCountUpdated') count: number;@State total: number = 0;// @Watch cbonCountUpdated(propName: string): void {this.total += this.count;}build() {Text(`Total: ${this.total}`)}
}@Entry
@Component
struct CountModifier {@State count: number = 0;build() {Column() {Button('add to basket').onClick(() => {this.count++})TotalView({ count: this.count })}}
}
3.3.2 $$语法：内置组件双向同步

$$运算符为系统内置组件提供TS变量的引用，使得TS变量和系统内置组件的内部状态保持同步。

内部状态具体指什么取决于组件。

  • 当前$$支持基础类型变量，以及@State、@Link和@Prop装饰的变量。
  • 当前$$仅支持 bindPopup 属性方法的show参数，Radio组件的checked属性，Refresh组件的refreshing参数。
  • $$绑定的变量变化时，会触发UI的同步刷新。
@Entry
@Component
struct bindPopupPage {@State customPopup: boolean = false;build() {Column() {Button('Popup').margin(20).onClick(() => {this.customPopup = !this.customPopup}).bindPopup($$this.customPopup, {message: 'showPopup'})}}
}

衔接下一篇: 鸿蒙开发-ArkTS 语言-循环渲染

本文来自互联网用户投稿，该文观点仅代表作者本人，不代表本站立场。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如若转载，请注明出处：http://www.rhkb.cn/news/204603.html

如若内容造成侵权/违法违规/事实不符，请联系长河编程网进行投诉反馈email:809451989@qq.com，一经查实，立即删除！

相关文章

ArrayList源码全面解析

ArrayList源码全面解析

一、概述 ArrayList 是 java 集合框架中比较常用的数据结构,继承自 AbstractList&#xff0c;实现了 List 接口。底层采用数组来实现。ArrayList 实现了java.io.Serializable接口&#xff0c;这意味着ArrayList支持序列化&#xff0c;能通过序列化去传输。 1.1、底层数据结构…
阅读更多...
python基础练习题库实验6

python基础练习题库实验6

文章目录 题目1代码实验结果题目2代码实验结果题目3代码实验结果题目4代码实验结果题目总结题目1 根据以下规范编写一个函数： 函数名称：triple输入参数：1个输入参数数据类型字符串返回值：函数返回1个字符串值。该字符串由每个字符重复3次的句子构成。例如，如果句子是Uni，…
阅读更多...
Vue2问题：如何全局使用less和sass变量？

Vue2问题：如何全局使用less和sass变量？

前端功能问题系列文章&#xff0c;点击上方合集↑ 序言 大家好&#xff0c;我是大澈&#xff01; 本文约2400字&#xff0c;整篇阅读大约需要4分钟。 本文主要内容分三部分&#xff0c;如果您只需要解决问题&#xff0c;请阅读第一、二部分即可。如果您有更多时间&#xff…
阅读更多...
ESP32-Web-Server编程-建立第一个网页

ESP32-Web-Server编程-建立第一个网页

ESP32-Web-Server编程-建立第一个网页 HTTP 简述 可能你每天都要刷几个短视频&#xff0c;打开几个网页来娱乐一番。当你打开一个网络上的视频或者图片时&#xff0c;其实际发生了下面的流程&#xff1a; 其中客户端就是你的浏览器啦&#xff0c;服务器就是远程一个存放视频或…
阅读更多...
【网络奇幻之旅】那年我与大数据的邂逅

【网络奇幻之旅】那年我与大数据的邂逅

&#x1f33a;个人主页&#xff1a;Dawn黎明开始 &#x1f380;系列专栏&#xff1a;网络奇幻之旅 ⭐每日一句&#xff1a;循梦而行&#xff0c;向阳而生 &#x1f4e2;欢迎大家&#xff1a;关注&#x1f50d;点赞&#x1f44d;评论&#x1f4dd;收藏⭐️ 文章目录 &#x1f4…
阅读更多...
Mysql的二阶段提交

Mysql的二阶段提交

先看执行器与InnoDB引擎是如何更新一条指定的数据的 可以看到&#xff0c;InnoDB在写redo log时&#xff0c;并不是一次性写完的&#xff0c;而有两个阶段&#xff0c;Prepare与Commit阶段&#xff0c;这就是"两阶段提交"的含义。 为什么要写redo log&#xff0c;不…
阅读更多...
win_sever系列：windows sever 2012R和windows sever 2016如何开启远程连接服务以及问题解决

win_sever系列：windows sever 2012R和windows sever 2016如何开启远程连接服务以及问题解决

windows sever 2012R和windows sever 2016如何开启远程连接服务以及问题解决 一. windows sever 2012R和windows sever 2016如何开启远程连接服务前言一、确保需要进行远程的两个服务器处于同一网段二、关闭防火墙三、需要把被远程的电脑的允许远程打开3.1打开windows sever 20…
阅读更多...
N8975A/安捷伦Agilent N8975A噪声系数分析仪

N8975A/安捷伦Agilent N8975A噪声系数分析仪

181/2461/8938产品概述N8975A是一款高性能噪声系数分析仪 用于进行快速、准确且可重复的噪声系统测量。 N8975A易用的特性能将复杂的测量简单化并让您获得值得信任的可重复且可靠的测量结果。 N8975A可同时提供噪声系数和增益测量&#xff0c;并可以多种格式查看、打印和保存…
阅读更多...
CCFCSP试题编号：202109-2试题名称：非零段划分

CCFCSP试题编号：202109-2试题名称：非零段划分

用差分法 #include<iostream> #include<algorithm> #include<cstring> using namespace std;const int N 500000; const int M 10000; int a[N 2 ] { 0 }; int d[M 1] { 0 };int main() {int n;cin >> n;for (int i 1; i < n; i){cin >&g…
阅读更多...
Android修行手册-溢出父布局的按钮实现点击

Android修行手册-溢出父布局的按钮实现点击

Unity3D特效百例案例项目实战源码Android-Unity实战问题汇总游戏脚本-辅助自动化Android控件全解手册再战Android系列Scratch编程案例软考全系列Unity3D学习专栏蓝桥系列ChatGPT和AIGC &#x1f449;关于作者 专注于Android/Unity和各种游戏开发技巧&#xff0c;以及各种资源分…
阅读更多...
【vue】v-model在表单元素上的应用

【vue】v-model在表单元素上的应用

表单元素&#xff1a; https://blog.csdn.net/m0_67930426/article/details/134655644 使用模板 <!DOCTYPE html> <html lang"en"> <head><meta charset"UTF-8"><title>Title</title> </head><body>&l…
阅读更多...
UDP实现群聊通信

UDP实现群聊通信

服务器端 #include <myhead.h> #define UDPIP "192.168.115.92" #define UDPPORT 6666 //存储客户信息的链表结构体 typedef struct Node {char name[20];struct sockaddr_in cin;struct Node *next; }*linklist; //数据结构体 struct data_cli {char type;ch…
阅读更多...
12.docker的网络-host模式

12.docker的网络-host模式

1.docker的host网络模式简介 host模式下&#xff0c;容器将不会虚拟出自己的网卡、配置IP等&#xff0c;而是使用宿主机的IP和端口&#xff1b;也就说&#xff0c;宿主机的就是我的。 2. 以host网络模式创建容器 2.1 创建容器 我们仍然以tomcat这个镜像来说明一下。我们以h…
阅读更多...
Ubuntu 22.03 LTS 安装deepin-terminal 实现 终端 分屏

Ubuntu 22.03 LTS 安装deepin-terminal 实现 终端 分屏

deepin-terminal 安装 源里面自带了这个软件&#xff0c;可以直接装 sudo apt install deepin-terminal 启动 按下Win键&#xff0c;输入deep即可快速检索出图标&#xff0c;点击启动 效果 分屏 CtrlShiftH 水平分割 CtrlShiftJ 垂直分割 最多分割成四个小窗口&#xff0…
阅读更多...
C语言数据结构之顺序表（上）

C语言数据结构之顺序表（上）

前言&#xff1a; ⭐️此篇博文主要分享博主在学习C语言的数据结构之顺序表的知识点时写的笔记&#xff0c;若有错误&#xff0c;还请佬指出&#xff0c;一定感谢&#xff01;制作不易&#xff0c;若觉得内容不错可以点赞&#x1f44d;收藏❤️&#xff0c;这是对博主最大的认可…
阅读更多...
基于C#实现并查集

基于C#实现并查集

一、场景 有时候我们会遇到这样的场景&#xff0c;比如:M{1,4,6,8},N{2,4,5,7}&#xff0c;我的需求就是判断{1,2}是否属于同一个集合&#xff0c;当然实现方法有很多&#xff0c;一般情况下&#xff0c;普通青年会做出 O(MN)的复杂度&#xff0c;那么有没有更轻量级的复杂度呢…
阅读更多...
完美解决k8s master节点无法ping node节点中的IP或Service NodePort的IP

完美解决k8s master节点无法ping node节点中的IP或Service NodePort的IP

1、问题一 使用搭建好了K8S集群&#xff0c;先是node节点加入k8s集群时&#xff0c;用的内网IP&#xff0c;导致master节点无法操作node节点中的pod&#xff08;这里的不能操作&#xff0c;指定是无法查看node节点中pod的日志、启动描述、无法进入pod内部&#xff0c;即 kubec…
阅读更多...
游戏开发引擎Cocos Creator和Unity如何对接广告-AdSet聚合广告平台

游戏开发引擎Cocos Creator和Unity如何对接广告-AdSet聚合广告平台

在游戏开发方面&#xff0c;游戏引擎的选择对开发过程和最终的产品质量有着重大的影响&#xff0c;Unity和Cocos是目前全球两大商用、通用交互内容开发工具&#xff0c;这两款引擎受到广泛关注&#xff0c;本文将从多个维度对两者进行比较&#xff0c;为开发者提供正确的选择建…
阅读更多...
SEO工具-免费功能最全的5款SEO工具

SEO工具-免费功能最全的5款SEO工具

随着互联网的蓬勃发展&#xff0c;搜索引擎优化&#xff08;SEO&#xff09;已经成为许多企业和个人网站必备的关键技能。然而&#xff0c;对于初学者或者运营小型网站的人来说&#xff0c;使用专业的SEO工具可能涉及较高的成本。在这篇文章中&#xff0c;我们将向您推荐五款高…
阅读更多...
U4_2：图论之MST/Prim/Kruskal

U4_2：图论之MST/Prim/Kruskal

文章目录 一、最小生成树-MST生成MST策略一些定义 思路彩蛋 二、普里姆算法&#xff08;Prim算法&#xff09;思路算法流程数据存储分析 伪代码时间复杂度分析 三、克鲁斯卡尔算法&#xff08;Kruskal算法&#xff09;分析算法流程并查集-Find-set 伪代码时间复杂度分析 一、最…
阅读更多...
最新文章
推荐文章

Copyright @ 2022~2023