并不是状态变量的所有更改都会引起UI的刷新，只有可以被框架观察到的修改才会引起UI刷新。

这一节我们就来介绍那些可被观察的状态修改。

string、number、boolean

简单的基本类型的修改是可被观察的。

例如：

@Entry
@Component
struct Index {
  /**
   * 可观察变量
   */
  @State name: string = "张三"
  @State age: number = 18
  @State isSingle: boolean = false

  build() {
    Column() {
      Text(this.name)
      Text(`${this.age}`)
      Text(`${this.isSingle}`)
      Button("按钮").onClick(() => {
        this.name = "李四"
        this.age = 20
        this.isSingle = true
      })
    }
    .width('100%')
  }
}

运行结果：

 

从运行结果来看，string、number、boolean 这些简单的基本数据类型的修改都可被观察到。

class、Object

对象类型的修改是可被观察的。只要你对象里不嵌套对象，都是可以被观察到的。

例如：

/**
 * 人
 */
class Person {
  /**
   * 姓名
   */
  public name: string;
  /**
   * 年龄
   */
  public age: number;
  /**
   * 是否单身
   */
  public isSingle: boolean;

  constructor(name: string, age: number, isSingle: boolean) {
    this.name = name;
    this.age = age;
    this.isSingle = isSingle;
  }
}

@Entry
@Component
struct Index {
  /**
   * 可观察变量
   */
  @State person: Person = new Person("张三", 18, false);

  build() {
    Column() {
      Text(this.person.name)
      Text(`${this.person.age}`)
      Text(`${this.person.isSingle}`)
      Button("按钮").onClick(() => {
        this.person.name = "李四"
        this.person.age = 20
        this.person.isSingle = true
      })
    }
    .width('100%')
  }
}

运行结果：

 

从运行结果来看，class、Object 这些对象类型的修改也是可被观察到的。

enum

enum 枚举类型的修改是可被观察的。

例如：

/**
 * 枚举
 */
enum City {
  /**
   * 北京
   */
  Beijing = "北京",
  /**
   * 上海
   */
  Shanghai = "上海",
  /**
   * 武汉
   */
  Wuhan = "武汉"
}

@Entry
@Component
struct Index {
  /**
   * 可观察变量
   */
  @State city: City = City.Beijing

  build() {
    Column() {
      Text(`${this.city}`)
      Button("按钮").onClick(() => {
        this.city = City.Wuhan
      })
    }
    .width('100%')
  }
}

运行结果：

 

从运行结果来看，enum 枚举类型的修改是可被观察的。

数组

数组的修改是可被观察到的。只要你不数组嵌套数组，或者数组是对象类型，去修改对象里的值，其他都是可被观察的。

例如，数组搭配非对象类型（string、number、boolean）：

@Entry
@Component
struct Index {
  /**
   * 可观察变量
   */
  @State names: string[] = ["张三", "李四", "王五"]

  build() {
    Column() {
      ForEach(this.names, (item: string) => {
        Text(item)
      })
      Button("按钮").onClick(() => {
        this.names.push("赵六")
      })
    }
    .width('100%')
  }
}

运行结果：

 

从运行结果来看，我们往数组中添加了一个新值，UI 随即也刷新了。

修改 this.names[0] = "赵六"：

 

删除 this.names.pop()：

 

足以说明数组+基本类型的修改是可观察的。

接下来，观察数组+对象。

/**
 * 人
 */
class Person {
  /**
   * 姓名
   */
  public name: string;

  constructor(name: string) {
    this.name = name;
  }
}

@Entry
@Component
struct Index {
  /**
   * 可观察变量
   */
  @State persons: Person[] = [{ name: "张三" }, { name: "李四" }, { name: "王五" }]

  build() {
    Column() {
      ForEach(this.persons, (item: Person) => {
        Text(item.name)
      })
      Button("按钮").onClick(() => {
        this.persons.push({ name: "赵六" })
      })
    }
    .width('100%')
  }
}

添加一个 Person 对象的运行结果：