HarmonyOS鸿蒙开发组件状态管理详细说明（State、Prop、Link、Provide和Consume、Watch、ObjectLink和Observed）

组件状态管理

关注’猿来编码‘，微信订阅号，回复 ’组件状态‘，获取详细

---

---

---

一、@State

@State用于装饰当前组件的状态变量，@State装饰的变量在发生变化时，会驱动当前组件的视图刷新，语法如下：

@State count:number = 1;

需要注意的是：@State装饰的变量必须进行本地初始化。

允许装饰的类型
基本类型：string、number、boolean、enum
对象类型：json对象、class的实例对象、
数组类型：上面所有类型的数组
能够观察到的变化
注意:
并不是状态变量的所有更改都会引起UI的刷新
只有可以被框架观察到的修改才会引起UI刷新
属性本身的改变都可以 （无论什么类型）
对象：能监视对象的直接属性变化，不能监视嵌套属性的改变
数组：能监视数组中元素的变化，不能监视元素对象内部的变化
测试
定义对象和数组的状态和显示数据

@State @Watch('onChange')obj: {
   a: {
   b: number}} = {
   a: {
   b: 1}}
@State @Watch('onChange2')arr: {
   a: number}[] = [{
   a: 1}]

Text('state.obj' + JSON.stringify(this.obj)).fontSize(18)
Text('state.arr' + JSON.stringify(this.arr)).fontSize(18)

修改属性对象

this.obj = {
   a: {
   b: 2}}   // 修改属性本身 => 能监视

this.obj.a = {
   b: 3}  // 修改属性对象的直接属性 =》 能监视

this.obj.a.b = 4   // 修改属性对象的嵌套属性 =》 不能监视到

修改属性数组

this.arr = [] // 修改属性本身 => 能监视

this.arr[0] = {
   a: 2} // 修改属性数组的元素 => 能监视

this.arr.push({
   a: 3}) // 修改属性数组的元素 => 能监视

this.arr[0].a = 4 // 修改属性数组的元素对象内部属性 =》 不能监视

二、@Prop

@Prop用于装饰子组件的状态变量，@Prop装饰的变量会同步父组件的状态，但只能单向同步，也就是父组件的状态变化会自动同步到子组件，而子组件的变化不会同步到父组件。
父组件

@Entry
@Component
struct Parent{
   
  @State count:number = 1;
  build(){
   
    Column(){
   
      Child({
   count:this.count});
    }
  }
}

子组件

@Component
export struct Child{
   
  @Prop count:number;
  build(){
   
    Text('prop.count: ' + this.count);
  }
}

需要注意的是：@Prop装饰的变量不允许本地初始化，只能通过父组件传参进行初始化。
允许装饰的类型
官方文档：只允许基本类型，不允许对象和数组
实际情况：与@State一致，可以是对象、数组
能够观察到的变化
与@State一致

三、@Link

@Link用于装饰子组件的状态变量，@Prop变量同样会同步父组件状态，但是能够双向同步。也就是父组件的变化会同步到子组件，而子组件的变化也会同步到父组件。
父组件

@Entry
@Component
struct Parent{
   
  @State count:number = 1;
  build(){
   
    Column(){
   
      Child({
   count: $count});
    }
  }
}

子组件

@Component
export struct Child{
   
  @Link count:number;
  build(){
   
    Text('link.count: ' + this.count);
  }
}

需要注意的是：@Link装饰的变量不允许本地初始化，只能由父组件通过传参进行初始化，并且父组件必须使用$变量名的方式传参，以表示传递的是变量的引用。
允许装饰的类型
与@State一致
框架能够观察到的变化
与@State一致

四、@Provide 与 @Consume

@Provide和@Consume用于跨层级传递状态信息，其中@Provide用于装饰祖先组件的状态变量，@Consume用于装饰后代组件的状态变量。可以理解为祖先组件提供（Provide）状态信息供后代组件消费（Consume），并且祖先和后代的状态信息可以实现双向同步。
注意:
@Provide装饰变量必须本地初始化，而@Consume装饰的变量不允许本地初始化。
@Provide & @Consume处理的状态数据是双向同步的
祖先组件

@Entry
@Component
struct GrandParent {
   
    @Provide count