HarmonyOS数据响应式@State

HarmonyOS 保留了非常多WEB开发的先进思想 那么目前主流技术都在用的数据响应又怎么会没有呢?
我们这里代码这样写

@Entry
@Component
struct AppView {
  ary: object = {
    name: "小猫猫",
    age: 13
  }
  build() {
    Column(){
      // @ts-ignore
      Text(this.ary.name)
        .fontSize(50)
        .onClick(()=>{
          // @ts-ignore
          this.ary.name = "大猫猫";
          // @ts-ignore
          console.log(this.ary.name);
        })
    }
    .width('100%')
    .height('100%')
  }
}

我们在最上面定义了一个对象 ary
两个字段 name 值为 小猫猫 age 值为 13
然后 用text组件展示name
然后 给text添加点击事件 事件改变ary.name的值

我们点击效果如下图
HarmonyOS数据响应式@State_第1张图片
可以看到 控制台 console.log(this.ary.name); 输出的内容是正确的 说明 ary.name的值已经改变了

但是页面内容并没有更新
我们可以这样

@Entry
@Component
struct AppView {
  @State ary: object = {
    name: "小猫猫",
    age: 13
  }
  build() {
    Column(){
      // @ts-ignore
      Text(this.ary.name)
        .fontSize(50)
        .onClick(()=>{
          // @ts-ignore
          this.ary.name = "大猫猫";
          // @ts-ignore
          console.log(this.ary.name);
        })
    }
    .width('100%')
    .height('100%')
  }
}

简单说 在声明ary的前面加了一个@State
此时 我们在点击Text
HarmonyOS数据响应式@State_第2张图片
可以看到 页面就改变了

简单说 数据声明加上@State 就成了一个响应式数据

你可能感兴趣的:(harmonyos,鸿蒙,华为)